【前端】Bootstrap：组件（Components）

Bootstrap 是一个流行的前端开发框架，它提供了丰富的 UI 组件，使得开发者可以轻松创建功能完善且外观一致的响应式网页。通过这些预定义的组件，开发者可以快速构建常用的界面元素，例如按钮、导航栏、卡片、模态框等，而无需从头开始编写 CSS 或 JavaScript。

本文将详细介绍 Bootstrap 中的组件，包括每种组件的功能、使用方法、常见的应用场景和一些高级的定制技巧。

什么是 Bootstrap 组件

Bootstrap 的组件是一组预定义的 UI 元素，这些元素通过 Bootstrap 提供的 HTML、CSS 和 JavaScript 来实现。组件是页面构建的基础，它们涵盖了用户界面的各个方面，从导航到表单、从模态框到提示框等等。

这些组件是响应式设计的核心，能够自适应不同的设备屏幕，并且能够通过少量的自定义代码调整其样式和行为。

Bootstrap 的组件大致分为以下几类：

基础 UI 元素（如按钮、图标等）
导航和布局（如导航栏、分页等）
表单组件（如输入框、选择框等）
信息反馈组件（如警告框、提示框等）
弹出层组件（如模态框、工具提示等）

接下来，我们将深入讲解其中一些常用的组件。

按钮（Buttons）

按钮是网站中最常见的交互元素之一，Bootstrap 提供了多种样式的按钮，并且允许通过类名自定义它们的外观和行为。

基础按钮

Bootstrap 的按钮通过 .btn 类实现，结合不同的颜色类可以快速生成各种样式的按钮。

<button type="button" class="btn btn-primary">Primary 按钮</button>
<button type="button" class="btn btn-secondary">Secondary 按钮</button>
<button type="button" class="btn btn-success">Success 按钮</button>
<button type="button" class="btn btn-danger">Danger 按钮</button>

按钮大小

可以通过 .btn-lg 和 .btn-sm 类改变按钮的大小，以适应不同的设计需求。

<button type="button" class="btn btn-primary btn-lg">大按钮</button>
<button type="button" class="btn btn-primary btn-sm">小按钮</button>

按钮组（Button Groups）

按钮组组件可以将多个按钮放在一起，形成一组操作按钮。

<div class="btn-group"><button type="button" class="btn btn-primary">左</button><button type="button" class="btn btn-primary">中</button><button type="button" class="btn btn-primary">右</button>
</div>

按钮工具栏

通过将多个按钮组组合在一起，可以创建一个按钮工具栏。

<div class="btn-toolbar"><div class="btn-group me-2"><button type="button" class="btn btn-secondary">1</button><button type="button" class="btn btn-secondary">2</button><button type="button" class="btn btn-secondary">3</button></div><div class="btn-group"><button type="button" class="btn btn-secondary">4</button><button type="button" class="btn btn-secondary">5</button></div>
</div>

标签（Badges）

标签用于显示额外的上下文信息，常用在按钮或列表项上。

基础标签

<h1>标题 <span class="badge bg-secondary">新</span></h1>

带数字的标签

常见的场景是显示未读消息数量，通常用于邮件应用程序的通知或社交应用程序中的消息提示。

<button type="button" class="btn btn-primary">消息 <span class="badge bg-light text-dark">4</span>
</button>

圆角标签

通过 .rounded-pill 类可以将标签的形状变为圆角。

<span class="badge rounded-pill bg-primary">圆角标签</span>

导航栏（Navbar）

导航栏是用户在网站上进行导航的核心部分。Bootstrap 提供了一个灵活且强大的导航栏组件，支持响应式设计、下拉菜单、品牌标志等功能。

基础导航栏

以下是一个基本的导航栏示例，使用<nav>元素包裹，并添加.navbar类和适当的颜色类。

<nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="#">品牌</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">首页</a></li><li class="nav-item"><a class="nav-link" href="#">关于</a></li></ul></div>
</nav>

响应式导航栏

navbar-expand-lg表示导航栏在大屏幕设备上展开，但在小屏幕设备上会折叠为一个按钮。当屏幕尺寸缩小时，导航项将自动隐藏在折叠按钮中，点击按钮后展开

导航栏颜色

Bootstrap 提供了不同的导航栏颜色类，例如 .navbar-light、.navbar-dark 以及可以结合不同的背景颜色类（如 bg-primary、bg-dark）。

<nav class="navbar navbar-dark bg-dark"><a class="navbar-brand" href="#">黑色导航栏</a>
</nav>

固定导航栏

使用 .fixed-top 或 .fixed-bottom 类可以将导航栏固定在页面的顶部或底部，随着页面滚动保持其位置不变。

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"><a class="navbar-brand" href="#">固定导航栏</a>
</nav>

下拉菜单（Dropdowns）

下拉菜单是一个隐藏的菜单，当用户点击或悬停时会展示更多选项。Bootstrap 提供了方便的方式来创建下拉菜单。

基础下拉菜单

<div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">下拉菜单</button><ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"><li><a class="dropdown-item" href="#">操作 1</a></li><li><a class="dropdown-item" href="#">操作 2</a></li><li><a class="dropdown-item" href="#">操作 3</a></li></ul>
</div>

带分隔线的下拉菜单

可以使用 <hr class="dropdown-divider"> 在下拉菜单中添加分隔线，用于将不同组的菜单项分开。

<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"><li><a class="dropdown-item" href="#">操作 1</a></li><hr class="dropdown-divider"><li><a class="dropdown-item" href="#">操作 2</a></li><li><a class="dropdown-item" href="#">操作 3</a></li>
</ul>

右对齐的下拉菜单

使用 .dropdown-menu-end 类可以将下拉菜单内容右对齐。

<div class="dropdown"><button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">右对齐菜单</button><ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton"><li><a class="dropdown-item" href="#">操作 1</a></li><li><a class="dropdown-item" href="#">操作 2</a></li></ul>
</div>

分页（Pagination）

分页组件用于在多个页面之间导航，通常用于展示大量数据时分页显示。

基础分页

<nav aria-label="分页导航"><ul class="pagination"><li class="page-item"><a class="page-link" href="#">上一页</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">下一页</a></li></ul>
</nav>

分页大小

可以通过 pagination-lg 和 pagination-sm 类控制分页按钮的大小。

<nav aria-label="分页导航"><ul class="pagination pagination-lg"><li class="page-item"><a class="page-link" href="#">上一页</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">下一页</a></li></ul>
</nav>

禁用和激活状态

使用 .disabled 类可以禁用分页按钮，使用 .active 类标记当前页。

<nav aria-label="分页导航"><ul class="pagination"><li class="page-item disabled"><a class="page-link" href="#">上一页</a></li><li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">下一页</a></li></ul>
</nav>

卡片（Cards）

卡片组件是一个非常灵活和强大的 UI 元素，能够展示内容块，如文章、图片、列表等。卡片组件支持各种扩展功能，如嵌套图片、标题、按钮、列表等。

基础卡片

<div class="card" style="width: 18rem;"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">卡片标题</h5><p class="card-text">这是卡片内容的示例。</p><a href="#" class="btn btn-primary">点击这里</a></div>
</div>

卡片组

卡片组允许将多个卡片并排显示，它们会自动调整大小以适应屏幕宽度。

<div class="card-group"><div class="card"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">卡片 1</h5><p class="card-text">一些示例文本。</p></div></div><div class="card"><img src="..." class="card-img-top" alt="..."><div class="card-body"><h5 class="card-title">卡片 2</h5><p class="card-text">一些示例文本。</p></div></div>
</div>

表单（Forms）

表单是用户与网站交互的重要途径。Bootstrap 提供了各种样式和布局的表单组件，支持输入框、选择框、单选框、复选框等。

基础表单

<form><div class="mb-3"><label for="exampleInputEmail1" class="form-label">电子邮件地址</label><input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"><div id="emailHelp" class="form-text">我们不会分享您的电子邮件。</div></div><div class="mb-3"><label for="exampleInputPassword1" class="form-label">密码</label><input type="password" class="form-control" id="exampleInputPassword1"></div><button type="submit" class="btn btn-primary">提交</button>
</form>

水平表单

水平表单通过将标签与输入框并排显示，优化了大屏设备上的表单布局。

<form class="row g-3"><div class="col-auto"><label for="inputEmail" class="col-form-label">电子邮件</label></div><div class="col-auto"><input type="email" class="form-control" id="inputEmail" placeholder="请输入您的邮箱"></div><div class="col-auto"><button type="submit" class="btn btn-primary mb-3">提交</button></div>
</form>

进度条（Progress）

进度条用于展示任务的完成进度，通常在表单提交、文件上传或其他需要用户等待的任务中使用。

基础进度条

<div class="progress"><div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>

多颜色进度条

通过在同一个进度条中添加多个 .progress-bar，可以创建多种颜色的进度条。

<div class="progress"><div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div><div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div><div class="progress-bar bg-danger" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

动态进度条

添加 .progress-bar-animated 类可以让进度条具备动态效果。

<div class="progress"><div class="progress-bar progress-bar-animated" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

模态框（Modals）

模态框是页面上的弹出层，用于显示重要内容或收集用户信息，而不会让用户离开当前页面。它通过 JavaScript 实现，可以轻松地展示和隐藏。

基础模态框

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">启动模态框
</button><!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">模态框标题</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button></div><div class="modal-body">这是模态框的内容。</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存更改</button></div></div></div>
</div>

模态框的应用场景

模态框通常用于以下场景：

显示重要的消息或确认信息。
收集用户输入（如表单或设置）。
展示额外的内容，而不影响当前页面的布局。

警告框（Alerts）

警告框用于向用户显示重要的通知或信息提示。Bootstrap 提供了多种颜色的警告框，分别代表不同的提示类型，如成功、错误、警告、信息等。

基础警告框

<div class="alert alert-warning" role="alert">这是一个警告提示框！
</div>

可关闭的警告框

警告框可以添加关闭按钮，允许用户在查看提示后关闭它。

<div class="alert alert-warning alert-dismissible fade show" role="alert">这是一个带有关闭按钮的警告框！<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="关闭"></button>
</div>

工具提示（Tooltips）

工具提示是一个小弹框，当用户悬停在某个元素上时，会显示额外的信息或提示。工具提示通过 JavaScript 实现，可以轻松添加到任何元素上。

基础工具提示

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="工具提示">悬停显示提示
</button><script>var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {return new bootstrap.Tooltip(tooltipTriggerEl);});
</script>

工具提示的方向

工具提示可以通过 data-bs-placement 属性指定弹出的方向（如：top、bottom、left、right）。

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="右侧提示">悬停显示右侧提示
</button>

总结

Bootstrap 提供的组件极大地方便了开发者快速构建现代网页。通过这些预定义的 UI 元素，你可以轻松地创建美观且功能完善的用户界面。同时，这些组件具有高度的灵活性，可以根据具体需求进行调整和定制。