bootstrap解析-栅格系统

singerye 发布于2019-08-01 16:57 / 3359人阅读

.container(布局容器)

屏幕宽1200px以上（col-lg）

1. 默认width为1170px
2. padding,lefet和right各为15px,所以内容width为1140px;

屏幕宽992px以上(col-md)

1. 默认width为970px
2. padding,lefet和right各为15px,所以内容width为940px;

屏幕宽768px以上(col-sm)

1. 默认width为750px
2. padding,lefet和right各为15px,所以内容width为720px;

屏幕宽768px以下(col-xs)

1. 默认width为100%
2. padding,lefet和right各为15px,所以内容width为100%-30px;

.container-fluid(流式布局容器)

1. width为100%
2. 其他和.container一样

.row(行)

1. 默认margin-left和margin-right为-15px;
2. 这样就抵消掉了.container的padding,row的显示区域width就为.container的width了
3. 利用::after清楚浮动

.col-(列)

1. 用@media来设置width对应百分比
2. padding,lefet和right各为15px
3. float:left
4. position:relative
5. min-height:1px

.col-*-offset-(移动)

1. 利用@media来设置margin-left相应的百分比

.col--push-和.col--pull-(列排序)

1. 由于col-设置了posistion:relative所以通过设置left(push)和righ(pull)来改变节点的位置。

其他情况 列的高度不同时

解决 .clearfix(清除浮动)

1. 由于列都浮动了，所以阈值时会产生一些问题，所需要配合清除相应位置的浮动来解决

列大于12时

1. 由于列浮动了，所以超出的列会自动换行排列

嵌套

1. 由于以上属性设置，所以嵌套写.row和.col-就可以

bootstrap的栅格系统基本就是这些，所以也没什么神秘的，你自己也完全可以写出自己的栅格系统来。
本篇博文首发于本人个人博客，查看更多点这里

GPU云服务器云服务器 bootstrap栅格系统 bootstrap栅格栅格系统原理 bootstrap3网格系统

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50859.html

bootstrap解析-栅格系统

.container(布局容器) 屏幕宽1200px以上（col-lg） 1. 默认width为1170px 2. padding,lefet和right各为15px,所以内容width为1140px; 屏幕宽992px以上(col-md) 1. 默认width为970px 2. padding,lefet和right各为15px,所以内容width为940px; 屏幕宽768px以上(col...

BothEyes1993 2019-08-29 12:42 评论0 收藏0
深入新版BS4源码探索flex和工程化sass奥秘

摘要：这个接受三个参数表示栅格数目默认为默认为表示断点设置，这是一个全局变量，为类型。你可能已经听说了一个大新闻：Bootstrap4 合并了代号为#21389的PR，宣布放弃支持IE9，并默认使用flexbox弹性盒模型。这标志着：1）前端开发全面步入现代浏览器的时代进一步来临；2）样式处理也再一次面向未来，拥抱更加灵活的弹性盒模型－Flex布局。这篇文章会带你深入Bootstrap最...

evin2016 2019-08-21 11:30 评论0 收藏0
深入新版BS4源码探索flex和工程化sass奥秘

摘要：这个接受三个参数表示栅格数目默认为默认为表示断点设置，这是一个全局变量，为类型。你可能已经听说了一个大新闻：Bootstrap4 合并了代号为#21389的PR，宣布放弃支持IE9，并默认使用flexbox弹性盒模型。这标志着：1）前端开发全面步入现代浏览器的时代进一步来临；2）样式处理也再一次面向未来，拥抱更加灵活的弹性盒模型－Flex布局。这篇文章会带你深入Bootstrap最...

silencezwm 2019-08-30 15:52 评论0 收藏0
深入新版BS4源码探索flex和工程化sass奥秘

摘要：这个接受三个参数表示栅格数目默认为默认为表示断点设置，这是一个全局变量，为类型。你可能已经听说了一个大新闻：Bootstrap4 合并了代号为#21389的PR，宣布放弃支持IE9，并默认使用flexbox弹性盒模型。这标志着：1）前端开发全面步入现代浏览器的时代进一步来临；2）样式处理也再一次面向未来，拥抱更加灵活的弹性盒模型－Flex布局。这篇文章会带你深入Bootstrap最...

Enlightenment 2019-08-01 16:16 评论0 收藏0
Bootstrap网格系统

摘要：栅格系统中的列是通过指定到的值来表示其跨越的范围。实例下图是一个栅格系统，共有四行。然后在根目录中，使用命令，可以自动将源代码编译成，放在目录中。什么是Bootstrap Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，它包括HTML,CSS,JS等。它是由Twitter开发，现在成为Github上最为流行的前端开发框架。它提供了一套响应式，移动设备优先的流式栅格...

ISherry 2019-08-30 13:07 评论0 收藏0