Boostrap技能点整理之【网格系统】

秒速五厘米 2022-12-25 01:55 158阅读 0赞

![format_png][]

![format_png 1][]

今天我们来串串bootstrap总的网格系统，说到网格系统，依稀记得当时教程上不叫网格，而叫栅格，我总觉得这个栅(shān )读起来不得劲，就读他的另一个音，栅（zhà）格，每次遇到就读栅（zhà）格系统栅（zhà）格系统![format_png 2][]![format_png 2][]

好了，闲言少叙，接下来我们看看bootstrap中的网（栅）格系统。

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，这12列也是可以随便拆分与组合的，即：

![format_png 3][]

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

*  行必须放置在 **.container** class 内，以便获得适当的对齐（alignment）和内边距（padding）。
 *  使用行来创建列的水平组。
 *  内容应该放置在列内，且唯有列可以是行的直接子元素。
 *  预定义的网格类，比如 **.row** 和 **.col-xs-4**，可用于快速创建网格布局。
    
    LESS 混合类可用于更多语义布局。
 *  列通过内边距（padding）来创建列内容之间的间隙。
    
    该内边距是通过 **.rows** 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
 *  网格系统是通过指定您想要横跨的十二个可用的列来创建的。
    
    例如，要创建三个相等的列，则使用三个 **.col-xs-4**。

![format_png 4][]

下面我们可以来写一个基本的网格结构：

运行结果是这样的：

![format_png 5][]

我们从图中不难看出，整个网格系统将会浏览器的宽度分为了**12等分**，那么这12个等分可不可以进行随便组合或者随便嵌套呢？答案是肯定的。

列组合

比如我们可以这样：

![format_png 6][]

也可以这样：

![format_png 7][]

列偏移

或者这样：

![format_png 8][]

上面这段代码中有个新知识点，即：**col-md-offset**表示列偏移，偏移多少取决于后面的数字，例如本段代码就是向右偏移6等分。（中间的空格部分为6等分，大家可以自行算算）

下面再来一个关于列偏移的案例，加深一下理解：

![format_png 9][]

（空格部分已经标注明白）

除了组合之外，我们还可以进行对网格的嵌套：

列嵌套

![format_png 10][]

说明一下：最外面的大的是两个6等分，左边的6等分里面：

*  第一行分为1个12等分
 *  第二行分为2个6等分
 *  第三行分为3个4等分
 *  下面我相信大家会往下接了，例如4个3等分，6个2等分以及12个1等分

列排序

还可以对网格进行排序（稍微复杂点）

![format_png 11][]

在分析运行结果之前，先看两个陌生词：

*  **push**：
    
    推的意思，向右推，后面的数字代表拉的量
 *  **pull**：
    
    拉的意思，向左拉，后面的数字代表拉的量

上面这段代码就是：

*  将第一个网格向右推6等分，于是就到了7等分的位置；
 *  将第5个等分向左拉2个网格，于是就到了3等分的位置

这样就好理解了吧。

以上就是今天整理的内容，有想法的可以留言至文章下面哦~

往期推荐

[Boostrap技能点整理之【bootstrap简介】][Boostrap_bootstrap]

[2020-05-25][Boostrap_bootstrap]

[![format_png 12][] ][Boostrap_bootstrap] [C\#基础知识详解之【字段与属性】

2020-05-24

![format_png 13][] ][C_ 2020-05-24 _format_png 13_] [C\#基础知识详解之【文件的输入与输出】

2020-05-23

![format_png 14][] ][C_ 2020-05-23 _format_png 14_] [C\#基础知识详解之【值类型和引用类型】

2020-05-21

![format_png 15][] ][C_ 2020-05-21 _format_png 15_] [C\#基础知识详解之【异常处理】

2020-05-22

![format_png 16][] ][C_ 2020-05-22 _format_png 16_]

![format_png 17][]

欢

迎

关

注

**公众号：雄雄的小课堂**

**CSDN：穆雄雄的博客**

[format_png]: /images/20221120/6eddc6eb75fe4bd6b1d7352b9a161556.png
[format_png 1]: /images/20221120/a80c9be5c9ec475cb00aadd55461f9b1.png
[format_png 2]: /images/20221120/98f1919e14cb40d3addb7ba6ebbee80e.png
[format_png 3]: /images/20221120/b85c8b936da6428aa64e14a757f2bb51.png
[format_png 4]: /images/20221120/3ad72452e2dc402fa1656c598d0bc77c.png
[format_png 5]: /images/20221120/87de0b109b8747848e708fc1817b7274.png
[format_png 6]: /images/20221120/b81a26a1cd114db886af11d86331cd40.png
[format_png 7]: /images/20221120/923d7832aed547379f670aa3b034281a.png
[format_png 8]: /images/20221120/167203d6275247aea220f26edea0f9e2.png
[format_png 9]: /images/20221120/0d59f05f4ef3434d8c88ff8823eb5301.png
[format_png 10]: /images/20221120/c8046d5365ce4b399d66b8c439379c04.png
[format_png 11]: /images/20221120/254b896f1c6542f38493f84a523c916e.png
[Boostrap_bootstrap]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1d86a0fb9490a6df8c9d4d2786599b916c697e4fd4b55631cf52e9441027c9d35625deca&idx=1&mid=2247485287&scene=21&sn=845f2138205cabff1a2c7f07c9045ddf#wechat_redirect
[format_png 12]: /images/20221120/ac5da20cc6be4ea083919d685ce76f77.png
[format_png 13]: /images/20221120/762e2081172543f9b71f267d5c1186d6.png
[C_ 2020-05-24 _format_png 13_]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1dbda0fb94abfb0de880f7d7b132b66d84af33d57e11fdd19f4510631f8a19a802603eda&idx=1&mid=2247485276&scene=21&sn=27d2b95fd83d8fbd330e2acbfb7faf01#wechat_redirect
[format_png 14]: /images/20221120/d1bf5976c1d940089ac991a4b66d049f.png
[C_ 2020-05-23 _format_png 14_]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1db6a0fb94a0dcad9ba081873d30c920f025b97b94898ebf57af08267313cc5a4569233c&idx=1&mid=2247485271&scene=21&sn=271dccd7f12c9c2dcf932c4643c39a89#wechat_redirect
[format_png 15]: /images/20221120/b01014a806594f7997fd531ce4b873ed.png
[C_ 2020-05-21 _format_png 15_]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1c0fa0fb9519dcfef17fbfb83864b69da926879f85f64d222407e813193a46cc6c171392&idx=1&mid=2247485166&scene=21&sn=d97b42f49b3a8eeca9f0e9673c7bfbe0#wechat_redirect
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9EWjlUaWF4ZFF4azNvYUVVZWFSaWFYVXAzZ21PUEx6VWlhSmRyaWJtbmdYMGNGVldnT2tSMmU2N3p3UThmVUxjNGliY0lLdk9vZUVGckdMWmtjSGczOU96SFpnLzY0MA?x-oss-process=image/format,png
[C_ 2020-05-22 _format_png 16_]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978c1dd1a0fb94c7fd14c0d37cfc1d1f7ab63ff6ae1a71762cf98dc1573b941db23622f5703b&idx=1&mid=2247485232&scene=21&sn=f5409bfaadac2d223b1ed6c1810d2d3b#wechat_redirect
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9EWjlUaWF4ZFF4azFCMTczUFB4OG1sT0ZpYnF1aWI3czE2b2QzSjc2YTExQkh3dWtoamQ4SWVMSG92TUpKVGZoSUpyenUzU2xwcWxjUXBFVGZnUmlhTXM1VncvNjQw?x-oss-process=image/format,png