1.栅格系统的行、列和容器

我们知道在HTML的table中是分别由tr、td标签构成表格的行与列。同样的，在栅格系统中构成行与列的也需要特殊的标识，只不过没有了专门的标签而是使用一个Bootstrap提供的CSS类row来构成行，由col- 开头的一系列类构成列。

就如同HTML中的tr或td
标签那样，它们需要被包裹在table标签内来构成表格的行与列。而栅格系统中的行与列需要被包裹在类为**container (固定宽度)或container-fluid (100% 宽度)**的容器中。

<!--这样就定义好了 一行里面有一列占据两列宽度的栅格布局-->
<div class='container'>
    <div class='row'>
        <div class='col-md-2'></div>
    </div>
</div>

Bootstrap提供了4种列，分别是col-xs-、col-sm-、col-md-和col-lg-。之所以Bootstrap提供了4种类，是因为通过多种类的使用才能达到开头引用的官方文档中所描述的“响应式、移动设备优先”。简言之就是，混合使用不同列，可以实现在不同的屏幕上呈现不一样的效果。以下表格来自官方文档。
在这里插入图片描述

2.栅格系统的使用

<!DOCTYPE html>
<html>
<head>
	<title>BootStrap学习</title>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
	<style type="text/css">
	.row{
		border: 1px solid red;
	}
	[class*='col-']{
		border: 1px solid black;
	}
</style>
</head>
<body>
	<div class="container">
		<!-- 每行12列 -->
		<div class="row">
			<div class="col-md-1">1</div>
			<div class="col-md-1">2</div>
			<div class="col-md-1">3</div>
			<div class="col-md-1">4</div>
			<div class="col-md-1">5</div>
			<div class="col-md-1">6</div>
			<div class="col-md-1">7</div>
			<div class="col-md-1">8</div>
			<div class="col-md-1">9</div>
			<div class="col-md-1">10</div>
			<div class="col-md-1">11</div>
			<div class="col-md-1">12</div>
		</div>
		
</body>
</html>

以上代码构建了一行且行内有12列，效果如下图。
在这里插入图片描述
看到这里想必大家也能明白类后面紧跟的那个数字的含义是什么了吧。比如说col-md-1，里面那个数字1意思就是在总共的12列中占1列。

如果我们把数字改成2或者其他的什么数字，那就可以理解为为td标签设置colspan属性亦或是Excel中的合并单元格。比如我们再添加一行，列的类设置为col-md-4

<div class="row">
	<div class="col-md-4">1</div>
	<div class="col-md-4">2</div>
	<div class="col-md-4">3</div>
</div>

效果如下图。我们可以看到，第二行中总共有3列，每列就占了原来4列的空间。

在这里插入图片描述

目前为止我们演示的列加起来都刚好是12列，那么如果总列数超出了12会发生什么呢？我把新添加的那一行的最后一列改为col-md-5看看会发生什么。

在这里插入图片描述

可以看出，如果总列数超出了12，那么放不下的列将会被放到下一行。

从上面的例子中可以看出，列是自左向右排列的。那如果我们想改变一下列排列的形式有什么办法吗？

第一个办法就是，在类名中再加入col-md-offset- 这个类可以让列向右偏移，类似于为列添加了margin-left属性。

<div class="row">
	<div class="col-md-1">1</div>
	<div class="col-md-3 col-md-offset-5">2</div>
</div>

我们在第二列中为这一列添加了col-md-offset-5的类名，意思是该类向右偏移5列。效果如下图。
在这里插入图片描述

如果说把偏移值设的比较大，超出了一行之所能容纳，那么该列将会放到下一行且在下一行进行偏移。假设我们把上面代码的偏移值改为9，那么代码如下。

<div class="row">
	<div class="col-md-1">1</div>
	<div class="col-md-3 col-md-offset-9">2</div>
</div>

我一开始的想法是，第二列在本行中最多只能偏移8列，所以如果偏移值设为9的话，这一列应该放在下一行的开头。可是真是的效果却是放在了下一行偏移9列的地方（如下图）。
在这里插入图片描述

事实上，Bootstrap允许的最大偏移量是12，超过了将不会有任何效果。比如我们把偏移值改为13。

<div class="row">
	<div class="col-md-1">1</div>
	<div class="col-md-3 col-md-offset-13">2</div>
</div>

效果将会如下图所示，没有任何变化。
在这里插入图片描述

而上面之所以要换行来进行偏移的原因是，“只有新的一行才能为向右偏移9列提供足够的空间”。也就是说如果一行内空间足够是不需要换行的，

改变列的排列顺序还有第二个办法，那就是为列添加col-md-push- 或 col-md-pull- 的类名，可以实现类似左浮动或右浮动的效果。

<div class="row">
	<div class="col-md-4 col-md-push-8">1</div>
	<div class="col-md-8 div col-md-pull-4">2</div>
</div>

效果如下图最后一行。

在这里插入图片描述

除了以上介绍的这些，Bootstrap的栅格系统还支持嵌套，也就是说能够在列中嵌套新的一行。而且嵌套进去一行所占的宽度将会是其父列的宽度。

<div class="row">
			<div class="col-md-9">
				<div class="row">
					<div class="col-md-1">1</div>
					<div class="col-md-1">2</div>
					<div class="col-md-1">3</div>
					<div class="col-md-1">4</div>
					<div class="col-md-1">5</div>
					<div class="col-md-1">6</div>
					<div class="col-md-1">7</div>
					<div class="col-md-1">8</div>
					<div class="col-md-1">9</div>
					<div class="col-md-1">10</div>
					<div class="col-md-1">11</div>
					<div class="col-md-1">12</div>
				</div>
			</div>
		</div>

效果如下图最后一行。

在这里插入图片描述

Bootstrap入门--栅格系统

1.栅格系统的行、列和容器

2.栅格系统的使用

猜你喜欢