Bootstrap, from Twitter, is the most popular front-end framework at present. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is simple and flexible, making web development faster.
Key points for learning:
1. Auxiliary group
2. Responsive tools
In this lesson, we mainly learn about Bootstrap's auxiliary group classes and responsive tools. The auxiliary class provides a set of classes to assist in group page design, while the responsive tools use media queries to display or hide certain content.
one. Auxiliary
Bootstrap provides some small auxiliary group styles in terms of layout, which are used to set text colors and background colors, display close icons, etc.
1. Situational text color
Style list Style name description text-muted Soft gray text-primary Main blue text-success Success Green text-info Information Blue text-warning Warning Yellow text-danger Danger Red // Fonts of various tones <p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial</p><p>Bootstrap Video Tutorial</p>
2. Situation background color
Style list Style name description bg-primary main blue bg-success success green bg-info information blue bg-warning warning yellow bg-danger dangerous red // backgrounds of various tones <p>Bootstrap video tutorial</p><p>Bootstrap video tutorial</p><p>Bootstrap video tutorial</p><p>Bootstrap video tutorial</p><p>Bootstrap video tutorial</p><p>Bootstrap video tutorial</p><p>Bootstrap video tutorial</p><p>Bootstrap video tutorial</p>
3. Close button
<button type="button">×</button>
4. Triangle symbols
<span></span>
5. Float quickly
<div>Left</div><div>Right</div>
Note: This float is actually a float, but it is used!important has enhanced the priority.
6. Block level centered
<div>Center</div>
Note: It is margin:x auto; and display:block; is set.
7. Clean up the float
<div></div>
Note: This div can be placed in front of the floating block that needs to be cleaned.
8. Show and hide
<div>show</div><div>hidden</div>
two. Responsive Tools
When searching media, some content is sometimes required to be displayed and hidden for different screen sizes. Responsive tools class provides this solution.
//Super small screen activation display <div>Bootstrap</div> //Super small screen activation hide <div>Bootstrap</div>
Note: There are three variants for the displayed content, namely: block, inline-block, and inline.
The above is the relevant content of BootStrap component auxiliary group classes and responsive tools that the editor introduced to you. I hope it will be helpful to you!