Bootstrap每天必学之导航

Bootstrap每天必学之导航攻略

什么是导航？

在网页中，导航（Navigation）是指让用户可以快速方便地浏览网站内容，方便找到自己需要的信息。

Bootstrap导航组件

Bootstrap提供了多种导航组件，用于创建不同类型的导航。常见的导航组件包括：

1. 导航栏（Navbar）：可用于网站的顶部或底部，通常包含网站的Logo、导航链接和搜索框等内容。
2. 标签页（Tabs）：用于切换多个内容区域。
3. 面包屑导航（Breadcrumbs）：用于显示当前页面在网站内的位置。
4. 分页（Pagination）：用于将大量内容进行分页，方便用户查看。
5. 工具栏（Toolbar）：通常放置在页面顶部或底部，用于展示一些操作按钮。

导航栏（Navbar）

基本用法

导航栏在网站中是非常常见的组件，Bootstrap也提供了丰富的样式和功能。最简单的导航栏可以使用以下代码实现：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
</nav>

以上代码会渲染出一个白色的导航栏，并在左侧显示一个“Logo”链接。当然，这个导航栏还不能够真正地帮助用户浏览网站，我们需要继续完善它。

添加导航链接

要在导航栏中添加导航链接，我们需要使用Bootstrap提供的<ul>和<li>元素，通过给<li>元素添加nav-item类和<a>元素添加nav-link类来实现。以下是一个简单的例子：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <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>
  </ul>
</nav>

以上代码添加了三个导航链接：首页、分类和关于我们。现在，我们的导航栏已经可以用于导航站点内的不同页面了。

响应式导航栏

默认情况下，Bootstrap导航栏只会在大屏幕上显示所有的导航链接。如果屏幕宽度变小，导航栏的链接可能会被挤在一起，导致用户体验不佳。为了解决这个问题，Bootstrap提供了响应式导航栏。

响应式导航栏会在移动端将导航链接隐藏，并在右侧显示一个“三条杠”图标，点击该图标可以展开导航链接。为了实现响应式导航栏，我们只需要给导航栏添加navbar-toggler类，并在导航链接上添加data-toggle="collapse"和data-target="#navbarNav"属性即可。以下是一个示例代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我们</a>
      </li>
    </ul>
  </div>
</nav>

以上示例代码添加了一个“三条杠”图标，并在移动端可以正常展示导航栏链接。同时，我们也可以通过添加navbar-dark类来改变导航栏的颜色。

分页（Pagination）

基本用法

分页组件可以用于将大量内容进行分页，方便用户进行查看。Bootstrap的分页组件非常简单，只需要使用<ul>和<li>元素组合即可。以下是一个示例代码：

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#">上一页</a>
    </li>
    <li class="page-item active"><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="#">下一页</a>
    </li>
  </ul>
</nav>

以上代码创建了一个带有上一页、下一页、以及三个页码的分页组件。同时，我们也可以通过添加disabled类来禁用某个链接。

改变分页尺寸

对于一些数据量更大的网页，我们可能需要修改分页的尺寸，以便于展示更多的页面链接。Bootstrap提供了pagination-lg和pagination-sm类用于修改分页组件的大小。以下是一个示例代码：

<nav aria-label="Page navigation example">
  <ul class="pagination pagination-lg">
    <li class="page-item">
      <a class="page-link" href="#">上一页</a>
    </li>
    <li class="page-item active"><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="#">下一页</a>
    </li>
  </ul>
</nav>

以上代码创建了一个尺寸为pagination-lg的分页组件。我们也可以使用pagination-sm来创建一个更小尺寸的分页组件。

以上就是Bootstrap导航和分页组件的基本用法和示例，希望能帮助你更好地使用Bootstrap来创建网站。