先寫上cnd加速得到的

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">

接著寫

<meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
 

千萬記得用到bootstrap的東西時一定是在<div class="container"></div>標籤內

柵格系統的寫法，一行裡分兩列，其中分別佔寬度的8份和4份總12份，1行有12份

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

柵格系統可以實現水平居中，讓左右兩邊等同份數且不放內容時

   <div class="container">
       <div class="row"><!--水平居中-->
       <div class="col-md-1">
       </div>
       <div class="col-md-10">
           <h1>bootstrap實戰課程等你來戰</h1>
           <p> 本套課程適用於：1.WEB開發人員；2.網站維護人員、管理人員
           <br/><br/>
            培訓技能的目標：使用bootstrap框架快速構建響應式網頁，顛覆傳統WEB前端！</p>
       <img src="images/php.jpg" class="img-responsive" alt="php" /><!--響應圖片-->
       </div>
           <div class="col-md-1">
           </div>
       </div>
    </div>
 

寫響應式導航欄注意 data-target繫結

 <!--導航-->
   <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <!--小螢幕導航按鈕和logo--><!--響應式導航欄-->
       <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><!--將圖示和導航欄同一個類連線起來，注意有一個點.navbar-collapse-->
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="index.html" class="navbar-brand">麥子學院</a>
       </div>
            <!--小螢幕導航按鈕和logo-->

              <!--導航-->
              <div class="navbar-collapse collapse" ><!--響應式導航欄-->
                  <ul class="nav navbar-nav navbar-right">
                      <li><a href="#home">首頁</a></li>
                      <li><a href="#bbs">論壇</a></li>
                      <li><a href="#html5">前端開發</a></li>
                      <li><a href="#course">最新課程</a></li>
                      <li><a href="#app">移動APP</a></li>
                      <li><a href="#contact">聯絡我們</a></li>
                  </ul>
              </div>
      </div>
</nav>
 

還要注意圖片也要做到響應式class=“img-responsive”

<img src="images/php.jpg" class="img-responsive" alt="php" /><!--響應圖片-->

當需要做到點選整個東西實現跳轉頁面的時候，用a標籤包裹內容

         <a href="http://www.maiziedu.com" target="_blank">
            <img src="images/a.png" class="img-responsive" alt="" />
            <h3>Android開發</h3>
            <p>Android開發技術交流、問題求助、實戰案例分享</p>
         </a>

當點選按鈕的時候直接跳轉頁面可以使用下面程式碼

   <a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
     加入學習
   </a>

當你縮小瀏覽器無法看到某個區域自適應出全部內容，你可能是在/*該區域最初的div設定了絕對高度，即你在例如#home、#contact寫了height:500px;這種*/

功能實現：當你點選導航欄的標題時，點選哪個緩慢移動到頁面對應部分，導航欄並沒有覆蓋它70px；可以利用該外掛1.jquery.singlePageNav.min.js

加入外掛後可以緩慢移動到對應內容，但導航欄覆蓋了高度

寫上偏移量就可以完美解決

  <script src="js/jquery.singlePageNav.min.js"></script>
        <script>
            $(function(){
                $('.nav').singlePageNav({
                   offset:70//記得這裡不要寫；
                });
            })
        </script>

當小螢幕的時候，點選選單移動到對應內容並自己關閉選單

html
 <div class="navbar-collapse collapse">
                    <!--響應式導航欄-->
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#home">
                                首頁
                            </a>
                        </li>
                        <li>
                            <a href="#bbs">
                                論壇
                            </a>
                        </li>
                        </div>


js
  <script src="js/jquery.singlePageNav.min.js"></script>
        <script>
        /*導航跳轉外掛*/
            $(function(){
                $('.nav').singlePageNav({
                   offset:70
                });
                /*小螢幕點選關閉選單*/
                $('.navbar-collapse a').click(function() {
                  $('.navbar-collapse').collapse('hide');//或   $('.navbar-collapse').hide();，不過第一種是向上摺疊隱藏
                });
            })
        </script>

匯入動畫，可以單獨使用動畫關鍵看class=“某某 wow 動畫名”

  1、  <link href="css/animate.css" rel="stylesheet">  </link>
    2、  <script src="js/wow.min.js"></script>
    3、   <div class="row wow bounce" data-wow-duration="1s" data-wow-delay="1s">//wow bounce看http://daneden.github.io/animate.css/
          $(function(){
                $('.nav').singlePageNav({
                   offset:70
                });
                /*小螢幕點選關閉選單*/
                $('.navbar-collapse a').click(function() {
                  $('.navbar-collapse').collapse('hide');
                });
            4、    new WOW().init();//新增這幾個就home區域就會出現動畫
            })
        </script>