利用Bootstrap的面包屑组件实现面包屑层次分级导航效果

目录

01-相关基础知识

可以用类breadcrumb实现面包屑层次导航效果。

当使用 Bootstrap 构建网页时,breadcrumb 类用于创建面包屑导航(breadcrumb navigation),这是一种可视化导航元素,通常用于指示用户当前页面在网站层次结构中的位置。面包屑导航以层次结构形式显示,通常采用类似 "Home > Products > Category > Item" 的格式,使用户能够轻松了解他们所在的位置并返回到更高级别的页面。

以下是 Bootstrap 中 breadcrumb 类的使用示例和一些常见属性:

  1. 创建一个基本的面包屑导航:
html 复制代码
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Products</a></li>
    <li class="breadcrumb-item active" aria-current="page">Category</li>
  </ol>
</nav>
  • 使用<nav>元素创建包含面包屑导航的容器。
  • 使用.breadcrumb类来定义面包屑导航列表。
  • 使用.breadcrumb-item类来定义每个导航项。
  • 使用.active类来表示当前页面的导航项。
  • 使用aria-current="page"属性来指示当前页面。
  1. 添加自定义分隔符:
html 复制代码
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Products</a></li>
    <li class="breadcrumb-item"><a href="#">Category</a></li>
    <li class="breadcrumb-item active" aria-current="page">Item</li>
  </ol>
</nav>

你可以根据需要自定义面包屑导航的样式,包括颜色、字体大小等。这可以通过在导航元素上应用 Bootstrap 的样式类来完成,以满足你的设计需求。

通过使用 Bootstrap 的 breadcrumb 类,你可以轻松创建漂亮的面包屑导航,以提高用户体验并帮助他们更好地浏览网站的内容。

02-一个简单的示例

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>面包屑分级导航效果</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2 align="center">面包屑分级导航效果</h2>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item active">首页</li>
    </ol>
</nav>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">首页</a></li>
        <li class="breadcrumb-item active">热门课程</li>
    </ol>
</nav>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">首页</a></li>
        <li class="breadcrumb-item"><a href="#">热门课程</a></li>
        <li class="breadcrumb-item active">网络安全训练营</li>
    </ol>
</nav>
</body>
</html>

运行效果如下:

03-改变面包悄中的层级分隔符

在上面的示例效果中,各层级的分隔符是" / ":

我们可以重写相关的类来改变这个分隔符,以下是一个示例代码:

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设计分隔符</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
<style>
.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-right: 0.5rem;
    color: #6c757d;
    content: ">";
}
</style>
</head>
<body class="container">
<h2 align="center">设计面包屑的分隔符</h2>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item active">首页</li>
    </ol>
</nav>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">首页</a></li>
        <li class="breadcrumb-item active">热门课程</li>
    </ol>
</nav>
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">首页</a></li>
        <li class="breadcrumb-item"><a href="#">热门课程</a></li>
        <li class="breadcrumb-item active">网络安全训练营</li>
    </ol>
</nav>
</body>
</html>

运行效果如下:

相关推荐
热爱编程的小曾18 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin29 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox42 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758102 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox