给大家介绍一下如何使用bootstrap栅格系统
1.背景介绍
Bootstrap是2011年由Twitter工程师们制作的一套开源框架。他可以简单、灵活的用于搭建WEB页面。是最受欢迎的HTML,CSS,JavaScript框架。
Bootstrap栅格(网格)系统是Bootstrap中的一个响应式的、移动设备优先的、不固定的网格系统。他可以随着设备或视口大小的增加而适当的扩展到 12列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。
2.知识剖析
工作原理:
- 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
- 使用行来创建列的水平组。
- 内容应该放置在列内,且唯有列可以是行的直接子元素。
- 预定义的网格类,比如 .row 和 .col-xs-4,可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
- 列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距(margin)取负,表示第一列和最后一列的行偏移。
- 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如,要创建三个相等的列,则使用三个 .col-xs-4。
基本的网格结构:
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container">....
container与container-fluid的区别:
container:用于固定宽度并支持响应式布局的容器。
container-fluid:用于 100% 宽度,占据全部视口(viewport)的容器。
container 有两个作用:
在随时可能的宽度变化(响应式)中提供宽度限制。当页面宽度变化,container 的宽度也随之变化。并且其中的 column 的宽度是基于百分比,所以他们的值不需要变化。
提供一个水平方向的 padding,使其内部的内容不会接触到浏览器的边界,大小为15px,就是图片中粉红色的部分,作用会在下面说。
注意,不需要也不应该在 container 中嵌套另一个 container
下表总结了 Bootstrap 网格系统如何跨多个设备工作
超小设备手机(<768px) | 小型设备平板电脑(≥768px) | 中型设备台式电脑(≥992px) | 大型设备台式电脑(≥1200px) | |
---|---|---|---|---|
网格行为 | 一直是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 | 以折叠开始,断点以上是水平的 |
最大容器宽度 | None (auto) | 750px | 970px | 1170px |
Class 前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
列数量和 | 12 | 12 | 12 | 12 |
最大列宽 | Auto | 60px | 78px | 95px |
间隙宽度 | 30px (一个列的每边分别 15px) |
30px (一个列的每边分别 15px) |
30px (一个列的每边分别 15px) |
30px (一个列的每边分别 15px) |
可嵌套 | Yes | Yes | Yes | Yes |
偏移量 | Yes | Yes | Yes | Yes |
列排序 | Yes | Yes | Yes | Yes |
3.常见问题
Bootstrap栅格布局的响应式如何实现?
4.解决方案
在<div class="col-xs-* col-sm-* col-md-* col-lg-*"></div>
通过给col附加不同的class前缀,以此对应不同的屏幕下,内容的宽度。
也就是利用列重置,列偏移
5.编码实战
<div class="row logo"> <div class="col-md-2 col-md-offset-1 col-xs-12 col-sm-12 col-lg-2 col-lg-offset-1 logo-alibaba"> </div> <div class="col-md-2 col-xs-12 col-sm-12 col-lg-2 logo-jinshan"> </div> <div class="col-md-2 col-xs-12 col-sm-12 col-lg-2 logo-huanxin"> </div> <div class="col-md-2 col-xs-12 col-sm-12 col-lg-2 logo-ronglian"> </div> <div class="col-md-2 col-xs-12 col-sm-12 col-lg-2 logo-qiniu">
</div>
上面代码中的"col-md-2 col-xs-12 col-sm-12 col-lg-2"代表的是在屏幕分辨率大于992px时.col的列宽为2。小于992px时,.col的列宽为12,占据全部的宽度。
6.拓展思考
栅格布局的源码是怎样的?
7.参考文献
菜鸟教程:http://www.runoob.com/bootstrap/bootstrap-grid-system.html
bootstrap中文网:http://v3.bootcss.com/css/
8.更多讨论
bootstrap的兼容问题?
bootstrap有什么清除浮动的方法?
答:bootstrap清除浮动的方法是使用类.clearfix,栅格系统里也有清除浮动的,就是在每个row末,都有一个clear:both;
Bootstrap 有哪些缺点?
答:1、Bootstrap 自带的样式权值很高,在开发中需要大量的代码用于覆盖原有样式。
2、不兼容IE8以下浏览器,有兼容需求的就不能使用bootstrap了。
3.bootstrap有哪些常用组件?
答:1.轮播图 2.下拉菜单 3.响应式的导航栏
鸣谢
感谢大家观看