Bootstrap入门学习
- Bootstrap简介
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、 JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
附：Less即CSS预处理语言，简单来说就是对原来的CSS进行扩充，使其能使用变量、混合、函数等，让CSS更易维护
学习资料：官网 http://lesscss.org/ - Bootstrap中的容器：container
Bootstrap 3 的 container class 用于包裹页面上的内容。下面是 bootstrap.css 文件中.container class
通过上面的代码，把 container 的左右外边距（margin-right、margin-left）交由浏览器决定。请注意，由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。
这会产生伪元素。设置 display 为 table，会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌，:after 伪元素清除浮动。
它创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。
Bootstrap 3 CSS 有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为 container 设置了max-width，用以匹配网格系统。(网格系统在下面有详述) - 网格系统
(1) 什么是网格系统
官方解释：
Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。
其实也就是因为bootstrap是移动设备优先，所以代码从小屏幕设备开始扩展到大屏幕设备会扩展最多12列的一个布局
（2）Bootstrap 网格系统（又叫栅格系统）的工作原理
1 ） “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
2 ）通过“行（row）”在水平方向创建一组“列（column）”。内容应该放置在列内，且唯有列可以是行的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
3 ）通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
4）如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
5 ）栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。
6 ）列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
下面是栅格系统针对不同大小屏幕的相关信息
示例：下面是一个简易的登录页面，我们在class中设置col-lg-10和col-sm-3,然后在不用的屏幕大小下做示例，可以看到在不同的屏幕大小下，页面占用的格数不同。那么在实际开发场景中，就可以根据不用的需求进行调整
代码
780 * 590
120*590
4. 表格
Bootstrap表格元素
Bootstrap的表格元素实际上和html没有什么太大的区别，主要是对原来表格的样式做了一些扩充，我们可以通过给class设置不同的属性让表格产生不同的效果，示例如下：
根据需求改变单个单元格背景颜色示例
代码：
效果：
5. Bootstrap的响应式工具
Bootstrap响应式工具主要是根据设备屏幕，可以自适应的进行内容的显现
测试代码：
测试结果：
在屏幕大于1200px时;
在屏幕大于992px时,小于1200px时;
在屏幕大于768px时,小于992px时;
学习网站：https://www.bootcss.com/
模板网站：https://v3.bootcss.com/examples/carousel/#
入门推荐：https://www.runoob.com/bootstrap/bootstrap-tutorial.html