13.縮略圖

.thumbnail:圓角的外邊框

.caption標(biāo)題字幕樣式

<div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src="img/img.jpg" class="img-thumbnail">
                <div class="caption">
                    <h3 class="bg-success">Thumbnail label</h3>
                    <p class="text-muted">法國(guó)看了金風(fēng)科技啊所打擊發(fā)覺(jué)所看風(fēng)景啊所看到房間發(fā)送的發(fā)的司法所</p>
                    <p class="text-right"><a href="#" class="btn btn-primary btn-group-xs" role="button">加入購(gòu)物車(chē)</a> <a href="#" class="btn btn-default" role="button">立即購(gòu)買(mǎi)</a></p>
                </div>
            </div>
        </div>
.................省略相同代碼..........
</div>

image.png

13.導(dǎo)航

.nav:標(biāo)簽頁(yè)基類(lèi)（ul加）

.nav-tabs普通標(biāo)簽頁(yè)悬荣，.nav-pills膠囊式標(biāo)簽頁(yè),.nav-stacked縱向（ul加）

.nav-justified標(biāo)簽呈現(xiàn)出同等寬度（ul加）

.active顯示的是哪個(gè)標(biāo)簽頁(yè)內(nèi)容（li加）

<h2>標(biāo)簽頁(yè)</h2>
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#">首頁(yè)</a></li>
        <li><a href="#">信息</a></li>
        <li><a href="#">聯(lián)系我們</a></li>
        <li><a href="#">關(guān)于</a></li>
    </ul>

    <h2>標(biāo)簽頁(yè)</h2>
    <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">首頁(yè)</a></li>
        <li><a href="#">信息</a></li>
        <li><a href="#">聯(lián)系我們</a></li>
        <li><a href="#">關(guān)于</a></li>
    </ul>
    <h2>標(biāo)簽頁(yè)</h2>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">首頁(yè)</a></li>
        <li><a href="#">信息</a></li>
        <li><a href="#">聯(lián)系我們</a></li>
        <li><a href="#">關(guān)于</a></li>
    </ul>

image.png

14.導(dǎo)航條

務(wù)必使用 <nav> 元素，或者核芽，如果使用的是通用的 <div> 元素的話轧简，務(wù)必為導(dǎo)航條設(shè)置 role="navigation" 屬性，這樣能夠讓使用輔助設(shè)備的用戶明確知道這是一個(gè)導(dǎo)航區(qū)域拳芙。

.navbar-brand品牌圖標(biāo)嵌入樣式

.navbar-form皮璧，.navbar-btn，.navbar-text睹限，.navbar-link嵌入表單、按鈕和文本 及鏈接 元素分別所需樣式

.navbar-left 和.navbar-right 工具類(lèi)讓導(dǎo)航鏈接羡疗、表單叨恨、按鈕或文本對(duì)齊

.navbar-fixed-top痒钝，.navbar-fixed-bottom類(lèi)可以讓導(dǎo)航條固定在頂部和底部

.navbar-inverse 顏色反轉(zhuǎn)

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
    <div class="container ">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">首頁(yè)</a></li>
            <li><a href="#">信息</a></li>
            <li><a href="#">聯(lián)系我們</a></li>
            <li><a href="#">關(guān)于</a></li>
            <li><a href="#">信息</a></li>
            <li><a href="#">聯(lián)系我們</a></li>
            <li><a href="#">關(guān)于</a></li>
        </ul>
    </div>
</nav>
.....省略中間內(nèi)容.........
<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
        <div class=" text-center ">@2017 ThoughtWorks歐亞工作室</div>
    </div>
</nav>

image.png

15.分頁(yè)

.pagination分頁(yè)基元素送矩，用于ul

<ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#" >&raquo;</a></li>
    </ul>

image.png

上篇：Bootstrap學(xué)習(xí)筆記（二）