Bootstrap栅格布局使用

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【Bootstrap栅格布局使用】

你们好，我是IT修真院北京分院第29期学员吴昊杰，一枚正直善良的web程序员。

今天给你们分享一下，修真院官网 CSS任务中可能会使用到的知识点：

Bootstrap栅格布局使用。

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

 

1.背景介绍

Bootstrap的由来

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、javaScript 的，它简洁灵活，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它便是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

 

2.知识剖析

2.1 原理

网格系统的实现原理很是简单，仅仅是经过定义容器大小，平分12份(也有平分红24份或32份，但12份是最多见的)，再调整内外边距，最后结合媒体查询，就制做出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分红12份。

在使用的时候你们能够根据实际状况从新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，固然你也能够分红更多，但不建议这样使用）。

2.2 使用规则

1 行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。

2 在行(.row)中能够添加列(.column)，最多分配12。

3 具体内容应当放置在列容器（column）以内，并且只有列（column）才能够做为行容器(.row)的直接子元素

4 相似 .row 和 .col-sm-4 这种预约义的类，能够用来快速建立栅格布局。

5 经过为“列（column）”设置 padding 属性，从而建立列与列之间的间隔

2.3 栅格选项

当屏宽小于768px（即小屏）时，列的划分以.col-xs-后面的数字为准。若是没定义.col-xs-，就会变成单列且宽度和row相等。

当屏宽在768px和992px之间（即平板屏）时，列的划分以.col-sm-后面的数字为准。若是没有定义col-sm-，以.col-xs-为准。

当屏宽在992px和1200px之间（即中屏）时，列的划分以.col-md-后面的数字为准。若是没有定义.col-md-，以col-sm-或col-xs-为准。

当屏宽大于1200px（即大屏）时，列的划分以.col-lg-后面的数字为准。若是没有定义.col-md-，以.col-md-或col-sm-或col-xs-为准。

 

3.常见问题

1.col-xs-1 必须放在.row之中吗 .row必须放在.container之中吗?

2.如何使用bootstrap栅格系统？

 

4.解决方案

行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

经过“行（row）”在水平方向建立一组“列（column）。

你的内容应当放置于“列（column）”内，而且，只有“列（column）”能够做为行（row）”的直接子元素。

 

5.编码实战

 

6.扩展思考

Bootstrap 有哪些缺点？

我的认为，所谓优势和缺点，多数根据业务需求而定。好比 bootstrap 2之后的版本不支持IE6。当你的网站须要支持ie6的时候，这时是缺点。当网站不须要支持ie6.减小了兼容代码的处理，立刻又变成了优势。整体而已，Bootstrap 属于前端 ui 库，经过现成的ui组件可以迅速搭建前端页面。同时还能够用less从新设计组件。对于前端技术通常的后台工程师，省去了不少编写前端处理时的痛苦。我的使用搭个博客什么的比较方便。相对于公司，直接使用 Bootstrap 感受很少，大公司都有本身的前端开发设计人员，也会设计本身的css库。固然，Bootstrap开源，对于学习如何组织css仍是颇有必要。

 

7.参考文献

 

8.更多讨论

1.bootstrap栅格系统所定义的breakpoint 为何是480 768 992 1200？

答：在早期的ipad和iphone上的分辨率就是 480 768 992 1200等像素宽度，而如今的手机像素的分类很乱，可是多数的css框架依然是使用了过去的这些数字。

2.bootstrap的栅格系统为何是12列，有没有18列，24列等等啊，采用12列有什么好处？

答：12是2，3，4，6的最小公倍数，相比较于18，18就很差分为四份，24能分的数字12也能分，因此选择了分为12份。

3.bootstrap有哪些经常使用组件？

1.轮播图 2.下拉菜单 3.响应式的导航栏

4.

5.如何实现列偏移与列排序。

列偏移使用class类col-md-offset-3 列排序使用.col-md-9 .col-md-push-3

6.bootstrap3和4有什么区别

4相较于3来讲多了一些关于移动端开发的知识。

7.container与container-fluid有什么区别

container-fliid会占满宽度。

8.一行五列的事是看媒体查询方法的使用

 

到了使用中就能够直接套用。

感谢你们的收看!

 

By:吴昊杰

腾讯视频：https://v.qq.com/x/page/d0527k6tq7q.html

Github：

https://ptteng.github.io/WEB/ppt/Bootstrap%E6%A0%85%E6%A0%BC%E5%B8%83%E5%B1%80%E4%BD%BF%E7%94%A8.html#/