Chapter 6 auxiliary group class and responsive tool_javascript skills

Bootstrap, from Twitter, is currently the most popular front-end framework. This article introduces the auxiliary group class and response tool of the BootStrap component. If you are interested, learn about Bootstrap. Twitter is the most popular front-end framework. Bootstrap is based on HTML, CSS, and JAVASCRIPT. It is concise and flexible, making Web development faster.

Learning points:

1. Auxiliary group class

2. responsive tools

In this lesson, we will take a look at Bootstrap's auxiliary group classes and responsive tools. The auxiliary classes provide a group of classes for the secondary group page design, responsive tools use media queries to display or hide certain content.

I. auxiliary classes

Bootstrap provides some small child group styles for text color, background color settings, and display and close icons.

1. Scene text color

Style list style name description text-muted soft gray text-primary Main blue text-success green text-info blue text-warning yellow text-danger dangerous red // various colors font
Bootstrap video tutorial
Bootstrap video tutorial
Bootstrap video tutorial
Bootstrap video tutorial
Bootstrap video tutorial
Bootstrap video tutorial
 

2. Background Color

Style list style Name Description bg-primary Main blue bg-success green bg-info blue bg-warning yellow bg-danger dangerous red // background of various tones
Bootstrap video tutorial
Bootstrap video tutorial
Bootstrap video tutorial
Bootstrap video tutorial
Bootstrap video tutorial
 

3. Close button

× 

4. triangle symbol

5. Fast floating

Left
Right side
 

Note: This float is actually a float, but it is used! Important enhances the priority.

6. Center the block level

Center
 

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

7. Clear floating

Note: This p can be placed before the floating block to be cleared.

8. Display and hide

show
hidden
 

2. responsive tools

For media queries, you may need to display and hide some content for different screen sizes. The response tool class provides this solution.

// Enable the display on the ultra-Small Screen
Bootstrap
// Enable hide on the ultra-Small Screen
Bootstrap
 

Note: The displayed content has three variants: block, inline-block, and inline.

The above is a small Editor to introduce you to the BootStrap component auxiliary group class and response tool related content, I hope to help you!