Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

所有的主流浏览器都支持 Bootstrap。

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

           bootstrap
        利用栅格系统（网格系统）来进行布局 

       （1）栅格系统 一般都是写在 .container 内 

       （2） 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距 
       （padding）

       （3）内容应该放置在列内，且唯有列可以是行的直接子元素。

        container-fluid 满屏宽 
        container 规定了在不同屏幕分辨率下的最佳内容区域 

        <div class="container">
             <div class="row">
                 <div class="col-md-3">
                     <table></table>
                 </div>
             </div>
         </div>

网格选项：

网格系统四种基本用法：

1.列组合
列组合简单理解就是更改数字来合并列 (原则：列总和数不能超过12)

   <div class="container">
        <h1>1.列组合</h1>
        <div class="row">
            <div class="col-md-3">3</div>
            <div class="col-md-1">1</div>
            <div class="col-md-8">8</div>
        </div>

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

        <div class="row">
            <div class="col-md-6">6</div>
            <div class="col-md-6">6</div>
        </div>
    </div>

2.列偏移
设置列偏移，让中间保持空隙，通过 col-md-offset- 来实现

    <div class="container">
        <h1>2.列偏移</h1>
        <div class="row">
            <div class="col-md-4">4</div>
            <div class="col-md-2  col-md-offset-4">列向右移动4列的间距</div>
            <div class="col-md-2">2</div>
        </div>

        <div class="row">
            <div class="col-md-8">8</div>
            <div class="col-md-3  col-md-offset-1">列向右移动1列的间距</div>
        </div>
    </div>

3.排序
可以把两个列交换位置，push向右移动，pull向左移动

 <div class="container">
        <h1>3.排序</h1>
        <div class="row">
            <div class="col-md-3">3</div>
            <div class="col-md-3">3</div>
            <div class="col-md-4 col-md-push-2">4</div>
        </div>

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

        <div class="row">
            <div class="col-md-3 col-md-push-9">3</div>
            <div class="col-md-9 col-md-pull-3">9</div>
        </div>
    </div>

4.列嵌套
可以嵌套 嵌满也是12列

  <div class="container">
        <h1>4.列嵌套</h1>
        <div class="row">
            <div class="col-md-9">
                <div class="col-md-8">1-8</div>
                <div class="col-md-4">9-12</div>
            </div>
            <div class="col-md-3">3</div>
        </div>
    </div>