Bootstrap 是一个非常流行的前端 UI 框架，其中的 Grid System（网格系统）可以简化我们在页面布局和响应式设计中的工作。npm 是 JavaScript 的包管理器，我们可以使用 npm 下载 Bootstrap 的 grid 系统，在项目中使用 Bootstrap 的网格系统的同时，也丰富了我们对 npm 包和前端工程化的理解。
本教程将介绍如何在项目中使用 npm 包 bootstrap-grid，并使用代码示例说明其使用方法和注意事项。
安装并导入包
首先，我们需要安装 bootstrap-grid 包，通过命令行进入项目文件夹，输入以下命令：
npm install bootstrap-grid
安装完毕后，在需要使用该包的文件中，通过以下方式导入该包：
import "bootstrap-grid";
如果你是使用的旧版浏览器（例如 IE11），则应该先引用 Bootstrap CSS，然后在需要的地方引用 bootstrap-grid：
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <script src="path/to/bootstrap-grid.js"></script>
使用 Bootstrap Grid System
bootstrap-grid 的使用方法和 Bootstrap 官网上介绍的一致，我们可以使用 .container 和 .row 分别创建父容器和行，该行内可包含多个列（.col-*），如下示例代码：
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">Column 1</div>
<div class="col-sm-6 col-md-4">Column 2</div>
<div class="col-sm-6 col-md-4">Column 3</div>
</div>
</div>在这个例子中，.container 是父容器，.row 是行，.col-sm-6 及 .col-md-4 是列。这意味着在较小的屏幕上，每行将最多包含两列，而在中型屏幕上，每行将最多包含三列。
我们还可以在某些列上使用 .order-* 和 .offset-* 类来调整列的顺序和偏移量。这些特殊类将在以下示例中介绍。
示例代码
下面是使用 bootstrap-grid 布局的示例代码，响应式地展示了三张图片和一些文本内容。
-- -------------------- ---- -------
---- ------------------
---- ------------
---- ---------------- ----------
---- ----------------------------------- --------------
------
---- ---------------- ----------
-----------
----------------
------
------
---- ------------
---- --------------- -------- -------------
---- ----------------------------------- ---------------
------
---- --------------- ----------
---- ----------------------------------- -----------------
------
------
---- ------------
---- ---------------- -------- ------- ------------
------------------
------
---- ---------------- -------- ------- ------------
---- ----------------------------------- ----------------
------
------
------在这个示例中，我们使用.col-sm-* 和 .col-md-* 类来指定在哪些屏幕尺寸下，每行应当展示多少列。我们还使用 .offset-md-4 类来使第一行的第二列向右偏移了 4 列，并使用 .order-* 类来调整了第三行的两个列的顺序。
总结
通过使用 npm 包 bootstrap-grid，我们可以方便地使用 Bootstrap 的网格系统来快捷地搭建网页布局和响应式设计。同时，我们也能更好地理解 npm 包和前端工程化的相关概念。希望这篇文章对你有所启发，谢谢阅读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c81ccdc64669dde4cae