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

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

2024-04-30 93
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
|
29天前
Bootstrap5 侧边栏导航(Offcanvas)3
通过设置 `data-bs-scroll` 和 `data-bs-backdrop` 属性，可以控制侧边栏弹出时元素的滚动行为和背景画布的显示。示例中展示了不同配置下的滚动效果和背景画布的使用方法。
游客ogeeqvh5vfa5q
25 3
游客ogeeqvh5vfa5q
|
1月前
|
JavaScript 前端开发
Bootstrap5 侧边栏导航(Offcanvas)1
Bootstrap5 的 Offcanvas 组件提供了一种在小屏幕设备上使用的侧边栏导航方案。通过添加 `.offcanvas` 类并结合 `data-bs-toggle=&quot;offcanvas&quot;` 属性，可实现侧边栏的显示与隐藏。支持通过链接的 `href` 或按钮的 `data-bs-target` 属性进行控制。
游客ogeeqvh5vfa5q
35 4
游客ogeeqvh5vfa5q
|
29天前
Bootstrap5 侧边栏导航(Offcanvas)2
侧边栏可通过`.offcanvas-start`、`.offcanvas-end`、`.offcanvas-top`和`.offcanvas-bottom`类分别设置在页面的左、右、顶、底位置。示例代码展示了如何使用这些类创建不同方向的侧边栏，包括按钮触发和内容区域的定义。
游客ogeeqvh5vfa5q
22 1
游客ogeeqvh5vfa5q
|
1月前
Bootstrap5 导航7
胶囊状动态选项卡通过设置 `data-bs-toggle=&quot;pill&quot;` 实现，包含导航项和内容区两部分。导航项使用 `&lt;ul class=&quot;nav nav-pills&quot;&gt;` 定义，每个选项链接到对应的内容区，实现点击切换显示的效果。内容区由多个 `&lt;div class=&quot;tab-pane&quot;&gt;` 组成，根据导航项的选择显示相应内容。
游客ogeeqvh5vfa5q
28 3
游客ogeeqvh5vfa5q
|
1月前
Bootstrap5 导航6
动态选项卡允许用户通过点击链接切换不同内容。在每个链接上添加 `data-bs-toggle=&quot;tab&quot;` 属性，并在对应内容的 `&lt;div&gt;` 标签中使用 `.tab-pane` 和 `.tab-content` 类。若需淡入效果，可在 `.tab-pane` 后添加 `.fade` 类。
游客ogeeqvh5vfa5q
25 1
游客ogeeqvh5vfa5q
|
1月前
|
前端开发
Bootstrap5 导航5
示例展示了两种导航菜单：胶囊式和选项卡式，均包含活动链接、下拉菜单（含三个子链接）及禁用链接。这些菜单使用 Bootstrap 类实现响应式设计。
游客ogeeqvh5vfa5q
28 0
游客ogeeqvh5vfa5q
|
1月前
Bootstrap5 导航4
`.nav-pills` 类可将导航项设置为胶囊形状，使界面更加美观。通过添加 `.nav-justified` 类，可以使导航项等宽对齐，适用于不同屏幕尺寸的布局。示例代码展示了如何使用这些类创建胶囊导航和等宽导航。
游客ogeeqvh5vfa5q
22 0
N..
|
7月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
73 0
汪末末
|
前端开发 容器
Bootstrap 组件：嵌入效果（Well）
Bootstrap 框架
汪末末
78 0
Bootstrap 组件：嵌入效果（Well）
汪末末
|
前端开发 容器
Bootstrap 组件：面板组件（panel）
Bootstrap 框架
汪末末
142 0
Bootstrap 组件：面板组件（panel）

热门文章

最新文章

  • 1
    start.aliyun.com 正式上线！极速构建 bootstrap 应用
  • 2
    使用国人的koala来重新预编译BOOTSTRAP的LESS文件
  • 3
    Bootstrap的学习以及简单运用
  • 4
    bootstrap51-Bootstrap 基本的输入框组
  • 5
    Bootstrap-轮播图-No.2
  • 6
    bootstrap-表单控件——输入框input
  • 7
    bootstrap-面板--基础面板
  • 8
    bootstrap-带有头和尾的面板
  • 9
    bootstrap-翻页
  • 10
    Bootstrap 下拉菜单disabled
  • 1
    bootstrap table 设置自定义列宽
    960
  • 2
    R语言广义线性混合模型（GLMM）bootstrap预测置信区间可视化
    122
  • 3
    【专栏：HTML与CSS实践篇】CSS框架（Bootstrap/Foundation）快速上手
    137
  • 4
    r语言Bootstrap自助法重采样构建统计量T抽样分布近似值可视化|代码分享
    114
  • 5
    R语言对综合社会调查GSS数据进行自举法bootstrap统计推断、假设检验、探索性数据分析可视化|数据分享（下）
    96
  • 6
    R语言对综合社会调查GSS数据进行自举法bootstrap统计推断、假设检验、探索性数据分析可视化|数据分享（上）
    90
  • 7
    Bootstrap 5 保姆级教程（十五）：表单
    351
  • 8
    Bootstrap 5 保姆级教程（十四）：Flex
    126
  • 9
    Bootstrap 5 保姆级教程（十三）：滚动监听 & 侧边栏导航
    128
  • 10
    Bootstrap 5 保姆级教程（十二）：弹出框 & 消息弹窗
    226

    • 相关课程

    更多
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • 函数计算最佳实践：快速开发一个分布式 Puppeteer 网页截图服务
  • 宏光S导航安装教程
  • 《 优酷APP全量支持“暗黑模式” 设计与技术完整总结》
    • 下一篇
    DataWorks售前咨询