Bootstrap 面包屑导航（Breadcrumb）用于显示用户在网站中的位置，通常用于展示用户当前页面所属的层级关系。在 Bootstrap 3 中，面包屑导航的样式已经预先定义好，只需要简单的添加相应的类名即可实现效果。
基本用法
要创建一个基本的面包屑导航，只需要在页面中添加一个带有 breadcrumb 类名的 <ol> 元素，并在其中添加多个带有 breadcrumb-item 类名的 <li> 元素即可。每个 <li> 元素中的文本即为面包屑导航的每个层级。
示例代码如下：
--- ------------------- --- -------------------------- -------------------- --- -------------------------- -------------------- --- ---------------------- ----------------- -----
在上面的示例中，我们创建了一个包含三个层级的面包屑导航。其中，第一个和第二个层级使用 <a> 元素包裹，表示可以点击跳转，第三个层级使用 active 类名表示当前页面所在的位置。
分隔符
在默认情况下，Bootstrap 使用 / 作为面包屑导航的分隔符，如果需要更改分隔符，可以使用 breadcrumb-separator 类名来自定义。
示例代码如下：
--- ------------------- --- -------------------------- -------------------- --- -------------------------- -------------------- --- ---------------------- ----------------- ----- --- ------------------- --- -------------------------- -------------------- --- -------------------------- -------------------- --- ---------------------- ----------------- -----
在上面的示例中，我们分别使用了默认的分隔符和自定义的分隔符。
响应式设计
Bootstrap 的面包屑导航也支持响应式设计，在小屏幕设备上会自动折叠为一个按钮，点击按钮后会弹出一个下拉菜单显示所有层级。
示例代码如下：
---- ------------------------
--- -------------------
--- -------------------------- --------------------
--- -------------------------- --------------------
--- ---------------------- -----------------
-----
------在上面的示例中，我们使用了 <nav> 元素包裹面包屑导航，并添加了 aria-label="breadcrumb" 属性来增强可访问性。
以上就是 Bootstrap 面包屑导航的基本用法，通过简单的添加类名和元素即可实现漂亮的面包屑导航效果。