導航

.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">//下拉菜單的內容
      ...
    </ul>
  </li>
  ...
</ul>

位置

/*添加 .navbar-fixed-top 類可以讓導航條固定在頂部
*添加 .navbar-fixed-bottom 類可以讓導航條固定在底部
*添加 .navbar-fixed-bottom 類可以讓導航條固定在底部
*通過添加 .navbar-static-top 類即可創建一個與頁面等寬度的導航條，它會隨著頁面向下滾動而消失。
*可包含一個 .container 或 .container-fluid 容器，從而讓導航條居中，并在兩側添加內補（padding）。
*/
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

輪播圖

Bootstrap 輪播（Carousel）插件是一種靈活的響應式的向站點添加滑塊的方式。除此之外，內容也是足夠靈活的，可以是圖像、內嵌框架、視頻或者其他您想要放置的任何類型的內容。

<div id="myCarousel" class="carousel slide">
    <!-- 輪播（Carousel）指標  即分頁器-->
    <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）項目 展示的內容 -->
    <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）導航  前進 后退-->
    <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 縮略圖。大多數站點都需要在網格中布局圖像、視頻、文本等。Bootstrap 通過縮略圖為此提供了一種簡便的方式。使用 Bootstrap 創建縮略圖的步驟如下：

• 在圖像周圍添加帶有 class .thumbnail 的 <a> 標簽。
• 這會添加四個像素的內邊距（padding）和一個灰色的邊框。
• 當鼠標懸停在圖像上時，會動畫顯示出圖像的輪廓。

<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>縮略圖標簽</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>縮略圖標簽</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>縮略圖標簽</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>縮略圖標簽</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>