Bootstrap css--Bootstrap 网格系统

Bootstrap css--Bootstrap 网格系统

Bootstrap css就是别人做好的一些类,你只要把相关的类引用到你的HTML元素中即可达到想要的效果（别人做好的效果）



Bootstrap 网格系统
就是将网页进行分块处理，如一行分多少个格（分3列），每个元素占用多少个格(如占用2列)这样的概念。
1.Bootstrap 3 是移动设备优先的
2.Bootstrap将网页分成12列，
3.超小设备（手机，小于 768px）(Class 前缀:col-xs-)
4.小型设备（平板电脑，768px 起）(Class 前缀:col-sm-)
5.中型设备（台式电脑，992px 起）(Class 前缀:col-md-)
6.大型设备（大台式电脑，1200px 起）(Class 前缀:col-lg-)


响应式的列重置（就是按检测到的屏幕大小选择占用不同的列数）

<div class="col-xs-6 col-sm-3"> //如果是超小设备占用6列，如果是小型设备占用3列

偏移列
1.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。
2.col-xs/sm/md/lg-offset-

<div class="col-xs-6 col-md-offset-3">

嵌套列
1.为了在内容中嵌套默认的网格，请添加一个新的 .row
2.里面的列也是按12份进行分列

<div class="row">
    <div class="col-md-3">
        <h4>第一列</h4>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </p>
    </div>
    <div class="col-md-9" ">
        <div class="row">
            <div class="col-md-6">
                <p>
                    Consectetur art party Tonx culpa semiotics. Pinterest
                </p>
            </div>
            <div class="col-md-6">
                <p>
                     sed do eiusmod tempor incididunt ut labore et dolore magna
                </p>
            </div>
        </div>
   </div>
</div>

列排序
1.col-xs/sm/md/lg-push-(往右推,以最左边为参考点)
2.col-xs/sm/md/lg-pull-(往左拉,以最左边为参考点)
3. 范围是从 1 到 11

<div class="col-md-push-8">
         我在左边
</div>
<div class="col-md-pull-4">
         我在右边
</div>

参考原文： http://www.runoob.com/try/try2.php?filename=bootstrap3-gridsys-nestingcolumns