初学BootStrap---栅格

1.创建HTML 引入BootStrap.min.css

<link rel="stylesheet" href="bootstrap.min.css">

2.在body中的最外层一定要有 container容器

 <div class="container">   </div>

3.在任何页面一行只能分成12列

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

.col-xs<750px      750px=<.col-sm<970     970px=<.col-md<1170px      1270px=<.col-lg

 4.*用   “col-md-offset-4”  属性可以实现偏移

 

 5.嵌套

 6.排序

<div class="row"> 
        <div class="col-md-2 col-md-push-8">.col-md-2</div>
        <div class="col-md-8 col-md-pull-2">.col-md-8</div>
    </div>