The sixth chapter the Auxiliary group class and the response type tool _javascript skill

Bootstrap, from Twitter, is currently the most popular front-end framework. Bootstrap is based on HTML, CSS, JAVASCRIPT, it is simple and flexible, making Web development faster.

Learning points:

1. Auxiliary Group class

2. Response Tools

In this lesson, we will focus on the Bootstrap class and response tools, which provide a set of classes to support the design of the page, while the response tool uses media queries to show or hide some content.

A Auxiliary class

Bootstrap provides a few small auxiliary group styles for layout, for text color and background color setting, display off icon, and so on.

1. Story text color

Style list
style name Description
text-muted Soft gray
text-primary main blue
text-success successful green
text-info information Blue
text-warning Warning yellow
Text-danger dangerous red 
//Various tonal fonts
<p class= "text-muted" >bootstrap Video Tutorials </p>
<p class = "Text-primary" >bootstrap Video tutorials </p>
<p class= "text-success" >bootstrap Video Tutorials </p>
< P class= "Text-info" >bootstrap Video tutorials </p>
<p class= "text-warning" >bootstrap Video Tutorials </p>

2. Scene 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 danger red 
// Various shades of background
<p class= "bg-primary" >bootstrap Video tutorials </p>
<p class= "bg-success" >bootstrap Video Tutorials </p>
<p class= "bg-info" >bootstrap Video tutorials </p>
<p class= "bg-warning" >bootstrap Video Tutorials </p>

3. Close button

4. Triangle symbol

5. Fast Floating

<div class= "Pull-left" > Left </div>

Note: This float is actually float, but using the!important to enhance the priority.

6. Block-level Center

Note: is margin:x auto; and set the Display:block;.

7. Clearing floating

Note: This div can be placed in front of a floating block that needs to be cleaned.

8. Show and Hide

<div class= "Show" >show</div>

Two Responsive tools

In a media query, there are times when you want to display and hide portions of the content for different screen sizes. Response Tool class, this solution is provided.

Super small screen activation display
<div class= "Visible-xs-block a" >Bootstrap</div> 
//Super small screen activation hidden

Note: for the displayed content, there are three variants, respectively: block, Inline-block, inline.

The above is a small set to introduce the bootstrap components of the auxiliary group and response tools related content, I hope to help!