bootsrap栅格系统
一．移动设备优先
在 HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的 meta，用于设置屏
幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。
//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放
声明手机页面
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">二. 布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等 属性的原因，这两种容器类不能相互嵌套。
//固定宽度
<div class="container">
......</div>//100%宽度
<div class="container-fluid">
......</div>栅格系统介绍:
栅格体系以标准每行12列为基准.。通过一系列的行(row) 与列(column)的组合来创建页面布局。
每一行的内容可以通过class类名进行分配在一行每个元素区块站12列的多少,每一行的元素区块最大为12列,超过则进行换行.接下来看一个简单的栅格系统构建例子!
<div class="contaner-fluid">
//100%宽度构建一个栅格区域
<div class="row">//创建一个响应式的行
<div class="col-md-4">我是本行第一个元素块</div>
<div class="col-md-5">我是本行第二个元素块</div>
<div class="col-md-3">我是本行第三个元素块</div>
</div>
</div>这样一个简单的栅格系统(单行)布局就完成了
col-md-表示在中等屏幕下的分布,col-md-4表示中等屏幕(md)下占据单行的4列,单行不得超过12列否则显示在第二行.
下面看一下完整的栅格参数
超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 | None （自动） | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列（column）数 | 12 | |||
最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
槽（gutter）宽 | 30px （每列左右均有 15px） | |||
可嵌套 | 是 | |||
偏移（Offsets） | 是 | |||
列排序 | 是 | |||
在基础的栅格自适应页面上可以完善一下,进行不同尺寸设备显示的适应
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 col-sm-3 col-md-5 a">我是第一行的响应式内容1</div>
<div class="col-lg-3 col-sm-3 col-md-3 a">我是第一行的响应式内容2</div>
<div class="col-lg-2 col-sm-3 col-md-2 a">我是第一行的响应式内容3</div>
<div class="col-lg-2 col-sm-3 col-md-2 a">我是第一行的响应式内容4</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-3 col-md-3 a">我是第二行的响应式内容1</div>
<div class="col-lg-2 col-sm-3 col-md-2 a">我是第二行的响应式内容2</div>
<div class="col-lg-5 col-sm-3 col-md-5 a">我是第二行的响应式内容3</div>
<div class="col-lg-2 col-sm-3 col-md-2 a">我是第二行的响应式内容4</div>
</div>
<div class="row">
<div class="col-lg-5 col-md-4 col-sm-3 col-xs-2 a">我是第三行的响应式内容1</div>
<div class="col-lg-2 col-md-4 col-sm-2 col-xs-2 a">我是第三行的响应式内容2</div>
<div class="col-lg-3 col-md-4 col-sm-2 col-xs-2 a">我是第三行的响应式内容3</div>
<div class="col-lg-2 col-md-4 col-sm-5 col-xs-2 a">我是第三行的响应式内容4</div>
</div>
</div>根据多行可以进行多样化调用类名,实现不同设备进行不同排列,构建完善的页面布局!