基础 - 导航面包屑

描述

面包屑用于在导航层次结构中指定网站的当前位置。当访问网站的大量页面时，它非常有用。Foundation 中的面包屑只是一个具有 .breadcrumb 类的无序列表。有关详细信息，请查看此章节。

您可以使用下表中列出的以下 SASS 变量更改组件的样式。

序号	名称和描述	类型	默认值
1	$breadcrumbs-margin 设置面包屑容器周围的边距。	数字	0 0 $global-margin 0
2	$breadcrumbs-item-font-size 设置面包屑项的字体大小。	数字	rem-calc(11)
3	$breadcrumbs-item-color 设置面包屑项的颜色。	颜色	$primary-color
4	$breadcrumbs-item-color-current 设置当前面包屑项的颜色。	颜色	$black
5	$breadcrumbs-item-color-disabled 禁用面包屑项。	数字	$medium-gray
6	$breadcrumbs-item-margin 设置面包屑项之间的间距。	数字	0.75rem
7	$breadcrumbs-item-uppercase 使面包屑项大写。	布尔值	true
8	$breadcrumbs-item-slash 在面包屑项之间包含斜杠。	布尔值	true

您可以使用混合宏构建组件的 CSS 类结构，如表中所列 −

它包含面包屑容器的样式，以及其中包含的 <li> <a> 元素的样式。

@include breadcrumbs-container;

foundation_navigation.htm

打印页面