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>

响应式布局:
响应式布局需要在head处添加如下语句：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在css中添加如下内容 可以分别定制不同屏幕的显示样式：

/* 大屏幕 ：大于等于1200px*/
@media (min-width: 1200px) { ... }

/*默认*/
@media (min-width: 980px){...}

/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
 
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }

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

以下这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏:
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>