Foundation - 导航面包屑
描述
面包屑指定站点在导航层次结构中的当前位置。当访问网站的大量页面时，它很有用。Foundation 中的面包屑只是一个带有 .breadcrumb 类的无序列表。有关详细信息，请查看此章节。
SASS 参考
变量
您可以使用表中列出的以下 SASS 变量更改组件的样式。
| Sr.No. | 名称 &描述 | 类型 | 默认值 |
|---|---|---|---|
| 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 将面包屑项设为大写。 |
Boolean | true |
| 8 | $breadcrumbs-item-slash 在面包屑项之间添加斜线。 |
Boolean | true |
Mixin
您可以使用 mixins 为您的组件构建 CSS 类结构，如表中所列−
breadcrumbs-container
它包括面包屑容器的样式，其中包含元素 <li> <a> 的样式。
@include breadcrumbs-container;
foundation_navigation.html
