Bootstrap开发框架的学习与应用

---

前言

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。

---

一、Bootstrap是什么？

Bootstrap

一个做网页的框架（目前最流行的WEB前端框架），就是说你只需要写HTML标签调用它的类你就可以很快速的做一个高大上的网页，你不用担心兼容问题，提供了很多样式供你选择！

简单来说，比如你需要做一个网站的导航对吧，你自己写的话你需要写很多代码，但是如果你使用bootstrap框架来写的话，只需要写好HTML标签然后调用类名就可以了！

Bootstrap栅格系统概念

Bootstrap将页面布局划分为等高的比例，然后通过列数的定义来模块化页面布局。
Bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同（container可以理解为一个页面的版心）我们再把container划分为12等份；
为了能让里面的内容自适应屏幕的宽度（当屏幕变小列就减少）
相关代码如下：

<div class="container">
     <div class="row">
  <!-- 加一个  <div class="row">让里面的内容没有padding值-->
          <header class="col-md-2">/*第一列*/
          </header>
          <article class="col-md-7">/*第二列*/
          </article>
          <aside class="col-sm-3">/*第三列*/
          </aside>
     </div>
</div>

原理：Bootstrap删除系统用于通过一系列的行与列的组合来创建页面布局的，内容就可以放在创建好的布局中。

在平均分列的时候，需要给列添加前缀：