Bootstrap 是一个广泛使用的前端框架，可以帮助开发者快速搭建符合标准的页面布局。而 npm 包 bootstrap-layouts 的出现则更是提供了方便快捷的布局功能，让前端开发更为简洁高效。本文将介绍 npm 包 bootstrap-layouts 的使用方法、注意事项以及示例代码，帮助读者更好的掌握该工具的使用。
安装和导入 bootstrap-layouts
安装 bootstrap-layouts 只需要在控制台中输入 npm install bootstrap-layouts 或者 yarn add bootstrap-layouts 进行安装即可。安装完成后，需要在 html 中引入相应的 css、js 文件。
<link href="./node_modules/bootstrap-layouts/dist/css/bootstrap-layouts.min.css" rel="stylesheet" /> <script src="./node_modules/bootstrap-layouts/dist/js/bootstrap-layouts.min.js"></script>
使用 bootstrap-layouts
使用 bootstrap-layouts 首先需要在 html 页面中创建一个容器元素 div，利用 bootstrap-layouts 提供的 class 名称进行布局的设定。
基础布局
- 设置行
在容器元素中添加 class 名称 container-fluid row，可以先将页面视作一行。
<div class="container-fluid row"> </div>
- 设置列
可以使用 class 名称 col-* 来设置列的数量，在 css 中 col-* 中的 * 表示具体的数字。
<div class="container-fluid row">
<div class="col-4"></div>
<div class="col-8"></div>
</div>上述代码中，页面被分为 2 列，左侧占四分之一，右侧占八分之三。
- 嵌套布局
可以使用嵌套布局实现更为复杂的页面，使用类似 col-* 与 row 进行嵌套。
-- -------------------- ---- -------
---- ---------------------- -----
---- --------------
---- ------------
---- --------------------
---- --------------------
------
------
---- --------------------
------上述代码将页面分为两列，左侧占 6，右侧占 6。在左侧中又进行了嵌套布局，分为左右两列，宽度各占一半。
混合使用
bootstrap-layouts 还提供了一些其他的布局 class，可以与 col-* 配合使用，实现更为精细的页面布局。
- 使用
col-*搭配row justify-content-center，可以实现居中的效果。
<div class="container-fluid row justify-content-center">
<div class="col-6"></div>
</div>- 使用
d-none d-sm-block，可以隐藏元素，但在小于 sm（576px） 的屏幕上，该元素会显示。
<div class="container-fluid row">
<div class="col-6 d-none d-sm-block"></div>
<div class="col-12 col-sm-6"></div>
</div>上述代码中，当屏幕大小大于 576px 时，左侧元素不可见，右侧元素占满一行，当屏幕大小小于 576px 时，左侧元素占满一行，右侧元素不可见。
注意事项
- 需要在 html 文件中导入
css和js文件。 - 需要在命名中使用正确的 class 名称，否则布局效果可能出现问题。
- 尽量使用注释，提高代码的可读性。
- 了解 bootstrap-layouts 中的其他 class 名称，可参考官方文档。
示例代码
下面是一个完整的使用 bootstrap-layouts 进行页面布局的实例。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------ ---------------
----- -------------------------------------------------------------------------- ---------------- --
-------
---- -
----------------- --------
------- -----
-
----- -
----------------- --------
------- ------
-
------ -
----------------- --------
------- ------
-
--------
-------
------
---- ---------------------- --- ---------------------- ------
---- ------------- ----------
---- ------------------
---- ----------- -----
---- --------------- -----------------
---- --------------- -----------------
------
---- ---------- ------
---- ------------- ------ ------------------
---- ------------- -------- ------
---- --------------------
------
---- ------------- -------- ---------
---- ------------ -------------------
------
------
------
------
------- ---------------------------------------------------------------------------------
-------
-------结果：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c81ccdc64669dde4cef