Bootstrap4-utilities 是一款基于 Bootstrap4 样式的扩展类库，用于加快前端开发的速度。该库提供了大量的样式类，可以很方便地进行样式渲染。本文将详细介绍该库的使用教程，并提供示例代码。
安装
在使用 Bootstrap4-utilities 库之前，需要先进行安装。可以通过 npm 的方式进行安装。
npm install bootstrap4-utilities
使用
使用 Bootstrap4-utilities 需要在 HTML 文件中引入样式表。
<head>
<link rel="stylesheet" href="node_modules/bootstrap4-utilities/dist/css/bootstrap4-utilities.min.css">
</head>然后就可以开始使用样式类了。下面是一些使用示例：
Flexbox 样式
水平居中
<div class="d-flex justify-content-center">
<div>居中内容</div>
</div>垂直居中
<div class="d-flex align-items-center">
<div>居中内容</div>
</div>水平垂直居中
<div class="d-flex justify-content-center align-items-center">
<div>居中内容</div>
</div>边框样式
边框距离
<div class="border p-3">内容</div>
圆角边框
<div class="rounded p-3">内容</div>
阴影边框
<div class="shadow p-3">内容</div>
文字样式
字体颜色
<div class="text-success">成功文字</div> <div class="text-danger">失败文字</div>
字体大小
<div class="fs-5">5 号字体</div> <div class="fs-6">6 号字体</div>
字体加粗
<div class="fw-bold">加粗字体</div>
背景样式
背景颜色
<div class="bg-primary p-3">蓝色背景</div> <div class="bg-secondary p-3">灰色背景</div>
背景透明度
<div class="bg-primary bg-opacity-50 p-3">50% 透明蓝色背景</div>
总结
Bootstrap4-utilities 是一个十分实用的前端样式类库，可以帮助我们快速地开发出美观、规范的前端页面。本文介绍了该库的安装和使用方法，并提供了一些常用的样式类使用示例。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c83ccdc64669dde4dfb