bootstrap< Basic Nine > Auxiliary class

Source: Internet
Author: User
Tags button type

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 Nine > Auxiliary class

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.