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

时间 2019-11-12

标签 bootstrap 响应前端框架笔记强大栅格布局栏目 Bootstarp 繁體版

原文原文链接

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

1、Bootstrap？

Bootstrap是一款HTML，Css和JavaScript开发框架，其也支持开发者进行自定义构建，开发者也能够只打包本身须要的功能模块使用。Bootstrap的中文网址以下：css

http://v3.bootcss.com/。html

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

2、均分与尺寸适配

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

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

栅格系统的一行中被分红了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>

效果以下图：

3、列的调整

不少场景下，每列元素的高度并不必定均等，在列高度不均等状况下的栅格布局，极可能会出现开发者意想不到的布局差错，示例代码以下：

<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