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>