Bootstrap5 导航组件和面包屑

adendean2024-02-07 12:38

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>

图例

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

我家地址:亚丁号

最后送大家一首诗:

山高路远坑深,

大军纵横驰奔,

谁敢横刀立马？

惟有点赞加关注大军。