Bootstrap 3 简介

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web。

Bootstrap 与 jQuery UI 类似，也是一个 web 前端框架，但是他两没有任何关系，只不过都依赖于 jQuery 核心库。

jQuery UI 框架确切地说，只包含了一堆零散的 UI 控件供你使用，它并没有从web建站的角度提供更进一步的帮助。

比如，web 建站时，需要设计网站LOGO，顶层导航栏，面包屑导航栏，内容分为几列几行，版权页脚等以及位置布局。

而 Bootstrap 框架，除了包含了一堆 UI 控件，还从 web 建站的角度提为你供了一些相应的 UI 控件，免除你自己再行设计。

同时，你也可以根据自己的要求，自行修改  Bootstrap 提供的默认样式。

Bootstrap 的官网提供了非常好的学习示例，非常容易学习，其中介绍了框架的 Grid 划分，CSS 属性介绍，JS的方法介绍。

我个人感觉，学习一个新的前端框架，有时候，直接看官网，可能一头雾水，不知道从哪儿下手？

那么，这时候可先简略参考下相应的编程书籍，了解下大概，千万不要花费大力气一页一页看，

由于前端框架变化实在太快了，版本之间的差异，有时候，是天翻地覆的，比如 AngularJS 1 和 AngularJS 2，

再比如 Bootstrap 3 与  Bootstrap 2，而编程书籍的知识点都比较陈旧，所以，要把主要的经历放到官网上的例子上，

学习的时候，把其中的例子代码 copy 出来运行下，手动修改下各种参数，看看效果。

一般情况下，官网都提供了最新版本的代码示例，以下是  Bootstrap 的官网，http://getbootstrap.com/

Bootstrap 4 已经有 alpha 版本放出来了，赶脚真快......，学习永不止步 〉〉〉

Grid 列的单位

xs (phones)

sm (tablets)

md (desktops)

lg (larger desktops)

<div class="container">
　　<div class="row">
  　　<div class="col-xs-4">.col-xs-4</div>
  　　<div class="col-xs-4">.col-xs-4</div>
  　　<div class="col-xs-4">.col-xs-4</div>
　　</div>

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

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

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

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