本篇主要包括：

■? 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>超級(jí)球迷</h1>                <p class="text-warning">關(guān)于我們</p>            </div>

以上div會(huì)跑到頁面最頂部。

□ Breadcrumbs

面包屑。

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

以上,ol部分為面包屑。

□ Button Groups

由幾個(gè)按鈕組成，但看上去像一個(gè)按鈕。

 <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"屬性，點(diǎn)擊某個(gè)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

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

            <div class="row">                <div class="dropdown">                    <button class="btn btn-sm btn-success" data-toggle="dropdown">點(diǎn)我</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結(jié)合起來，點(diǎn)擊Button Group中的某個(gè)按鈕，呈現(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個(gè)按鈕。

<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">請(qǐng)選擇...</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>

當(dāng)點(diǎn)擊向下箭頭，選擇Dropdowns選項(xiàng)，需要把選項(xiàng)顯示到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

當(dāng)把一個(gè)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>                                當(dāng)比賽進(jìn)行到第6分鐘時(shí)，郜林近距離攻門被托萊奇封堵，在郜林示意托萊奇有手球時(shí)，迪亞曼蒂在球門另一側(cè)的搶射被對(duì)手封堵?lián)醭觥Ｖ鞑门泄]有理會(huì)郜林的投訴，慢鏡頭顯示托萊奇確實(shí)有手球。                            </p>                        </div>                    </div>                </div>                      </div>

□ Panels

在設(shè)置為panel的div中，可以有panel的標(biāo)題部分，panel的正文部分。

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

□ Wells

在設(shè)置為well的div中，這塊div在顯示的時(shí)候重點(diǎn)著色，有很強(qiáng)的背景效果。

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

參考資料：WilderMinds??