Bootstrap helper class
This chapter will discuss some helper classes in Bootstrap that may come in handy.
Text
The following different classes show different text colors. If the text is a link, the text will darken when the mouse is moved over it:
| Class | Description | Instance |
|---|---|---|
| .text-muted | Text style of "text-muted" class | Try it |
| .text-primary | Text style of "text-primary" class | Try it |
| .text-success | Text style of "text-success" class | Try it |
| .text-info | "text-info" class text style | Try it |
| .text-warning | "text -warning" class text style | Try it |
| .text-danger | "text-danger" class Text Style | Try it out |
Background
The different classes below show different background colors. If the text is a link, the text will darken when the mouse is moved over it:
| Class | Description | Instance |
|---|---|---|
| .bg-primary | The table cell uses the "bg-primary" class | Try it |
| .bg-success | Table cells use the "bg-success" class | Try it |
| .bg-info | Table cells The "bg-info" class is used | Try it |
| .bg-warning | The table cell uses the "bg-warning" class | Try it |
| .bg-danger | The table cell uses the "bg-danger" class | Try it |
Other
| Class | Description | Instance |
|---|---|---|
| .pull-left | Elements float to the left | Try it |
| .pull-right | Elements float to the right | Try it |
| .center-block | Set the element to display:block and center it | Try it |
| .clearfix | Clear float | |
| .show | Force element display | Try it |
| .hidden | Force element hiding | Try it |
| .sr-only | Hide elements on devices other than screen readers | Try it |
| .sr-only-focusable | with Used in combination with the .sr-only class to display when the element gets focus (for example: users operating the keyboard) | Try it |
| .text-hide | Replace the text content contained in the page element with the background image | Try it |
| .close | Display the close button | Try it |
| .caret | Display drop-down function | Try it |
More examples
Close icon
Use a universal close icon to close modal boxes and alert boxes. Use class close to get the close icon.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example - Close Icon</title>
< ;link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http:/ /apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap /3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<p>Close icon instance
<button type="button" class="close" aria-hidden="true">
×
</button>
</p>
</body>
</html>
<html>
<head>
<title>Bootstrap Example - Close Icon</title>
< ;link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http:/ /apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap /3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<p>Close icon instance
<button type="button" class="close" aria-hidden="true">
×
</button>
</p>
</body>
</html>
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 关闭图标</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <p>关闭图标实例 <button type="button" class="close" aria-hidden="true"> × </button> </p> </body> </html>
Run Example»
Click the "Run Example" button to view the online example
Caret
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example - Caret</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css /bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<p>Caret example
<span class="caret"></span>
</p>
</body>
</html>
<html>
<head>
<title>Bootstrap Example - Caret</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css /bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<p>Caret example
<span class="caret"></span>
</p>
</body>
</html>
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 插入符</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <p>插入符实例 <span class="caret"></span> </p> </body> </html>
Running Example»
Click the "Run Instance" button to view the online instance
Quick Float
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 Example - Fast Float</title>
< ;link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http:/ /apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap /3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="pull-left ">
Quickly float to the left
</div>
<div class="pull-right">
Quickly float to the right
</div>
</body>
</html>
<html>
<head>
<title>Bootstrap Example - Fast Float</title>
< ;link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http:/ /apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap /3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="pull-left ">
Quickly float to the left
</div>
<div class="pull-right">
Quickly float to the right
</div>
</body>
</html>
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 快速浮动</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <div class="pull-left"> 向左快速浮动 </div> <div class="pull-right"> 向右快速浮动 </div> </body> </html>
Run Example»
Click the "Run Example" button to view the online example
To align components in the navigation bar, please use .navbar-left or .navbar-right instead. Check out the Bootstrap navigation bar.
Content centering
Use class center-block to center the element.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example - Centered Content Block</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http: //apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/ bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" > ##</div>
</body>
</html>
##Example
<html>
<head>
<title>Bootstrap Example - Centered Content Block</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http: //apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/ bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" > ##</div>
</body>
</html>
##Example
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 居中内容块</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <div class="row"> <div class="center-block" style="width:200px;background-color:#ccc;"> 这是 center-block 实例 </div> </div> </body> </html>
Run Example»
Click the "Run Example" button to view the online example
Clear the float
If you need to clear the float of the element, please use .clearfix class.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example - Clear Float</title>
< ;link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http:/ /apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap /3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="clearfix" style ="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
<div class="pull-left" style="background:#58D3F7;">
To the left Quickly float
</div>
##</div>
</body>
</html>
##Example
<html>
<head>
<title>Bootstrap Example - Clear Float</title>
< ;link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http:/ /apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap /3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="clearfix" style ="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
<div class="pull-left" style="background:#58D3F7;">
To the left Quickly float
</div>
##</div>
</body>
</html>
##Example
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 清除浮动</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></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>
Run Instance»Click the "Run Instance" button to view the online instance
Run Instance»
Showing and Hiding Content
You can force an element to be shown or hidden (including by screen readers) by using class .show and .hidden.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example - Showing and Hiding Content</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http ://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs /bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row " style="padding: 91px 100px 19px 50px;">
<div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">
This is an example of show class
</div>
<div class="hidden" style="width:200px;background-color:#ccc;">
This is hide class Example
</div>
</div>
</body>
</html>
<html>
<head>
<title>Bootstrap Example - Showing and Hiding Content</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http ://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs /bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row " style="padding: 91px 100px 19px 50px;">
<div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">
This is an example of show class
</div>
<div class="hidden" style="width:200px;background-color:#ccc;">
This is hide class Example
</div>
</div>
</body>
</html>
Example
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 显示和隐藏内容</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></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>
Run Instance»
Click the "Run Instance" button to view the online instance
Screen readers
You can hide an element from all devices except screen readers by using class .sr-only.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example - Screen Reader</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http: //apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/ bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style="padding: 91px 100px 19px 50px;">
<form class="form-inline" role="form">
<div class="form-group">
;
</div>
<
<input type="password" class="form-control" placeholder="Password">
##</body>
</html>
Example
<html>
<head>
<title>Bootstrap Example - Screen Reader</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http: //apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/ bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row" style="padding: 91px 100px 19px 50px;">
<form class="form-inline" role="form">
<div class="form-group">
;
</div>
<
<input type="password" class="form-control" placeholder="Password">
##</body>
</html>
Example
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 屏幕阅读器</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></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>
Run Example»
Click the "Run Instance" button to view the online instance
