Some of the auxiliary classes that may come in handy in Bootstrap. Text
The following different classes show different text colors. If the text is a link the mouse moves to the text that is dimmed:
class |
Description |
|
. text-muted |
Text styles for the "text-muted" class |
|
. text-primary |
Text styles for the "Text-primary" class |
|
. text-success |
Text styles for the "Text-success" class |
|
. text-info |
Text styles for the "Text-info" class |
|
. text-warning |
Text styles for the "Text-warning" class |
|
. Text-danger |
Text styles for the "Text-danger" class |
|
Background
The following different classes show different background colors. If the text is a link the mouse moves to the text that is dimmed:
class |
Description |
|
. bg-primary |
Table cells use the "bg-primary" class |
|
. bg-success |
Table cells use the "bg-success" class |
|
. bg-info |
Table cells use the "Bg-info" class |
|
. bg-warning |
Table cells use the "bg-warning" class |
|
. Bg-danger |
Table cells use the "Bg-danger" class |
|
Other
class |
Description |
|
. pull-left |
Element floats to the left |
|
. pull-right |
Element floats to the right |
|
. center-block |
Set the element to Display:block and center the display |
|
. clearfix |
Clear floating |
|
. Show |
Force element Display |
|
. Hidden |
Force element hiding |
|
. sr-only |
In addition to screen readers, hidden elements on other devices |
|
. sr-only-focusable |
Used in conjunction with the. Sr-only class to display when an element gets focus (for example, a user with a keyboard operation) |
|
. text-hide |
Replace the text content contained in a page element with a background map |
|
. Close |
Show Close button |
|
. Caret |
Show drop-down function |
|
More instance Close icon
Use the generic close icon to close the modal box and the warning box. Use class close to get the close icon.
<! DOCTYPE html>close icon Instance <button type= "button" class= "Close" aria-hidden= "true" > & Times; </button></p></body>
The results are as follows:
Insert characterUse the caret to represent the drop-down function and orientation. Use the <span> element with class caret to get this functionality.
<! DOCTYPE html>Caret instance <span class= "caret" ></span></p></body>
The results are as follows:
Fast FloatingYou can use class Pull-left or pull-right to float elements to the left or right, respectively. This is demonstrated in the following example.
<! DOCTYPE html> left fast floating </div><div class= "Pull-right" > Right quick float </div></body>
The results are as follows:
To align the components in the navigation bar, use. navbar-left or. Navbar-right instead.
Content CenteredUse class Center-block to center the element.
<! DOCTYPE html> This is the center-Block instance </div></div></body>
The results are as follows:
Clear floatingTo clear the float of an element, use the. Clearfix class.
<! DOCTYPE html> left fast floating </div> <div class= "pull-right" style= "background: #DA81F5;" > Right fast floating </div></div></body>
The results are as follows:
Show and hide contentYou can force set elements to be displayed or hidden (including screen readers) by using class. Show and. Hidden.
<! DOCTYPE html> This is an example of show class </div> <div class= "hidden" style= "width:200px;" > This is an instance of Hide class </div></div></body>
The results are as follows:
Screen readerYou can hide elements on all devices, except screen readers, by using class. Sr-only.
<! DOCTYPE html> for= "Email" >email address </label> <input type= "email" class= "Form-control" placeholder= "Enter Email" > </d iv> <div class= "Form-group" > <label class= "sr-only" for= "Pass" > Password </label> <input type= "password" class= "Form-control" placeholder= "password" > </div>& Lt;/div></body>The results are as follows:
Here we see a label label of two input types with class sr-only, so the label will be visible only to screen readers.
Series Articles:Bootstrap < Fundamentals > CSS Overviewbootstrap< Basic two > network system
bootstrap< Basic three > typesetting
bootstrap< basic Four > code
Bootstrap < Fundamentals five > forms
bootstrap< basic six > form
Bootstrap < basic seven > button
Bootstrap < basics eight > pictures
bootstrap< Basic Nine > Auxiliary class
bootstrap< Basic Nine > Auxiliary class