Bootstrap architecture knowledge point

. Col-md-pull-2 relative position offset to the right
. Col-md-push-2 to left relative positioning offset
. Pull-left floating
. Pull-Right floating right

 

 

Change case sensitivity

These classes can change the case sensitivity of text.

<P class = "text-lowercase"> lowercased text. </P> // convert it to lowercase.
<P class = "text-uppercase"> uppercased text. </P> // convert it to uppercase.
<P class = "text-capitalize"> capitalized text. </P> // each word in the text starts with an uppercase letter.

 

IE compatibility mode

Bootstrap does not support the old ie compatibility mode. To enable IE to run the latest rendering mode, we recommend that you add this label to your page:<Meta http-equiv = "X-UA-compatible" content = "Ie = edge">

/* Large screen */
@ Media (min-width: pixel px ){...}
/* Resolution between the tablet computer and the small screen computer */
@ Media (min-width: 768px) and (max-width: 979px ){...}
/* Resolution between the mobile phone and the tablet placed vertically */
@ Media (max-width: 767px ){...}
/* Mobile phones placed horizontally and devices with smaller resolutions */
@ Media (max-width: 480px ){...}

Secondary class with responsive Layout

To develop mobile devices more quickly, the auxiliary classes listed below are used to display and hide content for different devices. The following table lists the available classes and their effects in each media query layout. These classes can be found in the responsive. Less file.

IE compatibility mode

Bootstrap does not support the old ie compatibility mode. To enable IE to run the latest rendering mode, we recommend that you Add tags to your page:

1	<Meta http-equiv = "X-UA-compatible" content = "Ie = edge">

1 2 3 4 5 6 7 8 9 10 11

/* Large screen */ @ Media (min-width: pixel px ){...} /* Resolution between the tablet computer and the small screen computer */ @ Media (min-width: 768px) and (max-width: 979px ){...} /* Resolution between the mobile phone and the tablet placed vertically */ @ Media (max-width: 767px ){...} /* Mobile phones placed horizontally and devices with smaller resolutions */ @ Media (max-width: 480px ){...}

Secondary class with responsive Layout

To develop mobile devices more quickly, the auxiliary classes listed below are used to display and hide content for different devices. The following table lists the available classes and their effects in each media query layout. These classes can be found in the responsive. Less file.

Class	Mobile phone767px and below	Tablet979px to 768px	ComputerDefault
. Visible-phone	Display	Hide	Hide
. Visible-Tablet	Hide	Display	Hide
. Visible-Desktop	Hide	Hide	Display
. Hidden-phone	Hide	Display	Display
. Hidden-Tablet	Display	Hide	Display
. Hidden-Desktop	Display	Display	Hide