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 (自动)750px970px1170px
类前缀.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>

根据多行可以进行多样化调用类名,实现不同设备进行不同排列,构建完善的页面布局!

本博客所有文章如无特别注明均为原创。作者:十月梦想复制或转载请以超链接形式注明转自 十月梦想博客
原文地址《bootsrap栅格系统
分享到:更多

相关推荐

未登录,暂时无法评论和查看评论!

点击这里给我发消息点击此处联系博主!