本篇主要包括：

■? Page Header
■? Breadcrumbs
■? Button Groups
■? Dropdowns
■? Button Dropdowns
■? 用Button和Dropdowns模擬Select
■? Input Groups
■? Thumbnails
■? Panels
■? Wells

□ Page Header

Page Header是指頁面最頂部。

            <div class="page-header">                <h1>超級球迷</h1>                <p class="text-warning">關于我們</p>            </div>

以上div會跑到頁面最頂部。

□ Breadcrumbs

面包屑。

 <div class="page-header">  <ol class="breadcrumb">  <li><a href="/">主頁</a></li>  <li class="active"><a href="/">關于我們</a></li>  </ol>  <p class="text-warning">關于我們</p>  </div> 

以上,ol部分為面包屑。

□ Button Groups

由幾個按鈕組成，但看上去像一個按鈕。

 <div class="row">  <div class="col-md-6 btn-group">  <button class="btn btn-success">按鈕1</button>  <button class="btn btn-success active">按鈕2</button>  <button class="btn btn-success">按鈕3</button>  </div>  </div>

btn-group-vertical：Button Group垂直排列
btn-group-sm：Button Group由小按鈕水平排列

一組radio，加上data-toggle="buttons"屬性，點擊某個radio，該按鈕呈按下狀。

 <div class="row">  <div class="btn btn-group-sm" data-toggle="buttons">  <label class="btn btn-success"><input type="radio"/>The Dude</label>  <label class="btn btn-success"><input type="radio"/>Donny</label>  <label class="btn btn-success"><input type="radio"/>Maude</label>  </div>  </div>

□ Dropdowns

點擊按鈕，呈現(xiàn)下拉選項。

            <div class="row">                <div class="dropdown">                    <button class="btn btn-sm btn-success" data-toggle="dropdown">點我</button>                    <ul class="dropdown-menu">                        <li><a href="#" tabindex="-1">Walter</a></li>                        <li><a href="#" tabindex="-1">Bunny</a></li>                        <li class="divider"></li>                        <li class="disabled"><a href="#" tabindex="-1">The Big</a></li>                    </ul>                </div>            </div>

□ Button Dropdowns

把Button Group和Dropdowns結合起來，點擊Button Group中的某個按鈕，呈現(xiàn)Dropdowns。

            <div class="row">                <div class="btn-group btn-group-sm" data-toggle="buttons">                    <label class="btn btn-success"><input type="radio"/>The Dude</label>                    <label class="btn btn-success"><input type="radio"/>Donny</label>                    <label class="btn btn-success"><input type="radio"/>Maude</label>                    <div class="btn-group btn-group-sm">                        <button class="btn btn-success" data-toggle="dropdown">Other<span class="caret"></span></button>                        <ul class="dropdown-menu">                            <li><a href="#" tabindex="-1">Walter</a></li>                            <li><a href="#" tabindex="-1">Bunny</a></li>                            <li class="divider"></li>                            <li class="disabled"><a href="#" tabindex="-1">The Big</a></li>                        </ul>                    </div>                </div>            </div>

還可以把按鈕和箭頭按鈕分隔成2個按鈕。

<button class="btn btn-success">Other</button><button class="btn btn-success" data-toggle="dropdown"><span class="caret"></span></button>

□ 用Button和Dropdowns模擬Select

html部分。

            <div class="row">                <div class="dropdown">                    <button class="btn btn-success" id="pickButton">請選擇...</button>                    <button class="btn btn-success" data-toggle="dropdown"><span class="caret"></span></button>                    <ul class="dropdown-menu" id="reasonDropdown">                        <li><a href="#" tabindex="-1">Adoration</a></li>                        <li><a href="#" tabindex="-1">Ordering a White Flower</a></li>                        <li><a href="#" tabindex="-1">I am lost</a></li>                    </ul>                </div>            </div>

當點擊向下箭頭，選擇Dropdowns選項，需要把選項顯示到id為pickButton的按鈕上。

在js文件夾中創(chuàng)建site.js文件。

(function() {    "use strict";    var $pckButton = $("#pickButton");    $("#reasonDropdown li a").on("click", function() {        var reason = $(this).text();        $pckButton.text(reason);    });})();

把site.js放到頁面底部。

□ Input Groups

Input Groups是指Input與其它元素組合在一起，呈現(xiàn)出一體的效果。

            <div class="row">                <div class="input-group">                    <span class="input-group-addon">Name</span>                    <input type="text" class="form-control" name="userName" placeholder="輸入用戶名"/>                </div>                          </div>

□ Pagination

 <div class="row">  <ul class="pager">  <li class="previous"><a href="#">&larr; 上一頁</a></li>  <li class="next"><a href="#">下一頁 &rarr;</a></li>  </ul>  </div>

還可以是帶數(shù)字分頁的。

            <div class="row">                <ul class="pagination pagination-lg">                    <li class="previous"><a href="#">&larr; 上一頁</a></li>                    <li><a href="#">1</a></li>                    <li><a href="#">2</a></li>                    <li><a href="#">3</a></li>                    <li class="next"><a href="#">下一頁 &rarr;</a></li>                </ul>                         </div>

□ Thumbnails

當把一個div加上class="thumbnail"屬性后，方便圖片和文字的排版。

            <div class="row">                <div class="col-md-4 col-sm-6">                    <div class="thumbnail">                        <a href="#"><img class="img-responsive lazy"  src="/static/imghw/default1.png"  data-src="images/18.jpg"  alt="18"/></a>                        <div class="caption">                            <h3>賽事消息</h3>                            <p>                                當比賽進行到第6分鐘時，郜林近距離攻門被托萊奇封堵，在郜林示意托萊奇有手球時，迪亞曼蒂在球門另一側的搶射被對手封堵?lián)醭?。主裁判哈桑沒有理會郜林的投訴，慢鏡頭顯示托萊奇確實有手球。                            </p>                        </div>                    </div>                </div>                      </div>

□ Panels

在設置為panel的div中，可以有panel的標題部分，panel的正文部分。

            <div class="row">                <div class="panel panel-default">                    <div class="panel-heading">                        <h2>標題</h2>                    </div>                    <div class="panel-body">                        <p>                            全場比賽傷停補時階段，最具爭議性的判罰出現(xiàn)了。在一次拼搶中，劉健背后對薩巴犯規(guī)，薩巴隨機倒地，張琳?有一個抬腿動作，試圖避免踩到薩巴，薩巴卻捂著臉在地上劇烈翻滾。                        </p>                        <img class="img-thumbnail lazy"  src="/static/imghw/default1.png"  data-src="images/19.jpg"  alt="19"/>                    </div>                </div>                  </div>

□ Wells

在設置為well的div中，這塊div在顯示的時候重點著色，有很強的背景效果。

            <div class="row">                <div class="well well-lg">                    <p>                        在2014賽季亞冠聯(lián)賽的一場1/4決賽首回合比賽中，廣州恒大客場0-1負于西悉尼流浪者。比賽中，出現(xiàn)了包括張琳?、郜林領到紅牌在內的多次爭議判罰。裁判專家張大樵在接受天津體育頻道采訪時表示拉羅卡對張琳?的犯規(guī)比較嚴重，應該領到一張黃牌，而張琳?打了拉羅卡的臉則屬于嚴重犯規(guī)，主裁判哈桑向他出示紅牌沒有問題。哈桑張冠李戴，對薩巴犯規(guī)的是劉健，卻向郜林出示了紅牌。另外，張大樵認為哈桑在上半場漏判了恒大隊的一個點球。                    </p>                </div>            </div>

參考資料：WilderMinds??