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