面包屑

在导航层次结构中指示当前页面的位置，该层次结构通过 CSS 自动添加分隔符。

示例

将 active 属性添加到活动的 Breadcrumb.Item 中。不要同时设置 active 和 href 属性。active 覆盖 href，并且会渲染 span 元素而不是 a。

结果

正在加载...

实时编辑器

import Breadcrumb from 'react-bootstrap/Breadcrumb';

function BreadcrumbExample() {
  return (
    <Breadcrumb>
      <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
      <Breadcrumb.Item href="https://bootstrap.ac.cn/docs/4.0/components/breadcrumb/">
        Library
      </Breadcrumb.Item>
      <Breadcrumb.Item active>Data</Breadcrumb.Item>
    </Breadcrumb>
  );
}

export default BreadcrumbExample;

import Breadcrumb from 'react-bootstrap/Breadcrumb';

function BreadcrumbExample() {
  return (
    <Breadcrumb>
      <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
      <Breadcrumb.Item href="https://bootstrap.ac.cn/docs/4.0/components/breadcrumb/">
        Library
      </Breadcrumb.Item>
      <Breadcrumb.Item active>Data</Breadcrumb.Item>
    </Breadcrumb>
  );
}

export default BreadcrumbExample;

面包屑

示例

API

面包屑项

示例​

API​

面包屑​

面包屑项​

示例

API

面包屑

面包屑项