Bootstrap5 面包屑

听海边涛声

于 2024-09-02 13:29:27 发布

阅读量94

点赞数 5

文章标签： bootstrap 前端

本文链接：https://blog.csdn.net/panghuangang/article/details/141816928

版权

https://getbootstrap.com/docs/5.3/components/breadcrumb/

面包屑是一种导航，可以在网站或应用程序中向用户指示当前页面的位置、以及如何来返回。
面包屑导航通过CSS为各导航条目之间自动添加分隔符。bootstrap5 创建面包屑布局，可以在有序列表上添加.breadcrumb类

创建一个面包屑

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <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">Vue</li>
      </ol>
    </nav>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>

在这里插入图片描述

修改分隔符

https://getbootstrap.com/docs/5.3/components/breadcrumb/#dividers

CSS中通过::before和content自动添加分隔符。可以通过修改本地CSS自定义属性--bs-breadcrumb-divider来改变它们。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <nav style="--bs-breadcrumb-divider: '>'">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">首页</a></li>
        <li class="breadcrumb-item"><a href="#">前端框架</a></li>
        <li class="breadcrumb-item active">Vue</li>
      </ol>
    </nav>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>