这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【什么是bootstrap 】
标题：
什么是bootstrap
开场语：
大家好，我是IT修真院上海分院第十期的学员林璇，一枚正直纯洁善良的程序员，今天给大家分享一下，修真院官网WEB（职业）任务九，深度思考中的知识点——bootstrap
（1）背景介绍：
什么是bootstrap
Bootstrap，来自 Twitter公司开发的一个HTML和CSS的一个技术框架
通过了这些的框架，可以创造出很多的WEB的好看的界面
Bootstrap,分为哪些？
Bootstrap分为3和4，他们的区别是在于
bootstrap3和bootstrap4最大的区别就是4用的是flex布局，3用的是float浮动
bootstrap4的栅格类特小(col-)，bootstrap3的栅格类特小(col-xs）
bootstrap4新增加的栅格特大(col-xl-)
bootstrap4用offset来移动bootstrap3用push和pull向左和向右移动
什么是栅格系统（网格系统）
网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，
可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类
Bootstrap4 网格系统规则:
网格每一行需要放在设置了 .container (固定宽度)
.container-fluid (全屏宽度) 类的容器中，
或这样就可以自动设置一些外边距与内边距。
内容需要放置在列中，并且只有列可以是行的直接子节点。
预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
（2）知识剖析：
Bootstrap4网格系统有以下 5 个类:
.col- 针对所有设备
超小设备小于576px
None (auto)
列数量和 12
30px （一个列的每边分别 15px）
可嵌套 Yes
列排序 Yes
.col-sm-
容器最大宽度540px
列数量和 12
30px （一个列的每边分别 15px）
可嵌套 Yes
.col-md-
大于等于768px
容器最大宽度720px
列数量和 12
30px （一个列的每边分别 15px）
可嵌套 Yes
.col-lg-
大于等于992px
容器最大宽度960px
列数量和 12
30px （一个列的每边分别 15px）
可嵌套 Yes
.col-xl-
大于等于1200px
容器最大宽度是1140px
列数量和 12
30px （一个列的每边分别 15px）
可嵌套 Yes
（3）常见问题：
栅格系统其他的布局方法是什么？
（4）解决方案：
任务八和九的最下面的布局方案，有使用横移的，也有直接使用了分成三列来布局的
（5）编码实战：
<div class="container irtxzy">
<!-- in regard to关于修真院 -->
<div class="row">
<div class="col-sm-4 link1">
<span class="JNSS">技能树 — 改变你我 </span>
<a class="irtt">关于我们</a>
<a class="touch">丨联系我们丨</a>
<a class="ilk">友情链接</a>
</div>
<div class="col-md-4 link1">
<span class="website">旗下网站</span>
<!-- 第一个名称 -->
<a class="nameonee">草船云孵化器</a>
<a class="nameone">最强IT特训营</a>
<!-- 第二个名称 -->
<div>
<a class="PTTGAME">葡萄藤轻游戏 </a>
<a class="JNS">桌游精灵</a>
</Div>
（6）拓展思考：
在使用Bootstrap4的时候遇到浮动的问题要怎么办
答：Bootstrap4自带了清楚浮动的效果
（7）参考文献：
{1}博客
{2}b站视频
（8）更多讨论：
Q1：.container,row,col有什么关系？他们的工作原理是什么？
A1：container类用于固定宽度并支持响应式布局的容器。 .row和.col类配合用于为其赋予合适的排列和内补。
Q2：css 阶段能做组件化吗？
A2：不能，组件化是HTML、css、JavaScript三方共同作用
Q3：CSS阶段不做组件化，那不叫组件化，叫什么呢？
A3：目前只能叫做样式库
（9）鸣谢：
感谢王刚、郭巍师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地