AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Bootstrap 5 保姆级教程（九）：折叠 & 导航

2024-04-30 65
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Bootstrap 5 保姆级教程（九）：折叠 & 导航

一、折叠

Bootstrap5 折叠可以很容易的实现内容的显示与隐藏。

data-bs-toggle 和 data-bs-target 是用于定义组件行为和目标元素的自定义数据属性。

1、data-bs-toggle 属性：

  • 用于定义组件的行为，指示组件在何时触发。
  • 可以设置的值取决于具体的组件类型，如 "collapse"（折叠菜单）、"modal"（模态框）、"tab"（标签页）等。
  • data-bs-toggle="collapse" 用于触发折叠菜单的展开与折叠。
  • data-bs-toggle="modal" 用于触发模态框的显示与隐藏。
  • data-bs-toggle="tab" 用于触发标签页的切换。

2、data-bs-target 属性：

  • 用于指定组件的目标元素或目标选择器。
  • 目标元素可以是一个 CSS 选择器，用于标识要操作的具体元素。
  • 也可以是一个指定的元素 ID，以 # 开头，如 data-bs-target="#myModal"。
  • data-bs-target 属性与 data-bs-toggle 属性一起使用，用于将组件行为与目标元素关联起来。

以下实例中，当按钮被点击时，data-bs-toggle="collapse" 属性触发了折叠菜单的行为，data-bs-target="#demo" 属性指定了折叠菜单的目标元素为 ID 为 demo 的

元素。

<div class="container mt-3">
  <h2>简单的折叠</h2>
  <p>点击按钮内容会再显示与隐藏之间切换。</p>
  <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">折叠</button>
  <div id="demo" class="collapse">
    这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。
  </div>
</div>

默认情况下折叠的内容是隐藏的，你可以添加 .show 类让内容默认显示:

<div class="container mt-3">
  <h2>简单的折叠</h2>
  <a href="#demo" class="btn btn-primary" data-bs-toggle="collapse">简单的折叠</a>
  <div id="demo" class="collapse show">
    这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。
  </div>
</div>

二、导航

2.1 创建导航

如果你想创建一个简单的水平导航栏，可以在

    元素上添加 .nav类，在每个
  • 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类:
<div class="container mt-3">
  <h2>导航</h2>
  <p>简单的水平导航:</p>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

2.2 导航对齐方式

.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐

<div class="container mt-3">
  <h2>导航</h2>
  <p>左对齐导航 (默认):</p>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
  
  <p class="text-center">居中对齐导航:</p>
  <ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
    
  <p class="text-end">右对齐导航:</p>
  <ul class="nav justify-content-end">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

2.3 垂直导航

.flex-column 类用于创建垂直导航：

<div class="container mt-3">
  <h2>垂直导航</h2>
  <p>.flex-column 类用于创建垂直导航：</p>
  <ul class="nav flex-column">
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

2.4 选项卡

使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记

<div class="container mt-3">
  <h2>选项卡</h2>
  <p>选项卡导航:</p>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

2.5 胶囊导航

.nav-pills 类可以将导航项设置成胶囊形状

<div class="container mt-3">
  <h2>胶囊</h2>
  <p>胶囊导航:</p>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

2.6 导航等宽

.nav-justified 类可以设置导航项齐行等宽显示

<div class="container mt-3">
  <h2>导航等宽</h2>
  <p>.nav-justified 类可以设置导航项齐行等宽显示。</p>
  <ul class="nav nav-pills nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul><br>
 
  <p>Justified tabs:</p>
  <ul class="nav nav-tabs nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

2.7 胶囊下拉菜单

<div class="container mt-3">
  <h2>胶囊导航带下拉菜单</h2>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Link 1</a></li>
        <li><a class="dropdown-item" href="#">Link 2</a></li>
        <li><a class="dropdown-item" href="#">Link 3</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>


2.8 选项卡下拉菜单

<div class="container mt-3">
  <h2>选项卡下拉菜单</h2>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a></div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</div>

2.9 动态选项卡

如果你要设置选项卡是动态可切换的，可以在每个链接上添加 data-bs-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类，对应选项卡的内容的

标签使用 .tab-content 类

如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类:

<div class="container mt-3">
  <h2>选项卡切换</h2>
  <br>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
    </li>
  </ul>
 
  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>
</div>


2.10 胶囊状动态选项卡

胶囊状动态选项卡只需要将以上实例的代码中 data-bs-toggle 属性设置为 data-bs-toggle="pill":

<div class="container mt-3">
  <h2>胶囊选项卡切换</h2>
  <br>
  <!-- Nav pills -->
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="pill" href="#menu1">Menu 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 2</a>
    </li>
  </ul>
 
  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
  </div>
</div>




文章标签：
前端开发
关键词：
Bootstrap导航
Bootstrap折叠
Bootstrap教程
Bootstrap教程导航
Bootstrap折叠导航
香甜可口草莓蛋糕
目录
相关文章
游客ogeeqvh5vfa5q
|
5天前
|
前端开发
Bootstrap5 折叠1
Bootstrap5 折叠功能通过 `data-bs-toggle` 和 `data-bs-target` 属性轻松实现内容的显示与隐藏。
游客ogeeqvh5vfa5q
17 2
游客ogeeqvh5vfa5q
|
3天前
|
前端开发
Bootstrap5 导航5
示例展示了两种导航菜单：胶囊式和选项卡式，均包含活动链接、下拉菜单（含三个子链接）及禁用链接。这些菜单使用 Bootstrap 类实现响应式设计。
游客ogeeqvh5vfa5q
10 0
游客ogeeqvh5vfa5q
|
3天前
Bootstrap5 导航4
`.nav-pills` 类可将导航项设置为胶囊形状，使界面更加美观。通过添加 `.nav-justified` 类，可以使导航项等宽对齐，适用于不同屏幕尺寸的布局。示例代码展示了如何使用这些类创建胶囊导航和等宽导航。
游客ogeeqvh5vfa5q
9 0
游客ogeeqvh5vfa5q
|
3天前
Bootstrap5 导航3
使用 `.flex-column` 类可创建垂直导航，而 `.nav-tabs` 类则将导航转换为选项卡形式。通过添加 `.active` 类来标记当前选中的选项卡。示例代码展示了如何实现这些效果。
游客ogeeqvh5vfa5q
8 0
游客ogeeqvh5vfa5q
|
4天前
Bootstrap5 导航2
导航对齐方式：使用 `.justify-content-center` 类可使导航居中显示，使用 `.justify-content-end` 类可使导航右对齐。垂直导航：使用 `.flex-column` 类可创建垂直导航。
游客ogeeqvh5vfa5q
8 0
游客ogeeqvh5vfa5q
|
4天前
Bootstrap5 导航1
Bootstrap5 导航简介：使用 .nav 类创建水平导航栏，.nav-item 类应用于每个列表项，.nav-link 类用于每个链接。示例代码展示了如何实现这一功能，包括禁用状态的链接。
游客ogeeqvh5vfa5q
7 0
游客ogeeqvh5vfa5q
|
4天前
Bootstrap5 折叠2
默认情况下，折叠内容是隐藏的，可通过添加 `.show` 类使其默认显示。以下示例展示了如何使用卡片组件实现简单的手风琴效果。通过设置 `data-bs-parent` 属性，确保在一个折叠选项显示时，其他选项自动隐藏。
游客ogeeqvh5vfa5q
7 0
热爱技术的小郑
|
3月前
|
JavaScript 前端开发
BootStrap在Vue中的安装使用详细教程
这篇文章提供了在Vue项目中安装和使用Bootstrap的详细教程，包括安装jQuery、引入Bootstrap、配置Webpack以及在项目中进行测试和查看效果的步骤。
热爱技术的小郑
170 1
BootStrap在Vue中的安装使用详细教程
疯狂的猿
|
5月前
|
前端开发 Apache 数据库
ThinkPHP+Bootstrap简约自适应网址导航网站源码
使用 ThinkPHP+bootstrap 开发，后台采用全局 ajax 无刷新加载，前后台自适应，前台页面非常简洁适合自己收藏网站或做导航网站。
疯狂的猿
74 1
N..
|
6月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
66 0