Bootstrap入门--栅格系统

Love The Way You Lie 2022-04-12 08:50 439阅读 0赞

在Bootstrap的学习中，栅格系统的使用可谓是十分重要了。使用栅格系统布局实际上可以简单理解为 **“加强版的表格(table)布局”**。

根据Bootstrap官方文档的描述：

> Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

从官方文档的这段描述我们可以看出栅格系统相较于表格布局，栅格系统的特点在于**响应式、移动设备优先且最大一行只能有12列。**

# 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种类，是因为通过多种类的使用才能达到开头引用的官方文档中所描述的“响应式、移动设备优先”。简言之就是，混合使用不同列，可以实现在不同的屏幕上呈现不一样的效果。以下表格来自官方文档。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]

# 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">
    		
    		<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列，效果如下图。  
![在这里插入图片描述][20181202173053419.png]  
看到这里想必大家也能明白类后面紧跟的那个数字的含义是什么了吧。比如说**col-md-1**，里面那个数字1意思就是在总共的12列中占1列。

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

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

![在这里插入图片描述][20181202173756190.png]

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

![在这里插入图片描述][20181202174509782.png]

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

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

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

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

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

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

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

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

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

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

效果如下图最后一行。

![在这里插入图片描述][20181203161806622.png]

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

效果如下图最后一行。

![在这里插入图片描述][20181203162055879.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: /images/20220412/c5602ae36235486e89ac571bd2e4ebb2.png
[20181202173053419.png]: /images/20220412/3faf50fede694d8e8cabebbab8ee8f38.png
[20181202173756190.png]: /images/20220412/848d47dc3d754bd88cd41f6cf801b6ae.png
[20181202174509782.png]: /images/20220412/407db6763e204af8a225037bc7255b46.png
[2018120315303323.png]: /images/20220412/658c76a42e244bcd959f4aaa70fe5885.png
[20181203154046753.png]: /images/20220412/15b58fc7a82a4c21b4a8bf9cbed32dc9.png
[20181203155755866.png]: /images/20220412/cd3cdc74899c442c9bfddb7c467726f5.png
[20181203161806622.png]: /images/20220412/f0d998f4f4a24fa38a0629ab9bfcc48a.png
[20181203162055879.png]: /images/20220412/0a5568fd33ab4eb2abcd731e78cf0b0e.png