先写上cnd加速得到的

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

接着写

<  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>