文档章节

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

珲少
 珲少
发布于 2016/12/01 19:46
字数 1884
阅读 550
收藏 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

© 著作权归作者所有

共有 人打赏支持
珲少

珲少

粉丝 848
博文 383
码字总数 450028
作品 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
20个响应式的CSS和网格框架

原文出处:云瑞 最近响应式CSS框架非常流行,已经在一系列的桌面和移动浏览器有不同程度的成功,本文介绍20个响应式的CSS和网格框架,可以用于提高开发和设计效率,是您最佳选择。(温馨提示:...

云瑞
2015/09/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 小心着凉 @红薯

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:5.33起,其声呜呜然,如怨如慕,如泣如诉。余音袅袅,不绝如缕。分享Arch Enemy的单曲《Bridge Of Destiny (2009)》 《Bridge Of...

小小编辑
30分钟前
34
0
what f,,

anlve
今天
2
0
初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
今天
11
0
现场看路演了!

HiBlock
昨天
20
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部