This article mainly includes:

■ Page Header
■ Breadcrumbs
■ Button Groups
■ Dropdowns
■ Button Dropdowns
■ Use Button and Dropdowns simulate Select
■ Input Groups
■ Thumbnails
■ Panels
■ Wells

□ Page Header

Page Header is Refers to the top of the page.

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

The above div will run to the top of the page.

□ Breadcrumbs

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> 

Above, the ol part is bread crumbs.

□ Button Groups

consists of several buttons, but looks like one button.

 <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 arranged vertically
btn-group-sm: Button Group arranged horizontally by small buttons

A group of radios, plus the data-toggle="buttons" attribute, click on a radio, the button will appear pressed.

 <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

Click the button to present the drop-down options.

            <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

Combine Button Group and Dropdowns, click a button in the Button Group to display 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>

You can also separate the button and arrow button into 2 buttons.

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

□ Use Button and Dropdowns to simulate the Select

html part.

            <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>

When you click the down arrow and select the Dropdowns option, you need to display the option on the button with the id of pickButton.

Create the site.js file in the js folder.

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

Put site.js to the bottom of the page.???

□ Pagination

            <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>

It can also have digital 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>

□ Thumbnails

When a div is added with the class="thumbnail" attribute, it facilitates the layout of images and text.

            <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>

□ Panels

In a div set as a panel, you can have the title part of the panel and the body part of the panel.

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

□Wells

In the div set to well, this div is highlighted when displayed, which has a strong background effect.

            <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 src="images/19.jpg" alt="19" class="img-thumbnail"/>                    </div>                </div>                  </div>

Reference: WilderMinds

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