简介
Bootstrap 是一个非常流行的前端框架，它为开发者提供了一系列的组件和工具，能够快速构建美观、响应式的网站。而 bootstrap-space 是一个基于 Bootstrap 的扩展包，它可以帮助开发者更加高效地排版页面，使得页面看上去更加整齐、清晰。
本文将介绍 bootstrap-space 的基本使用方法，包括安装、导入、快速上手等。
安装
bootstrap-space 可以通过 npm 进行安装，只需要执行以下命令即可：
npm install bootstrap-space
导入
可以直接将 bootstrap-space 导入到项目中的 CSS 文件中：
<link href="./node_modules/bootstrap-space/dist/bootstrap-space.min.css" rel="stylesheet">
快速上手
bootstrap-space 的主要功能是为开发者提供了一些额外的间距样式。下面是一些示例代码，展示了如何使用 bootstrap-space 进行间距控制：
1. 距离顶部 2rem：
<div class="mt-2rem"></div>
2. 距离底部 1rem：
<div class="mb-1rem"></div>
3. 将两个元素之间的距离拉大到 3rem：
<div class="my-3rem"></div> <div class="my-3rem"></div>
4. 将上面的元素间距拉大到 4rem，下面的元素间距拉大到 2rem：
<div class="mt-4rem"></div> <div class="mb-2rem"></div>
5. 将左边的元素间距拉大到 2rem，右边的元素间距拉大到 5rem：
<div class="ml-2rem"></div> <div class="mr-5rem"></div>
更多的间距样式可以在官方文档中找到。
结语
如此方便的扩展包，使得我们在构建页面时更加高效快捷。bootstrap-space 的使用方法简单明了，只需一些基本的样式就可以搞定那些琐碎的间距问题，提高效率、减少出错，建议开发者都进行尝试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005523981e8991b448cfc1c