1. 什么是 bootstrap3-grid？
Bootstrap 是一个流行的 CSS 框架，能够帮助我们快速地开发出美观且响应式的网站。其中，Bootstrap 的“网格系统”（Grid System）是其最基础的组件之一，经常被用于实现页面布局和排版。
而 bootstrap3-grid 是一个基于 Bootstrap 3 Grid System 的 npm 包，提供了更方便的使用方式和更加精细的配置。
2. 安装 bootstrap3-grid
在开始使用 bootstrap3-grid 前，需要先进行安装。可以通过以下命令使用 npm 进行安装：
npm install bootstrap3-grid
安装完成后，我们就可以开始使用 bootstrap3-grid 提供的功能了。
3. 使用 bootstrap3-grid
3.1. 使用样例
下面是一个使用 bootstrap3-grid 的样例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------- - ---- ---------------
----- ---------------- ---------------------------------------------------------------------------------------
-------
------- -
------- --- ----- -----
-------- -----
----------- -------
-
--------
-------
------
---- ------------------
---- ------------
---- -----------------
---- ----------------------
------
---- -----------------
---- ----------------------
------
---- -----------------
---- ----------------------
------
------
------
------- -----------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------
-------
-------在这个样例中，我们定义了一个 class 名称为“my-box”，然后使用 bootstrap3-grid 来构建一个宽度为 12 的网格系统，将三个块元素 A、B、C 平均分配到三等分宽度的列中。样例最终呈现的效果如下图所示：
3.2. 配置项
bootstrap3-grid 除了提供和 Bootstrap 3 相同的 class 名称外，还增加了一些新的 class 名称和配置项。下面是一些常用的 class 名称和配置项：
1）. .col-{breakpoint}-{size}-{offset} / .col-{size}-{offset}
这些 class 名称用于在不同的屏幕尺寸下控制元素的宽度和偏移量。其中，{breakpoint} 可选值有“xs”、“sm”、“md”、“lg”、“xl”，表示屏幕尺寸从小到大的不同断点；{size} 可选值有“1”至“12”，表示元素所占用的列数；{offset} 可选值有“1”至“12”，表示元素的偏移量。
2）. .col-{breakpoint}-{size}-push / .col-{size}-push 和 .col-{breakpoint}-{size}-pull / .col-{size}-pull
这些 class 名称用于调整元素在不同位置之间的顺序。其中，.col-{size}-push 和 .col-{size}-pull 可以省略 {breakpoint} 部分，表示在所有屏幕尺寸下控制元素的顺序。.col-{size}-push 表示将元素向后推移一定的列数，.col-{size}-pull 表示将元素向前拉拽一定的列数。
3）. .clearfix
这个 class 名称用于清除自身元素的浮动状态。
4）. .container-fluid
这个 class 名称表示一个宽度为 100% 的容器。
5）. .row-eq-height
这个 class 名称用于创建同一行内高度相等的元素。
4. 总结
通过本文的介绍和样例演示，相信读者已经了解了如何使用 bootstrap3-grid 这个 npm 包来简化 Bootstrap 3 网格系统的使用，从而更快捷地实现页面布局和排版。同时，掌握 bootstrap3-grid 提供的 class 名称和配置项，可以更精细地控制页面元素的呈现效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551af81e8991b448cf0da