文档章节

Bootstrap响应式前端框架笔记一——强大的栅格布局

珲少
 珲少
发布于 2016/12/01 19:46
字数 1884
阅读 598
收藏 1

Bootstrap响应式前端框架笔记一——强大的栅格布局

一、Bootstrap?

    Bootstrap是一款HTML,Css和JavaScript开发框架,其也支持开发者进行自定义构建,开发者也可以只打包自己需要的功能模块使用。Bootstrap的中文网址如下:

http://v3.bootcss.com/

    Bootstrap是一款响应式的编程框架,所谓响应式,是指在不同屏幕尺寸的设备上,使用Bootstrap开发的项目可以自动进行布局调整适配。其响应式布局的核心是栅格系统,栅格系统将浏览器分隔成一定数量的行和列。默认栅格系统将浏览器窗口分为12列,开发者可以为元素设置其在对应设备尺寸中所占的列数。

二、均分与尺寸适配

    Bootstrap将浏览器尺寸分为4个等级,分别为xs,sm,md和lg。xs是指浏览器宽度小于768时的状态,一般对应移动手机设备,sm指浏览器宽度大于768且小于992时的状态,其一般对应平板设备,md指浏览器宽度大于768且小于1200时的状态,一般对应正常的个人电脑,lg是指浏览器宽度大于1200时的状态。如下表所示:

在开发者使用栅格类对标签进行定义的时候,需要注意,如果只设置了高等级的栅格类,则在此等级以下的浏览器尺寸都将采用竖直堆叠,此等级及以上等级的浏览器尺寸中都将水平排列。例如,如果配置了两个标签的类都为为col-md-6,则在992以下尺寸的的浏览器中竖直堆叠布局,在992即以上尺寸的浏览器中都将水平均分一行。

    栅格系统的一行中被分成了12列,默认一行中也最多可以添加12个列,如下代码演示了竖直堆叠布局与水平布局在栅格系统中的应用:

	<body class="container">
		<p>将md以上尺寸窗口宽度分为12份,md一下尺寸的窗口将竖直堆叠排列</p>
		<div class="row">
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
		</div>
		<hr />
		<p>将md以上尺寸的窗口宽度进行2等分,md一下尺寸的窗口将竖直堆叠排列</p>
		<div class="row">
			<div class="col-md-6">.col-md-6</div>
			<div class="col-md-6">.col-md-6</div>
		</div>
		<hr />
		<p>将md以上尺寸的窗口宽度进行2:1等分,md一下尺寸的窗口将竖直堆叠排列</p>
		<div class="row">
			<div class="col-md-8">.col-md-8</div>
			<div class="col-md-4">.col-md-4</div>
		</div>
		<hr />
		<p>将xs以上尺寸的窗口宽度进行6等分,xs为最小等级</p>
		<div class="row">
			<div class="col-xs-2">.col-xs-2</div>
			<div class="col-xs-2">.col-xs-2</div>
			<div class="col-xs-2">.col-xs-2</div>
			<div class="col-xs-2">.col-xs-2</div>
			<div class="col-xs-2">.col-xs-2</div>
			<div class="col-xs-2">.col-xs-2</div>
		</div>
	</body>

上面代码在窗口尺寸大于等于992时的效果如下所示:

将浏览器窗口缩小,可以看到,除了第4行可以继续保持6等分外,其它行等变成了竖直堆叠布局:

如果需要对移动设备和桌面是被进行布局的区别化,可以为某个标签配置多套不同等级下的栅格类,示例如下:

		<p>在md及以上尺寸窗口中进行4等分,在md以下尺寸sm以上尺寸窗口进行2等分布局,在sm以下储存窗口进行竖直堆叠布局</p>
		<div class="row">
			<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
			<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
			<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
			<div class="col-md-3 col-sm-6">.col-md-3 .col-sm-6</div>
		</div>

需要注意,默认Bootstrap中一行最多可以包含12列,如果列数超出12,将另起一行进行布局,示例如下:

		<p>Bootstrap最多一行可以分配12列,超出将另起一行,例如下面三个div,宽度分别为8,3,4,第3个div将另起一行布局</p>
		<div class="row">
			<div class="col-md-8">.col-md-8</div>
			<div class="col-md-3">.col-md-3</div>
			<div class="col-md-4 ">.col-md-4</div>
		</div>

效果如下图:

三、列的调整

    很多场景下,每列元素的高度并不一定均等,在列高度不均等情况下的栅格布局,很可能会出现开发者意想不到的布局差错,示例代码如下:

		<p>列高度不均等造成的布局错乱</p>
		<div class="row">
			<div class="col-md-6">.col-md-4 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
			<div class="col-md-6">.col-md-4</div>
			<div class="col-md-4 ">.col-md-4</div>
		</div>

上面代码的栅格布局效果如下:

如图所示,开发者本意是将第3个div另起一行进行布局,由于前两个div高度的不均等,导致第3个div直接布局在了第2个div下面,可以通过visible-md-block等类来进行强制另起一行,示例如下:


		<p>解决列高度不均等造成的布局错乱</p>
		<div class="row">
			<div class="col-md-6">.col-md-4 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
			<div class="col-md-6">.col-md-4</div>
			<div class="clearfix visible-md-block"></div>
			<div class="col-md-4 ">.col-md-4</div>
		</div>

效果如下:

在使用栅格布局时,开发者也不需要将每一行中的12列都占满,可以通过列偏移设置来进行列的定位,示例如下:

		<p>进行列偏移操作</p>
		<p>将占1/3行的一列向右便宜1/3行 使其固定在中间</p>
		<div class="row">
			<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
		</div>
		<div class="row">
			<div class="col-md-2">.col-md-2</div>
			<div class="col-md-2 col-md-offset-8">.col-md-2 .col-md-offset-8</div>
		</div>

效果如下:

Bootstrap的栅格系统也支持进行列的嵌套,需要注意,在嵌套中也不可以超过12列,示例如下:

		<p>进行列的嵌套</p>
		<div class="row">
			<div class="col-md-8">.col-md-8
				<div class="row">
					<div class="col-md-6">.col-md-6</div>
					<div class="col-md-6">.col-md-6</div>
				</div>
			</div>
		</div>

效果如下图所示:

.col-md-push-* 和 .col-md-pull-*两个类可以方便的实现对列的移动,示例如下:

		<p>进行列的移动</p>
		<div class="row">
			<div class="col-md-2 col-md-push-8">.col-md-8 向右移动8格</div>
			<div class="col-md-2 col-md-pull-2">.col-md-2 向左移动2格</div>
		</div>

效果如下:

    另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。

http://zyhshao.github.io/bootStrapDemo/gridSystem.html

前端学习新人,有志同道合的朋友,欢迎交流与指导,QQ群:541458536

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 857
博文 384
码字总数 452377
作品 0
上海
iOS工程师
私信 提问
十大前端开发框架(上)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:site point。欢迎加入翻译组。 编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家。上半部...

伯乐在线
2013/07/16
0
0
JavaWeb05-HTML篇笔记(二)

1.3 案例二:使用BootStrap设计一个响应式的页面: 1.3.1需求: 设计一套页面能够通用在不同的设备上,在手机,pad上,电脑上都可以浏览这个网页,而不影响正常的浏览的方式. 1.3.2分析: 1.3.2....

我是小谷粒
05/10
0
0
从零开始学 Web 之 移动Web(七)Bootstrap

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
08/14
0
0
CSS 栅格系统原理分析

众所周知,现在前端有很多类似于bootstrap,foundation这样优秀的UI框架,它们都提供了自己的一套响应式布局方案,即栅格系统。用过的人都知道只要给页面的元素添加其栅格系统指定的类名,就...

爱coding的husky
2017/11/03
0
0
移动web开发———第三天

一、响应式开发 1、响应式布局, 就是一个网站能够兼容多个终端。 2、响应式开发的原理 CSS3中的Media Query(媒介查询,and之后一定要加空格@media screen and (min-width: 768px) and (max...

我是小谷粒
02/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

微服务分布式事务实现

https://www.processon.com/view/link/5b2144d7e4b001a14d3d2d30

WALK_MAN
今天
2
0
《大漠烟尘》读书笔记及读后感文章3700字

《大漠烟尘》读书笔记及读后感文章3700字: 在这个浮躁的社会里,你有多久没有好好读完一本书了? 我们总觉得自己和别人不一样,所以当看到别人身上的问题时,很少有“反求诸己”,反思自己。...

原创小博客
今天
4
0
大数据教程(9.5)用MR实现sql中的jion逻辑

上一篇博客讲解了使用jar -jar的方式来运行提交MR程序,以及通过修改YarnRunner的源码来实现MR的windows开发环境提交到集群的方式。本篇博主将分享sql中常见的join操作。 一、需求 订单数据表...

em_aaron
今天
3
0
十万个为什么之什么是resultful规范

起源 越来越多的人开始意识到,网站即软件,而且是一种新型的软件。这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency)、高并发等特点...

尾生
今天
3
0
Terraform配置文件(Terraform configuration)

Terraform配置文件 翻译自Terraform Configuration Terraform用文本文件来描述设备、设置变量。这些文件被称为Terraform配置文件,以.tf结尾。这一部分将讲述Terraform配置文件的加载与格式。...

buddie
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部