基礎 - 導航麵包屑

描述

麵包屑用於在導航層次結構中指定網站的當前位置。當訪問網站的大量頁面時，它非常有用。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

列印頁面