在前端开发中，响应式布局是必不可少的。而 Bootstrap 响应式网格系统可以轻松地实现强大、灵活的网页布局，同时还支持大量的样式和组件。但是，在某些场景下，你可能需要更加自由定制的网格系统。这时，可以借助于 npm 包 bootstrap-regrid 来实现。
安装
使用 npm 命令来安装 bootstrap-regrid：
--- ------- ----------------
使用
在 HTML 页面中导入 Bootstrap 样式和 bootstrap-regrid 的 CSS 文件。通常情况下，bootstrap-regrid 的 CSS 文件需要在 Bootstrap 样式文件之后导入。
---- -- --------- ---- --- ----- ---------------- --------------------------------------------------------------------------------------- ---- -- ---------------- - --- -- --- ----- ---------------- ----------------------------------------------------------
启用 bootstrap-regrid 的网格系统仅需要按照 Bootstrap 常规的方式编写 HTML 代码。唯一的区别是，使用 regrid 类来代替 Bootstrap 的 row 类：
---- --------------- ---- ------------------------ ---- ------------------------ ---- ------------------------ ------
与 Bootstrap 响应式网格系统类似，col-sm-4 表示这个元素在小屏幕上占据 4 格的宽度。通过这样的类名组合，可以精确控制元素在不同屏幕尺寸上的布局。
高级用法
自定义网格系统
如果你需要更加自由度的网格系统，可以通过 regrid-define() 函数进行定义。例如，以下代码定义了一个具有 16 列的网格系统：
------------- - ------------- --- - ------------- ---- - ------ --------- - ----------------- - --- -
通过 regrid-define() 函数，我们可以动态地创建自定义的网格系统。以下代码定义了一个具有 16 列的网格系统：
------ - ------------ - ---- -------------------
--------------
--------------- -
--------------- --
-
---嵌套网格
Bootstrap 的响应式网格允许嵌套。同样地，bootstrap-regrid 也支持嵌套网格。例如，以下代码展示了一个三行三列的网格系统，其中第二列又嵌套了两行两列的网格系统：
---- ---------------
---- ------------------------
---- -----------------
---- ---------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
------
------
---- ------------------------
---- ------------------------
---- ------------------------
---- ------------------------
---- ------------------------
---- ------------------------
------总结
本文介绍了如何使用 bootstrap-regrid 作为一个更加自由度的响应式网格系统。和 Bootstrap 的网格系统一样，bootstrap-regrid 同样适用于大部分场景下。另外，我们还介绍了如何定义自己的网格系统、如何实现嵌套网格等进阶用法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c82ccdc64669dde4d4b