bootstrap 面包屑

Bootstrap 面包屑（Breadcrumb）是一种导航元素，用于显示当前页面在网站结构中的位置。它通常位于页面顶部或底部，由一系列链接组成，每个链接表示一个页面或分类。

Bootstrap 面包屑的使用方法如下：

1. 在 HTML 中添加一个带有 `.breadcrumb` 类的 `ol` 元素。
2. 在 `ol` 元素中添加 `li` 元素作为面包屑的每个链接。
3. 在每个 `li` 元素中添加一个 `a` 元素，并设置 `href` 属性为对应页面的链接地址。
4. 在最后一个 `li` 元素中不需要添加 `a` 元素，只需添加文本内容即可。

以下是一个简单的 Bootstrap 面包屑示例：

<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>

在上面的示例中，第一个和第二个 `li` 元素都包含一个 `a` 元素，用于跳转到对应的页面。第三个 `li` 元素没有 `a` 元素，因为它表示当前页面。

相关问题

bootstrap面包屑导航栏

Bootstrap 的面包屑导航栏可以帮助用户了解他们在网站或应用程序中的位置。你可以使用以下代码实现一个简单的面包屑导航栏：

<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" aria-current="page">当前页面</li>
  </ol>
</nav>

这里的 `aria-label` 属性提供了屏幕阅读器的可访问性支持，`breadcrumb` 类指定了一个面包屑导航栏，`breadcrumb-item` 类指定了每一个面包屑导航栏中的一个条目。 `active` 类用于指定当前页面的条目，并使用 `aria-current="page"` 属性来提供更好的可访问性支持。

vue 面包屑导航代码

下面是一个简单的 Vue.js 面包屑导航组件的代码示例：

<template>
  <nav class="breadcrumb">
    <ol>
      <li v-for="(crumb, index) in crumbs" :key="index" :class="{ active: index === crumbs.length - 1 }">
        <router-link :to="crumb.route">{{ crumb.label }}</router-link>
      </li>
    </ol>
  </nav>
</template>

<script>
export default {
  computed: {
    crumbs() {
      const route = this.$route
      const paths = route.path.split('/').filter(p => p)
      const crumbs = []

      paths.forEach((path, index) => {
        const fullPath = paths.slice(0, index + 1).join('/')
        crumbs.push({ label: path, route: fullPath })
      })

      return crumbs
    }
  }
}
</script>

<style>
.breadcrumb {
  background-color: #f5f5f5;
  padding: 8px 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.breadcrumb ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline-block;
  margin-right: 4px;
}

.breadcrumb li a {
  color: #428bca;
  text-decoration: none;
}

.breadcrumb li.active {
  color: #555;
}
</style>

这个组件使用 Vue 的计算属性来生成面包屑导航的数据。它假设路由的路径是由斜杠分隔的一系列路径部分组成的，并将每个路径部分转换为面包屑导航中的一个链接。每个链接都指向该路径的全路径，以便在单击面包屑导航时可以回到该路径。最后，面包屑导航使用 Bootstrap 样式进行渲染。