Bootstrap 来自 Twitter，基于 HTML、CSS、JavaScript，是目前最受欢迎的前端框架，它简洁灵活，使得 Web 开发更加快捷。

在这里我们看下 bootstrap 以及一些 html、css 等相关的内容。

简介 #

Bootstrap 是由 Twitter 的 MARK OTTO 和 Jacob Thornton 所设计和建立，在开源后，社区惊人地活跃，代码版本进化非常快速，而且官方文档质量极其高，并涌现了许多基于 Bootstrap 建设的网站，其界面清新、简洁，排版利落大方。

目前的最新版本已经快到 V4 了，可以参考 www.getbootstrap.com，另外可以查看中文网站 Bootstrap 中文网 ，其中后者包括了一些常用的网站，比如编码规范、jQuery API 中文文档、经典的网站实例等等。

安装 #

可以直接从上述的中文网站中下载 《用于生产环境的 Bootstrap》，以 V3 为例，解压后的目录结构如下：

对于 Nginx，可以直接将 root 指向该目录即可。

布局 #

断点 #

断点是可自定义的宽度，用于确定 Bootstrap 中如何跨设备或视口 (viewport) 大小执行相应布局，这样可以通过媒体查询有条件的应用样式，包括了六个默认断点。

其定义可以从 SASS 中的 _variables.scss 文件中查看，用户能够进行自定义，而且每个断点都可以用来容纳 12 倍的容器。

然后可以通过如下方式进行布局。

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }

实际上最终会转换为 @media (min-width: 576px) { ... } 这种方式。

间距 #

通常可以通过 mb-3 类似的方式配置，对于 xs 使用固定格式 {property}{sides}-{size} 命名，而对于 sm md lg xl xxl 则使用 {property}{sides}-{breakpoint}-{size} 格式命名。

//----- property
m - 设定margin
p - 设定padding
//----- sides
t - 设定margin-top或是padding-top
b - 设定margin-bottom或是padding-bottom
s - 在LTR设定margin-left或是padding-left，RTL设定margin-right或是padding-right
e - 在LTR设定margin-right or padding-right，RTL设定margin-left或是padding-left
x - 同时设定*-left和*-right
y - 同时设定*-top和*-bottom
blank - 空白-同时设定margin或padding在元素的四个边缘
//----- size
0 - 设定margin或是padding为0
1 - （预设）设定margin或是padding为$spacer * .25
2 - （预设）设定margin或是padding为$spacer * .5
3 -（预设）设定margin或是padding为$spacer
4 - （预设）设定margin或是padding为$spacer * 1.5
5 - （预设）设定margin或是padding为$spacer * 3
auto - 设定margin为auto

参考 #

• Bootstrap Versions 在 5.x 版本中已经提供了很多的配置项，基本可以进行定制。