Bootstrap源码解读之栅格化篇
2018-06-24 01:57:37来源:未知 阅读 ()
本文纯属自己研究所写笔记,如果有错误还请多多指教提出
版心(container)
-
版心:class名为.container的容器,其版心的宽度在各个屏幕设备下是不一样的值,版心两边就是留白。
各尺寸下版心宽度如下表:屏幕设备 版心宽度 max-width:768px xs 继承父元素宽度(即width:100%) min-width:768px sm 750px min-width:992px md 970px min-width:1200px lg 1170px
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } .container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
-
不管什么宽度的屏幕,版心容器.container总会有左右15px的padding,是为了让内容不直接紧贴浏览器边缘的。在一个container中永远不要再嵌套一个container.
-
.container-fluid的版心容器跟小于768px屏幕的版心一样,自己没有设置固定宽度值,继承其父元素的宽度。
-
.container容器是用来在响应式宽度上提供宽度约束。响应尺寸的改变其实改变的是container,行(row)和列(column)都是基于百分比的所以它们不需要做任何改变。
行(row)
- 行:class名为.row的容器;它为列(col)一共了空间,总共分为12列。
- row两端会有两个负的15px的margin值,为了抵消掉container两侧的padding值。.row在container外使用时无效的。
.row { margin-right: -15px; margin-left: -15px; }
列(column)
- 每一列都有两侧15px的padding值。永远不要在.row容器外使用col,否则col是无效的。
- 每列col的padding值给其内容提供了空白,使内容不会紧贴在浏览器边缘,列之间也不会紧贴在一起。
- ==列都是按照百分比分配的(相对于版心宽度的百分比,所以版心越宽的,每列宽度就越大)==。
//五列的宽度 .col-xs-5 { width: 41.66666667%; } // 四列的宽度 .col-xs-4 { width: 33.33333333%; } // 三列的宽度 .col-xs-3 { width: 25%; } // 占两列的宽度 .col-xs-2 { width: 16.66666667%; } // 每列的宽度是版心宽度的8.33333333% .col-xs-1 { width: 8.33333333%; } ... // 如果是中等屏幕 类名为.col-md-1 // 小屏幕 类名为:.col-sm-1 // 大屏幕 类名为:.col-lg-1 @media (min-width:768px) { .col-sm-1 { width: 8.33333333%; } .col-sm-2 { width: 16.66666667%; } ... } @media (min-width: 992px) { .col-md-1 { width: 8.33333333%; } .col-md-2 { width: 16.66666667%; } ... } @media (min-width:1200px) { .col-lg-1 { width: 8.33333333%; } .col-lg-2 { width: 16.66666667%; } ... }
栅格嵌套
- 当设置了 container/row/column之后,可以在column内再创建新的栅格系统,在column里面直接再添加row就可以了,不需要再套container了,因为列的两侧padding值 正好可以抵消row的两侧负的margin值,列相当于container了。
偏移(offsets)
- 偏移offset主要是靠列的margin-left值决定。偏移一列的话就是margin-left:8.3333333%(1/12),偏移两列就是margin-left:16.66666667%(即2/12);
.col-xs-offset-0 { margin-left: 0; } .col-xs-offset-1 { margin-left: 8.33333333%; } ... @median (min-width:768px) { .col-sm-offset-0 { margin-left: 0; } .col-sm-offset-1 { margin-left: 8.33333333%; } ... } ...
列的排序(Push 和 Pull)
- 在实际应用中更多表现的是呼唤位置和进行排序,允许你打破html中div从上到下 从左到右的固定布局。
- pull 和 push 是通过position的 right 和 left值实现的,pull是通过right值,pull-1值 right:8.33333333% (1/12); push-1值=> left:8.33333333%(1/12);
// push 距离左边的距离(向右推的列数)以最小屏为例 .col-xs-push-2 { left: 16.66666667%; } .col-xs-push-1 { left: 8.33333333%; } .col-xs-push-0 { left: auto; } ... // pull 距离右边的距离(向左拉的列数)以最小屏为例 .col-xs-pull-2 { right: 16.66666667%; } .col-xs-pull-1 { right: 8.33333333%; } .col-xs-pull-0 { right: auto; }
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- Bootstrap 滚动监听+小工具+Flex(弹性)布局+多媒体对象 2020-04-20
- Bootstrap4 轮播+模态框+提示框+弹出框 2020-04-16
- Bootstrap4 面包屑导航+表单+输入框组+自定义表单 2020-04-16
- Bootstrap4 卡片+下拉菜单+折叠+导航+导航栏 2020-04-16
- Bootstrap4 按钮组+徽章(Badges)+进度条+分页+列表组 2020-04-16
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash