Bootstrap auxiliary class


May 04, 2021 06:00 Bootstrap


Table of contents


Bootstrap auxiliary class

This chapter discusses some of the secondary classes in Bootstrap that might come in use.

Text

The following different classes show different text colors. If the text is a link mouse moves to the text it darkens:

Class Describe Instance
.text-muted Text style of the "text-muted" class Give it a try
.text-primary Text style of the "text-primaryy" class Give it a try
.text-success Text style of the "text-success" class Give it a try
.text-info Text style of the "text-info" class Give it a try
.text-warning The text style of the "text-warning" class Give it a try
.text-danger The text style of the "text-danger" class Give it a try

Background

The following different classes show different background colors. If the text is a link mouse moves to the text it darkens:

Class Describe Instance
.bg-primary Table cells use the "bg-primaryy" class Give it a try
.bg-success Table cells use the "bg-success" class Give it a try
.bg-info Table cells use the "bg-info" class Give it a try
.bg-warning Table cells use the "bg-warning" class Give it a try
.bg-danger Table cells use the "bg-danger" class Give it a try

Other

Class Describe Instance
.pull-left The element floats to the left Give it a try
.pull-right The element floats to the right Give it a try
.center-block Set the element to display:block and center the display Give it a try
.clearfix Clear the float Give it a try
.show Force the element to appear Give it a try
.hidden Force elements to be hidden Give it a try
.sr-only Hide elements on other devices than screen readers Give it a try
.sr-only-focusable Used in conjunction with the .sr-only class and displayed when the element gets focus (e.g., users of keyboard operations) Give it a try
.text-hide Replace the text content contained in the page element with a background map Give it a try
.close The close button is displayed Give it a try
.caret Displays the pull-down function Give it a try

More instances

Turn off the icon

Use the common close icon to close the modal and warning boxes. Use class close to get the close icon.

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 关闭图标</title>
   <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><p>关闭图标实例   <button type="button" class="close" aria-hidden="true">
      &times;   </button></p></body></html>

The result is as follows:

Bootstrap auxiliary class

The insert

Use inserts to represent the pull-down function and direction. Get this functionality by using the element with class caret.

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 插入符</title>
   <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><p>插入符实例   <span class="caret"></span></p></body></html>

The result is as follows:

Bootstrap auxiliary class

Float quickly

You can use class pull-left or pull-right to float elements to the left or right, respectively. The following example demonstrates this.

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 快速浮动</title>
   <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><div class="pull-left">
   向左快速浮动</div><div class="pull-right">
   向右快速浮动</div></body></html>

The result is as follows:

Bootstrap auxiliary class

To align components in the navigation bar, use .navbar-left or .navbar-right instead. Check out bootstrap navigation bar.

The content is centered

Use class center-block to center the element.

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 居中内容块</title>
   <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><div class="row">
   <div class="center-block" style="width:200px;background-color:#ccc;">
      这是 center-block 实例   </div></div></body></html>

The result is as follows:

Bootstrap auxiliary class

Clear the float

To clear the element's float, use .clearfix class.

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 清除浮动</title>
   <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
   <div class="pull-left" style="background:#58D3F7;">
      向左快速浮动   </div>
   <div class="pull-right" style="background: #DA81F5;">
      向右快速浮动   </div></div></body></html>

The result is as follows:

Bootstrap auxiliary class

Show and hide content

You can force elements to be displayed or hidden, including screen readers, by using class .show and .hidden.

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 显示和隐藏内容</title>
   <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><div class="row" style="padding: 91px 100px 19px 50px;">
   <div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">
      这是 show class 的实例   </div>
   <div class="hidden" style="width:200px;background-color:#ccc;">
      这是 hide class 的实例   </div></div></body></html>

The result is as follows:

Bootstrap auxiliary class

Screen reader

You can hide elements from all devices, except screen readers, by using class .sr-only.

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 屏幕阅读器</title>
   <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><div class="row" style="padding: 91px 100px 19px 50px;">
   <form class="form-inline" role="form">
   <div class="form-group">
      <label class="sr-only" for="email">Email 地址</label>
      <input type="email" class="form-control" placeholder="Enter email">
   </div>
   <div class="form-group">
      <label class="sr-only" for="pass">密码</label>
      <input type="password" class="form-control" placeholder="Password">
   </div>
   </form></div></body></html>

The result is as follows:

Bootstrap auxiliary class

Here, we see that both input-type label tags have class sr-only, so the labels will only be visible to screen readers.