Bootstrap auxiliary class
May 04, 2021 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">
× </button></p></body></html>The result is as follows:
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:
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:
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:
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:
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:
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:
Here, we see that both input-type label tags have class sr-only, so the labels will only be visible to screen readers.