Bootstrap 基礎(chǔ)教程
Bootstrap 環(huán)境安裝
Bootstrap 教程
Bootstrap CSS
Bootstrap CSS 概覽
Bootstrap 按鈕
Bootstrap 表單
Bootstrap 表格
Bootstrap 代碼
Bootstrap 輔助類
Bootstrap 排版
Bootstrap 圖片
Bootstrap 網(wǎng)格系統(tǒng)
Bootstrap 網(wǎng)格系統(tǒng)實例：堆疊的水平
Bootstrap 網(wǎng)格系統(tǒng)實例：手機(jī)、平板電腦、臺式電腦
Bootstrap 網(wǎng)格系統(tǒng)實例：中型和大型設(shè)備
Bootstrap 響應(yīng)式實用工具
Bootstrap 布局組件
Bootstrap Well
Bootstrap 按鈕下拉菜單
Bootstrap 按鈕組
Bootstrap 標(biāo)簽
Bootstrap 超大屏幕（Jumbotron）
Bootstrap 導(dǎo)航欄
Bootstrap 導(dǎo)航元素
Bootstrap 多媒體對象（Media Object）
Bootstrap 分頁
Bootstrap 徽章（Badges）
Bootstrap 進(jìn)度條
Bootstrap 警告（Alerts）
Bootstrap 列表組
Bootstrap 面板（Panels）
Bootstrap 面包屑導(dǎo)航（Breadcrumbs）
Bootstrap 輸入框組
Bootstrap 縮略圖
Bootstrap 下拉菜單（Dropdowns）
Bootstrap 頁面標(biāo)題（Page Header）
Bootstrap 字體圖標(biāo)(Glyphicons)
Bootstrap 插件
Bootstrap 按鈕（Button）
Bootstrap 標(biāo)簽頁（Tab）
Bootstrap 插件概覽
Bootstrap 彈出框（Popover）
Bootstrap 附加導(dǎo)航（Affix）
Bootstrap 滾動監(jiān)聽（Scrollspy）
Bootstrap 過渡效果（Transition）
Bootstrap 警告框（Alert）
Bootstrap 輪播（Carousel）
Bootstrap 模態(tài)框（Modal）插件
Bootstrap 提示工具（Tooltip）
Bootstrap 下拉菜單（Dropdown）
Bootstrap 折疊（Collapse）
Bootstrap 附錄
Bootstrap CSS編碼規(guī)范
Bootstrap HTML編碼規(guī)范
Bootstrap UI 編輯器
?
This document uses PHP Chinese website manual Release
characters
Bootstrap 輔助類
本章將討論 Bootstrap 中的一些可能會派上用場的輔助類。
文本
以下不同的類展示了不同的文本顏色。如果文本是個鏈接鼠標(biāo)移動到文本上會變暗：
| 類 | 描述 | 實例 |
|---|---|---|
| .text-muted | "text-muted" 類的文本樣式 | 實例 ? |
| .text-primary | "text-primary" 類的文本樣式 | 實例 ? |
| .text-success | "text-success" 類的文本樣式 | 實例 ? |
| .text-info | "text-info" 類的文本樣式 | 實例 ? |
| .text-warning | "text-warning" 類的文本樣式 | 實例 ? |
| .text-danger | "text-danger" 類的文本樣式 | 實例 ? |
背景
以下不同的類展示了不同的背景顏色。 如果文本是個鏈接鼠標(biāo)移動到文本上會變暗：
| 類 | 描述 | 實例 |
|---|---|---|
| .bg-primary | 表格單元格使用了 "bg-primary" 類 | 實例 ? |
| .bg-success | 表格單元格使用了 "bg-success" 類 | 實例 ? |
| .bg-info | 表格單元格使用了 "bg-info" 類 | 實例 ? |
| .bg-warning | 表格單元格使用了 "bg-warning" 類 | 實例 ? |
| .bg-danger | 表格單元格使用了 "bg-danger" 類 | 實例 ? |
其他
| 類 | 描述 | 實例 |
|---|---|---|
| .pull-left | 元素浮動到左邊 | 實例 ? |
| .pull-right | 元素浮動到右邊 | 實例 ? |
| .center-block | 設(shè)置元素為 display:block 并居中顯示 | 實例 ? |
| .clearfix | 清除浮動 | |
| .show | 強(qiáng)制元素顯示 | 實例 ? |
| .hidden | 強(qiáng)制元素隱藏 | 實例 ? |
| .sr-only | 除了屏幕閱讀器外，其他設(shè)備上隱藏元素 | 實例 ? |
| .sr-only-focusable | 與 .sr-only 類結(jié)合使用，在元素獲取焦點時顯示(如：鍵盤操作的用戶) | 實例 ? |
| .text-hide | 將頁面元素所包含的文本內(nèi)容替換為背景圖 | 實例 ? |
| .close | 顯示關(guān)閉按鈕 | 實例 ? |
| .caret | 顯示下拉式功能 | 實例 ? |
更多實例
關(guān)閉圖標(biāo)
使用通用的關(guān)閉圖標(biāo)來關(guān)閉模態(tài)框和警告框。使用 class close 得到關(guān)閉圖標(biāo)。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 關(guān)閉圖標(biāo)</title>
<link rel="stylesheet" >
<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>關(guān)閉圖標(biāo)實例
<button type="button" class="close" aria-hidden="true">
×
</button>
</p>
</body>
</html>
結(jié)果如下所示：
插入符
使用插入符表示下拉功能和方向。使用帶有 class caret 的 <span> 元素得到該功能。
<!DOCTYPE html> <html> <head> <title>Bootstrap 實例 - 插入符</title> <link rel="stylesheet" > <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>插入符實例 <span class="caret"></span> </p> </body> </html>
結(jié)果如下所示：
快速浮動
您可以分別使用 class pull-left 或 pull-right 來把元素向左或向右浮動。下面的實例演示了這點。
<!DOCTYPE html> <html> <head> <title>Bootstrap 實例 - 快速浮動</title> <link rel="stylesheet" > <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"> 向左快速浮動 </div> <div class="pull-right"> 向右快速浮動 </div> </body> </html>
結(jié)果如下所示：
如需對齊導(dǎo)航欄中的組件，請使用 .navbar-left 或 .navbar-right 代替。請查看 Bootstrap 導(dǎo)航欄。
內(nèi)容居中
使用 class center-block 來居中元素。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 居中內(nèi)容塊</title>
<link rel="stylesheet" >
<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 class="center-block" style="width:200px;background-color:#ccc;">
這是 center-block 實例
</div>
</div>
</body>
</html>
結(jié)果如下所示：
清除浮動
如需清除元素的浮動，請使用 .clearfix class。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 清除浮動</title>
<link rel="stylesheet" >
<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;">
向左快速浮動
</div>
<div class="pull-right" style="background: #DA81F5;">
向右快速浮動
</div>
</div>
</body>
</html>
結(jié)果如下所示：
顯示和隱藏內(nèi)容
您可以通過使用 class .show 和 .hidden 來強(qiáng)行設(shè)置元素顯示或隱藏（包括屏幕閱讀器）。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 顯示和隱藏內(nèi)容</title>
<link rel="stylesheet" >
<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;">
這是 show class 的實例
</div>
<div class="hidden" style="width:200px;background-color:#ccc;">
這是 hide class 的實例
</div>
</div>
</body>
</html>
結(jié)果如下所示：
屏幕閱讀器
您可以通過使用 class .sr-only 來把元素對所有設(shè)備隱藏，除了屏幕閱讀器。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 屏幕閱讀器</title>
<link rel="stylesheet" >
<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">
<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>
</div>
</body>
</html>
結(jié)果如下所示：
在這里，我們看到兩個 input 類型的 label 標(biāo)簽都帶有 class sr-only，因此標(biāo)簽將只對屏幕閱讀器可見。