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

bootstrap解析-栅格系统相关推荐

一文带你马上清楚bootstrap的栅格系统
bootstrap的栅格系统我们都知道bootstrap的栅格系统是为了实现网站的响应式布局,但bootstrap提供了一套响应式.移动设备优先的流式栅格系统,它会将网页分为12等价(宽度),举个例 ...
Bootstrap 默认栅格系统
Bootstrap的默认栅格系统为固定宽度布局,宽度为940px,共包含12列,每列的宽度为 60px,列间隙为 20px.如图 2‑1所示: 图2-1 Bootstrap默认栅格系统 HTML代码 ...
html栅格系统格式,Bootstrap的栅格系统是什么？栅格系统详解
本篇文章就给大家带来Bootstrap的栅格系统是什么?栅格系统详解,让大家了解Bootstrap栅格系统.栅格参数是什么,列偏移.列嵌套怎么设置.有一定的参考价值,有需要的朋友可以参考一下,希望对你 ...
Bootstrap之栅格系统偏移
Bootstrap之栅格系统偏移 Bootstrap之栅格系统偏移: 在Bootstrap中可能会使用到offset(偏移),具体语法格式如下: <div class="col-md- ...
深入理解BootStrap Item7 -- 栅格系统（布局）
1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...
Bootstrap：栅格系统
[](()栅格系统的工作原理: 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局行(row)"必须包含在 .container(固定宽度)或 .containe ...
【前端4】bootstrap：栅格系统，隔行/触摸换色，分页/导航条，模态框/轮播图，旅游首页
文章目录 1.bootstrap基本模板:meta/title,link/script 2.两种布局容器/栅格系统:自动补 3.样式_表格/按钮/图片/表单:class属性,for属性联动 4.组件_ ...
Bootstrap之栅格系统
bootstrap 移动优先中文官网 http://www.bootcss.com/ 1.基本模板 <!DOCTYPE html> <html lang="en&quo ...
bootstrap的栅格系统和响应式工具
关于bootstrap的响应式布局,昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗,在这里记录一下一:meta标签的引用 < ...

bootstrap解析-栅格系统

.container(布局容器)

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

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

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

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

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

.row(行)

.col-(列)

.col-*-offset-(移动)

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

其他情况

列的高度不同时

解决 .clearfix(清除浮动)

列大于12时

嵌套

bootstrap解析-栅格系统相关推荐

最新文章

热门文章