Bootstrap组件写导航栏+折叠菜单+轮播图+下拉菜单+分页

Bootstrap是一个流行的前端框架，它提供了大量预设的样式和组件，使得快速构建美观且功能丰富的网页变得简单。以下是使用Bootstrap编写常见组件的示例：

**1. 导航栏（Navbar）**: 使用`<nav>`标签配合Bootstrap提供的`.navbar`类，可以创建一个包含标题和链接的导航栏。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <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="#">Home</a></li>
      <!-- 更多链接... -->
    </ul>
  </div>
</nav>

**2. 折叠菜单（Dropdown Menu）**: 使用`.dropdown`和`.dropdown-menu`配合`<a>`标签创建下拉菜单。

<a href="#" class="btn btn-secondary dropdown-toggle" role="button" data-bs-toggle="dropdown">Dropdown</a>
<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <!-- 更多选项... -->
</div>

**3. 轮播图（Carousel）**: 使用`.carousel`和`.carousel-item`展示一组幻灯片效果。

<div class="carousel slide" id="myCarousel" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
    <!-- 更多滑动项... -->
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="image1.jpg" alt="...">
    </div>
    <!-- 其他滑动项... -->
  </div>
  <a class="carousel-control-prev" href="#myCarousel" data-bs-direction="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" data-bs-direction="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>

**4. 下拉菜单（Dropdown）**: 已在上面的折叠菜单部分详细解释过。

**5. 分页（Pagination）**: 使用`.pagination`类展示一系列的页码链接。

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#" tabindex="-1">Prev</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="#">Next</a></li>
  </ul>
</nav>