bootstrap< Basic Nine > Auxiliary class

Original:bootstrap< Basic Nine > Auxiliary class

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 character
Use 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 Floating
You 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 Centered
Use class Center-block to center the element.
<! DOCTYPE html>      This is the center-Block   instance </div></div></body>
The results are as follows:
Clear floating
To 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 content
You 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 reader
You 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 Overview
bootstrap< 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 10 > responsive Utility
bootstrap< Basic 11 > Font icons (glyphicons)
Bootstrap < Basics 12 > drop-down menu (dropdowns)
bootstrap< Basic 13 > button Group
bootstrap< Basic 14 > button drop-down menu
bootstrap< Basic 15 > Input Frame Group
bootstrap< basic 16 > Navigation elements
bootstrap< basic 17 > Navigation Bar Bootstrap < basic 18 > Breadcrumb navigation (Breadcrumbs) Bootstrap < Fundamentals 19 > Pagination bootstrap< Basics 20 > Tags Bootstrap < fundamentals 21 > badges (Badges) Bootstrap < basic 22 > Oversized screen (Jumbotron) Bootstrap < basic 23 > page title Header) bootstrap< Basic 24 > Thumbnail Bootstrap < basic 25 > Warning (Alerts) Bootstrap < basic 26 > progress bar
bootstrap< Basic Nine > Auxiliary class