Bootstrap5 小工具学习笔记

Bootstrap 是一个流行的前端框架，提供了许多小工具，使得我们能够更加方便地开发响应式 Web 应用程序。

在本文中，我们将学习一些 Bootstrap 提供的小工具，并给出实例。

工具1：Badge 徽章

徽章是一种用于显示状态信息的小工具。在 Bootstrap5 中，可以使用以下代码创建徽章：

htmlCopy Code
<span class="badge bg-primary">New</span>

上述代码将创建一个带有背景颜色为 primary 的徽章，并在徽章中显示 "New" 字符串。通过更改 bg-primary 类可以更改徽章的背景颜色。

工具2：Breadcrumb 面包屑导航

面包屑导航是一种常见的导航模式，可帮助用户更好地理解其位置。在 Bootstrap5 中，可以使用以下代码创建面包屑导航：

htmlCopy Code
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

上述代码将创建一个包含三个面包屑导航项目的面包屑导航。其中第三个导航项目被设置为当前页面。通过更改 breadcrumb-item 类可以更改导航项目的样式。

工具3：Accordion 折叠面板

折叠面板是一种常见的 UI 控件，可用于显示可折叠内容。在 Bootstrap5 中，可以使用以下代码创建折叠面板：

htmlCopy Code
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit nisl eget elit pharetra mattis.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        Sed non urna quis tortor imperdiet venenatis quis at risus. Praesent euismod bibendum quam, in varius mauris sodales eget.
      </div>
    </div>
  </div>
</div>

上述代码将创建一个包含两个折叠面板项目的折叠面板。通过更改 accordion-item 和 accordion-button 类可以更改折叠面板项目和按钮的样式。

工具4：Modal 模态框

模态框是一种常见的 UI 控件，用于在 Web 应用程序中显示活动。在 Bootstrap5 中，可以使用以下代码创建模态框：

htmlCopy Code
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</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">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Modal body text goes here.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

上述代码将创建一个按钮，当用户单击该按钮时，将打开一个模态框。通过更改 btn、modal, modal-header 等类可以更改模态框的样式。

以上就是我们介绍的 Bootstrap 提供的小工具中的部分实例。通过这些小工具，我们能够更加方便地构建响应式 Web 应用程序。