BootaStrap到底是個什麼玩意？

話不多說官網獻上：bootStrap官網

bootStrap：一種前端框架（將方法、屬性等進行封裝，真正走上了複製、貼上的陽光大道）

1、開始之前的準備

  1、引入bootStrap.css，敢問不引入怎麼用？！
  2、引入jQuery，因為bootStrap的js都依賴於jQuery。
  3、引入bootStrap自己的js。
 （4、如果需要往往還需要引入UI提供的字型圖示）

2、柵欄

3、Progress

  <div class="container">
<div class="row">
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0"
            aria-valuemax="100" style="width: 40%">
            <span class="sr-only">40% Complete (success)</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0"
            aria-valuemax="100" style="width: 20%">
            <span class="sr-only">20% Complete</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0"
            aria-valuemax="100" style="width: 60%">
            <span class="sr-only">60% Complete (warning)</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0"
            aria-valuemax="100" style="width: 80%">
            <span class="sr-only">80% Complete (danger)</span>
        </div>
    </div>
</div>
 

別瞎想，程式碼直接複製貼上

4、輪播圖大將！

  `<div class="container">
<div class="row">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <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>
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="../day02/weijinsuo/images/slide_01_640x340.jpg" alt="...">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="../day02/weijinsuo/images/slide_03_2000x410.jpg" alt="...">
                <div class="carousel-caption">
                </div>
            </div>
            <div class="item">
                <img src="../day02/weijinsuo/images/slide_04_2000x410.jpg" alt="...">
                <div class="carousel-caption">
                </div>
            </div>
        </div>
        <!-- Controls -->
        <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>
</div>
 

輪播圖 幾秒解決，如果輪播數量不夠可以新增，輪播速度慢可以加速！

結尾！！！

  幾乎每一個功能實現都需要container和row進行包裹，勿忘！
  `<div class="container">
      <div class="row"></div>
   </div>`