Bootstrap5 导航组件和面包屑

Bootstrap5 导航组件和面包屑

Bootstrap5 提供了一种简单快捷的方法来创建基本导航,它提供了非常灵活和优雅的选项卡和Pills等组件。 Bootstrap5 的所有导航组件,包括选项卡和Pills,都通过基本的 .nav 类共享相同的基本标记和样式。

使用 Bootstrap5 创建基本导航

我们可以使用 Bootstrap5 的 .nav 类来创建一个基本的导航菜单,如下所示:

<nav class="nav">
    <a href="/" class="nav-item nav-link active">主页</a>
    <a href="https://tools.jiyik.com" class="nav-item nav-link">工具</a>
    <a href="/q" class="nav-item nav-link">题库</a>
    <a href="/w" class="nav-item nav-link disabled" tabindex="-1">教程</a>
</nav>

图例

面包屑

面包屑是一种导航,可在网站或应用程序中向用户指示当前页面的位置。 面包屑导航可以极大地增强具有大量页面或复杂导航层次结构的网站的可访问性。

我们可以使用 Bootstrap5 创建静态面包屑布局,只需在有序列表上使用 .breadcrumb 类,如下例所示:

<nav>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">主页</a></li>
        <li class="breadcrumb-item"><a href="#">教程</a></li>
        <li class="breadcrumb-item active">Bootstrap5</li>
    </ol>
</nav>

图例

你有时间常去我家看看我在这里谢谢你啦...

我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,

大军纵横驰奔,

谁敢横刀立马?

惟有点赞加关注大军。

相关推荐
Fan_web7 分钟前
jQuery——事件委托
开发语言·前端·javascript·css·jquery
安冬的码畜日常9 分钟前
【CSS in Depth 2 精译_044】第七章 响应式设计概述
前端·css·css3·html5·响应式设计·响应式
莹雨潇潇1 小时前
Docker 快速入门(Ubuntu版)
java·前端·docker·容器
Jiaberrr1 小时前
Element UI教程:如何将Radio单选框的圆框改为方框
前端·javascript·vue.js·ui·elementui
Tiffany_Ho2 小时前
【TypeScript】知识点梳理(三)
前端·typescript
安冬的码畜日常3 小时前
【D3.js in Action 3 精译_029】3.5 给 D3 条形图加注图表标签(上)
开发语言·前端·javascript·信息可视化·数据可视化·d3.js
小白学习日记3 小时前
【复习】HTML常用标签<table>
前端·html
丁总学Java4 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
yanlele4 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范