bootstrap——简单了解栅格布局

什么是bootstrap?

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 [1] 它由Twitter的设计师MarkOtto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的BreakingNews都使用了该项目。 [2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

栅格布局

    Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。
    网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
Bootstrap里面把设备窗口大小分为基本的四个档：
超小型设备（XS：宽768px以下）；
小型设备 （SM：768～992px）；
中型设备 （MD：992～1200px）；
大型设备 （LG：1200px以上）。
通过以下几个类去控制栅格的大小：col-xs-，col-sm-，col-md-，col-lg-。

例如：现在有一个左侧边栏和右内容区构成的页面，侧边栏宽占整个页面的3/12，内容区宽占剩下的9/12，那么可以如下去应用栅格系统:

<div class="container">
        <div class="row">
            <div class="col-xs-3">3</div>
            <div class="col-xs-9">9</div>
        </div>
    </div>

    这是假设无论是在什么设备上，你都想让页面的侧边栏占3份，内容区占9份。这里为什么要写xs而不是其他的几个尺寸，是因为Bootstrap的栅格系统或是自适应的功能是以移动设备优先，是向上兼容的。 就是说如果任何设备上这一块内容宽所占的比例都是一样的情况下，就用xs，它可以向上兼容。