bootstrap网格系统

bootstrap网格布局

引入bootstrap.css

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 

引入bootstrap.js

<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

响应式布局:<div class="clearfix visible-xs"></div>

css样式:
[class*=“col-”]
选择所有类名中含有"col-“的元素，col-也可以是col-6等形式。
[class^=“col-”]
选择所有类名中以"col-“开头的元素。
[class$=”-col”]
选择所有类名中以"-col"结尾的元素。
列偏移:

col-md-offset-3//表示向右移动3个格子

嵌套列:

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

列嵌套:

<div class="containner">
        <p>列排序前</p>
        <div class="row">
            <div class="col-md-4 " style="background-color: pink;">左侧</div>
            <div class="col-md-8 " style="background-color: green;">右侧</div>
        </div>
        <p>列排序后</p>
        <div class="row">
            <div class="col-md-4 col-md-push-8" style="background-color: pink;">左侧</div>
            <div class="col-md-8 col-md-pull-4" style="background-color: green;">右侧</div>
        </div>
    </div>