Bootstrap知识点整理

什么是 Bootstrap

Bootstrap是一款非常优秀的Web前端框架，其灵活性和可扩展性加速了响应式页面开发的进程。Bootstrap遵循移动优先的原则，在开源之后迅速受到开发人员的追捧，推动了响应式技术的发展。
Bootstrap是一个基于HTML、CSS和JavaScript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面

Bootstrap响应式布局原理

网格系统的实现原理，是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。

Bootstrap框架中的网格系统就是将容器平分成12份。

Bootstrap响应式布局是利用其栅格系统，对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板，PC端都能使用，而不用考虑使用媒体查询（针对不同的设备分别写不同的代码）。

Bootstrap的官方解释：Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为做多12列。 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。

bootstrap优点

1. bootstap最近发布了bootstrap4，拥有了Box-flex布局等更新，紧跟最新的web技术的发展
2. 比较成熟，在大量的项目中充分的使用和测试
3. 拥有完善的文档，使用起来更方便
4. 有大量的组件样式，接受定制

bootstrap缺点

1. 如果有自己特殊的需求，就需要重新定制样式，如果一个网站中有大量的非bootstrap“风格”的样式存在，那么你就需要做大量的css重写，因此也就失去了使用框架的意义。
2. 会有兼容问题，虽然网上存在很多兼容IE的办法，但需要引入其他文件，有些还不小，势必导致加载速度变慢，影响用户体验。

栅格系统的工作原理

1. 行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中，以便为其赋予合适的排列（aligment）和内补（padding）。
2. 通过行（row）在水平方向创建一组列（column）。
3. 自己内容应当放置于列（column）内，并且，只有列可以作为行（row）的直接子元素。
4. 类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化布局。
5. 通过为列设置padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消为.container元素设置的padding，也就间接为行（row）所包含的列（column）抵消掉了padding。
6. 栅格系统的列是通过指定1到12的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4来创建。
7. 如果一行（row）中包含了的列（column）大于12，多余的列所在的元素将作为一个整体另起一行排列。
8. 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕覆盖栅格类。
   如下图所示为栅格系统在多种屏幕上的应用说明（bootstrap3和bootstrap4中的栅格系统不一样）：

bootstrap3：

bootstrap4：

更多的CSS样式和组件的了解，可以到官方网站进行详细地了解。
Bootstrap官网

Bootstrap全局 CSS 样式

Bootstrap组件

JavaScript 插件