如何使用BOOTSTRAP栅格系统？

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

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

八个方面深度解析前端知识/技能。

大家好，我是IT修真院郑州分院王浩冉，一枚正直纯洁善良的前端程序员。

今天给大家分享一下，修真院官网css任务8，深度思考中的知识点：

如何使用BOOTSTRAP栅格系统？

（1）背景介绍：

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。

[1] 它由Twitter的设计师MarkOtto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。 Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的BreakingNews都使用了该项目。 [2] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

（2）知识剖析：

bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距， 最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

小屏幕（平板，大于等于 768px） @media (min-width: @screen-sm-min) { ... } 中等屏幕（桌面显示器，大于等于 992px） @media (min-width: @screen-md-min) { ... } 大屏幕（大桌面显示器，大于等于 1200px） @media (min-width: @screen-lg-min) { ... }

行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。 2.在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。如： 3.具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row) 的直接子元素 4.类似 .row 和 .col-sm-4 这种预定义的类，可以用来快速创建栅格布局。 5.通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值 的外距（margin）来抵消内距(padding)的影响

（3）常见问题：

1、12列如何划分的？

2、16列如何划分的？

3、24列如何划分的？

（4）解决方案：

1、每个栅格栏左右间隙10px； 每个栅格60px； 列与列之间间隔20px； 可用部分940px；

2、每个栅格间隙10； 每个栅格40px；

3、左右各占5px； 每个栅格30px； 可用部分950px；

（5）编码实战：

div class="row">

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 class="col-md-2 col-xs-12 col-sm-12 col-lg-2"

div class="col-md-2 col-xs-12 col-sm-12 col-lg-2"

div class="col-md-2 col-xs-12 col-sm-12 col-lg-2"

div class="col-md-2 col-xs-12 col-sm-12 col-lg-2"

（6）拓展思考：

css 阶段能做组件化吗？

1 不能，组件化是HTML、css、JavaScript三方共同作用

2 目前只能叫做样式库，自己的整理和总结

（7）参考文献：

 

 

参考：菜鸟教程：Bootstrap 网格系统

 

 

（8）更多讨论：

1：提问人：1.bootstrap有哪些常用组件？

1：回答人：导航栏、下拉框、轮播图
2：提问人：2.bootstrap的栅格系统为什么最多12列，采用12列有什么好处吗？

2：回答人：因为12列是程序员最常用的布局方式，能解决很多情况的布局问题。

（9）鸣谢：

感谢霍亚豪师兄，此教程是在他之前技术分享的基础上完善而成。

（10）结束语：

 

PPT链接 视频链接

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖

------------------------------------------------------------------------------------------------------------

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，学习的路上不再迷茫。”

技能树·IT修真院：https://www.jnshu.com