Bootstrap

Bootstrap 是由 HTML、CSS 和 JavaScript 编写可复用代码的集合（包括全局样式、组件、插件等），它是一个前端框架，使用该框架能够快速开发出响应的网站（即适配 PC、平板和移动端的网站）。

Bootstrap 的一大核心就是响应式，即开发一套系统便可以适配不同尺寸的屏幕。它底层原理是使用媒体查询来为我们的布局和页面创建合理的断点 (Breakpoints)，然后根据这些合理的断点来给不同尺寸屏幕应用不同的 CSS 样式。

Bootstrap 4 设了 5 个断点来构建响应式系统，5 个断点分别为 Extra-Small、Small、Medium、Large、Extra large

响应式容器

Containers 容器是 Bootstrap 中最基本的布局元素，并且该布局支持响应式。在使用默认网格系统时是必需的。

Containers 容器用于包含、填充，有时也会作为内容居中使用。容器也是可以嵌套，但大多数布局不需要嵌套容器。

Bootstrap 带有三个不同的 Containers 容器：

• .container: 它在每个断点处会设置不同的 max-width。
• .container-fluid：在所有断点处都是 width: 100%。
• .container-{breakpoint}, 默认是 width: 100%，直到指定断点才会修改为响应的值。

网格系统

在我们在开发一个页面时，经常会遇到一些列表（例如，商品列表），这些列表通常都是通过行和列来排版。

Bootstrap 网格系统是用于构建移动设备优先的强大布局系统，可支持 12 列网格、5 个断点和数十个预定义类。

底层使用了强大的 flexbox 来构建弹性布局，并支持 12 列的网格布局。网格系统是使用 container、row 和 col 类来布局，并且布局是支持响应的。