Bootstrap5 导航组件和面包屑

简介: 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>

image.gif

图例

image.gif 编辑

面包屑

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

我们可以使用 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>

image.gif

图例

image.gif 编辑

image.gif 编辑

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

我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,

大军纵横驰奔,

谁敢横刀立马?

惟有点赞加关注大军。

目录
相关文章
|
6月前
|
JavaScript 前端开发
Bootstrap5 侧边栏导航(Offcanvas)1
Bootstrap5 的 Offcanvas 组件提供了一种在小屏幕设备上使用的侧边栏导航方案。通过添加 `.offcanvas` 类并结合 `data-bs-toggle=&quot;offcanvas&quot;` 属性,可实现侧边栏的显示与隐藏。支持通过链接的 `href` 或按钮的 `data-bs-target` 属性进行控制。
Bootstrap5 侧边栏导航(Offcanvas)3
通过设置 `data-bs-scroll` 和 `data-bs-backdrop` 属性,可以控制侧边栏弹出时元素的滚动行为和背景画布的显示。示例中展示了不同配置下的滚动效果和背景画布的使用方法。
Bootstrap5 侧边栏导航(Offcanvas)2
侧边栏可通过`.offcanvas-start`、`.offcanvas-end`、`.offcanvas-top`和`.offcanvas-bottom`类分别设置在页面的左、右、顶、底位置。示例代码展示了如何使用这些类创建不同方向的侧边栏,包括按钮触发和内容区域的定义。
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;` 组成,根据导航项的选择显示相应内容。
Bootstrap5 导航6
动态选项卡允许用户通过点击链接切换不同内容。在每个链接上添加 `data-bs-toggle=&quot;tab&quot;` 属性,并在对应内容的 `&lt;div&gt;` 标签中使用 `.tab-pane` 和 `.tab-content` 类。若需淡入效果,可在 `.tab-pane` 后添加 `.fade` 类。
|
6月前
|
前端开发
Bootstrap5 导航5
示例展示了两种导航菜单:胶囊式和选项卡式,均包含活动链接、下拉菜单(含三个子链接)及禁用链接。这些菜单使用 Bootstrap 类实现响应式设计。
Bootstrap5 导航4
`.nav-pills` 类可将导航项设置为胶囊形状,使界面更加美观。通过添加 `.nav-justified` 类,可以使导航项等宽对齐,适用于不同屏幕尺寸的布局。示例代码展示了如何使用这些类创建胶囊导航和等宽导航。
Bootstrap5 导航3
使用 `.flex-column` 类可创建垂直导航,而 `.nav-tabs` 类则将导航转换为选项卡形式。通过添加 `.active` 类来标记当前选中的选项卡。示例代码展示了如何实现这些效果。
Bootstrap5 导航2
导航对齐方式:使用 `.justify-content-center` 类可使导航居中显示,使用 `.justify-content-end` 类可使导航右对齐。垂直导航:使用 `.flex-column` 类可创建垂直导航。
Bootstrap5 导航1
Bootstrap5 导航简介:使用 .nav 类创建水平导航栏,.nav-item 类应用于每个列表项,.nav-link 类用于每个链接。示例代码展示了如何实现这一功能,包括禁用状态的链接。