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

01-相关基础知识

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

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

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

创建一个基本的面包屑导航：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Homea>li>
    <li class="breadcrumb-item"><a href="#">Productsa>li>
    <li class="breadcrumb-item active" aria-current="page">Categoryli>
  ol>
nav>
1
2
3
4
5
6
7

使用
元素创建包含面包屑导航的容器。
使用.breadcrumb类来定义面包屑导航列表。
使用.breadcrumb-item类来定义每个导航项。
使用.active类来表示当前页面的导航项。
使用aria-current="page"属性来指示当前页面。

添加自定义分隔符：

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Homea>li>
    <li class="breadcrumb-item"><a href="#">Productsa>li>
    <li class="breadcrumb-item"><a href="#">Categorya>li>
    <li class="breadcrumb-item active" aria-current="page">Itemli>
  ol>
nav>
1
2
3
4
5
6
7
8

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

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

02-一个简单的示例

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

运行效果如下：
在这里插入图片描述

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

在上面的示例效果中，各层级的分隔符是“ / ”：
在这里插入图片描述
我们可以重写相关的类来改变这个分隔符，以下是一个示例代码：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

运行效果如下：
在这里插入图片描述

相关阅读:
radio日志sim卡信号状态分析
 热点不热！如何修复笔记本电脑未连接到移动热点的问题
 git命令学习
 HTML旅游景点网页作业制作——旅游中国11个页面(HTML+CSS+JavaScript)
Android Automotive概述
 Vue2 04 Axios 异步通讯
 新书《深度学习与交通大数据实战》代码与数据等资源获取声明
 vue网页浏览器刷新404问题解决
 location对象
 算法刷题日志——dp
原文地址：https://blog.csdn.net/wenhao_ir/article/details/133950145

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

目录

01-相关基础知识

02-一个简单的示例

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