Bootstrap是目前主流的css架构，不仅方便灵活，更做到了一套开发适应多终端的功能（仿似Java呀）。

重点：1.bootstrap编写是部分css要根据屏幕的大小进行调试和编写；

/* 小屏幕（平板，大于等于768px） */
@media (min-width: 768px) {
    .tab-h2 {
        font-size: 26px;
    }
    .tab-p {
        font-size: 16px;
    }
    .text h3 {
        font-size: 22px;
    }
    .text p {
        font-size: 15px;
    }
    .tab2-text {
        float: left;
    }
    .tab2-img {
        float: right;
    }
    .jumbotron h1 {
        font-size: 30px;
    }
    .jumbotron h4 {
        font-size: 16px;
    }
    .info-content h4 {
        font-size: 16px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    #about h3 {
        font-size: 19px;
    }
    #about p {
        font-size: 14px;
    }
}

/* 中等屏幕（桌面显示器，大于等于992px） */
@media (min-width: 992px) {
    .tab-h2 {
        font-size: 28px;
    }
    .tab-p {
        font-size: 17px;
    }
    .text h3 {
        font-size: 24px;
    }
    .text p {
        font-size: 16px;
    }
    .jumbotron h1 {
        font-size: 33px;
    }
    .jumbotron h4 {
        font-size: 17px;
    }
    .info-content h4 {
        font-size: 18px;
    }
    #about h3 {
        font-size: 20px;
    }
    #about p {
        font-size: 15px;
    }
}

/* 大屏幕（大桌面显示器，大于等于1200px） */
@media (min-width: 1200px) {
    .tab-h2 {
        font-size: 30px;
    }
    .tab-p {
        font-size: 18px;
    }
    .text h3 {
        font-size: 26px;
    }
    .text p {
        font-size: 18px;
    }
    .jumbotron h1 {
        font-size: 36px;
    }
    .jumbotron h4 {
        font-size: 18px;
    }
    .info-content h4 {
        font-size: 20px;
    }
    #about h3 {
        font-size: 22px;
    }
    #about p {
        font-size: 16px;
    }
}

           2.bootstrap给出了不同大小的尺寸；

  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>

       3.bootstrap还给出了很多微章或者多种导航；

      <ul class="nav nav-pills">
   <li class="active"><a href="#">首页 <span class="badge">42</span></a></li>
   <li><a href="#">简介</a></li>
   <li><a href="#">消息 <span class="badge">3</span></a></li>
   </ul>

以上都是个人在使用Boostrap及查阅资料整理后的一些心得，并仿照资料及视频做了一个小案例，http://www.9116shop.com；