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>