Bootstrap入门书籍之（五）导航条、分页导航

Bootstrap入门书籍之（五）导航条、分页导航攻略

概述

本文将详细讲解Bootstrap中导航条和分页导航的使用方法。导航条是网站中常用的组件之一，用于导航不同页面或部分，而分页导航则用于分割长列表的内容并提供导航功能。

导航条的基本用法

HTML结构

首先，我们需要在HTML文件中添加导航条的基本结构。一般而言，导航条由一个<nav>元素和一个包含导航链接的<ul>元素组成。示例代码如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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>
    <li class="nav-item">
      <a class="nav-link" href="#">产品</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">联系我们</a>
    </li>
  </ul>
</nav>

样式和布局

接下来，我们可以使用Bootstrap提供的类来给导航条添加样式和布局。常用的类包括：navbar、navbar-expand-*、navbar-light等。通过添加这些类，我们可以实现不同形态和颜色的导航条。示例代码如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <ul class="navbar-nav">
    <!-- 导航链接 -->
  </ul>
</nav>

我们可以根据需要自定义导航条的样式，例如通过设置背景颜色和文本颜色等。

分页导航的基本用法

HTML结构

分页导航的基本结构同样由一个<nav>元素和一个包含分页链接的<ul>元素组成。示例代码如下：

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </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="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

样式和布局

分页导航的样式和布局同样可以通过添加类来实现。常用的类包括：pagination、page-item、page-link等。我们可以根据需要来自定义分页导航的样式。

示例说明

示例一：带下拉菜单的导航条

有时候，我们需要在导航条上添加下拉菜单，以提供更多的导航选项。示例代码如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        产品
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">产品1</a>
        <a class="dropdown-item" href="#">产品2</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">更多产品</a>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">联系我们</a>
    </li>
  </ul>
</nav>

示例二：分页导航的使用

分页导航常用于长列表的分页展示，让用户可以方便地切换页码。示例代码如下：

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </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="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

以上是关于Bootstrap中导航条和分页导航的基本用法和示例说明。你可以根据需要自定义样式和布局。详细了解更多关于Bootstrap导航组件的用法，可以参考Bootstrap官方文档。