Bootstrap系列1

Bootstrap:

是Twitter推出的一個開源的用於前端開發的工具包。它基於jQuery,使用前請先引入jQuery.

一、導航：在移動設備上可摺疊（實現了響應式）

1.響應式導航條依賴摺疊（collapse）插件

<span style="font-family:Microsoft YaHei;"><!--摺疊部分（當瀏覽器小於一定大小時纔會出現）-->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
   <!--摺疊部分 end--></span>

2.添加 .navbar-fixed-top 類可以讓導航條固定在頂部（會擋住下面的內容，默認是50px（body加上pading-top））

3.可以包含一個 .container 或 .container-fluid 容器，從而讓導航條居中或者自適應顯示。

4.添加  .navbar-inverse 類可以改變導航條的外觀，變成黑底展示。

二、下拉菜單

class=”drapdowm-toggle”data-toggle=”dropdown”

( 可通過添加 <li class=”divider”></li>  添加分割線)

<span style="font-family:Microsoft YaHei;"><li class="dropdown">
    <span style="white-space: pre;">	</span><a href="#" class="dropdown-toggle" data-toggle="dropdown">特點 <span class="caret"></span></a>
    <span style="white-space: pre;">	</span><ul class="dropdown-menu" role="menu">
        <span style="white-space: pre;">	</span><li><a href="#feature-tab" data-tab="tab-chrome">Chrome</a></li>
        <span style="white-space: pre;">	</span><li><a href="#feature-tab" data-tab="tab-firefox">Firefox</a></li>
        <span style="white-space: pre;">	</span><li><a href="#feature-tab" data-tab="tab-safari">Safari</a></li>
        <span style="white-space: pre;">	</span><li><a href="#feature-tab" data-tab="tab-opera">Opera</a></li>
        <span style="white-space: pre;">	</span><li><a href="#feature-tab" data-tab="tab-ie">IE</a></li>
    <span style="white-space: pre;">	</span></ul>
     </li></span>

注意：可以僅僅通過data屬性API就能使用所有的Bootstrap插件，無需寫一行Javascript代碼。這是Bootstrap中的一等API，也應該是你的首選方式。

三、滾動圖片 Carousel

a) Carousel是一個用於輪播內容的組件，也就是我們經常用到的滾動廣告，或者滾動圖片

<span style="font-family:Microsoft YaHei;"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- 小點 -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- 滑動的圖片 -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...圖片的文字
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- 左右控制按鈕-->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a></div></span>

四、三欄佈局

注：col-md 總共是12，以後的比例分割都可用這個

<span style="font-family:Microsoft YaHei;"><div class="row">
<span style="white-space:pre">	</span><div class="col-md-4">
<span style="white-space:pre">	</span><div class="col-md-4">
<span style="white-space:pre">	</span><div class="col-md-4">
</div></span>