導(dǎo)航

.nav-tabs

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

添加下拉菜單

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">//dropdown 添加下拉菜單
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">//下拉菜單的內(nèi)容
      ...
    </ul>
  </li>
  ...
</ul>

位置

/*添加 .navbar-fixed-top 類(lèi)可以讓導(dǎo)航條固定在頂部
*添加 .navbar-fixed-bottom 類(lèi)可以讓導(dǎo)航條固定在底部
*添加 .navbar-fixed-bottom 類(lèi)可以讓導(dǎo)航條固定在底部
*通過(guò)添加 .navbar-static-top 類(lèi)即可創(chuàng)建一個(gè)與頁(yè)面等寬度的導(dǎo)航條龄糊，它會(huì)隨著頁(yè)面向下滾動(dòng)而消失。
*可包含一個(gè) .container 或 .container-fluid 容器屉符，從而讓導(dǎo)航條居中奇徒，并在兩側(cè)添加內(nèi)補(bǔ)（padding）。
*/
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

輪播圖

Bootstrap 輪播（Carousel）插件是一種靈活的響應(yīng)式的向站點(diǎn)添加滑塊的方式摊沉。除此之外，內(nèi)容也是足夠靈活的痒给，可以是圖像说墨、內(nèi)嵌框架、視頻或者其他您想要放置的任何類(lèi)型的內(nèi)容苍柏。

<div id="myCarousel" class="carousel slide">
    <!-- 輪播（Carousel）指標(biāo)  即分頁(yè)器-->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>   
    <!-- 輪播（Carousel）項(xiàng)目 展示的內(nèi)容 -->
    <div class="carousel-inner">
        <div class="item active">
            ![](/wp-content/uploads/2014/07/slide1.png)
        </div>
        <div class="item">
            ![](/wp-content/uploads/2014/07/slide2.png)
        </div>
        <div class="item">
            ![](/wp-content/uploads/2014/07/slide3.png)
        </div>
    </div>
    <!-- 輪播（Carousel）導(dǎo)航  前進(jìn) 后退-->
    <a class="carousel-control left" href="#myCarousel" 
        data-slide="prev">&lsaquo;
    </a>
    <a class="carousel-control right" href="#myCarousel" 
        data-slide="next">&rsaquo;
    </a>
</div>

縮略圖

本章將講解 Bootstrap 縮略圖尼斧。大多數(shù)站點(diǎn)都需要在網(wǎng)格中布局圖像、視頻试吁、文本等棺棵。Bootstrap 通過(guò)縮略圖為此提供了一種簡(jiǎn)便的方式。使用 Bootstrap 創(chuàng)建縮略圖的步驟如下：

• 在圖像周?chē)砑訋в?class .thumbnail 的 <a> 標(biāo)簽熄捍。
• 這會(huì)添加四個(gè)像素的內(nèi)邊距（padding）和一個(gè)灰色的邊框烛恤。
• 當(dāng)鼠標(biāo)懸停在圖像上時(shí)，會(huì)動(dòng)畫(huà)顯示出圖像的輪廓治唤。

<div class="row">
    <div class="col-sm-6 col-md-3">
         <div class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg" 
             alt="通用的占位符縮略圖">
            <div class="caption">
                <h3>縮略圖標(biāo)簽</h3>
                <p>一些示例文本棒动。一些示例文本。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按鈕
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按鈕
                    </a>
                </p>
            </div>
         </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg" 
            alt="通用的占位符縮略圖">
            <div class="caption">
                <h3>縮略圖標(biāo)簽</h3>
                <p>一些示例文本宾添。一些示例文本。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按鈕
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按鈕
                    </a>
                </p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg" 
            alt="通用的占位符縮略圖">
            <div class="caption">
                <h3>縮略圖標(biāo)簽</h3>
                <p>一些示例文本柜裸。一些示例文本缕陕。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按鈕
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按鈕
                    </a>
                </p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg" 
            alt="通用的占位符縮略圖">
            <div class="caption">
                <h3>縮略圖標(biāo)簽</h3>
                <p>一些示例文本。一些示例文本疙挺。</p>
                <p>
                    <a href="#" class="btn btn-primary" role="button">
                        按鈕
                    </a> 
                    <a href="#" class="btn btn-default" role="button">
                        按鈕
                    </a>
                </p>
            </div>
        </div>
    </div>
</div>