資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究Materialize CSS 中的 breadcrumb 類有哪些？
Materialize 是一個用於設計的 CSS 框架，它使用經典原則並將其與創新和技術相結合。Materialize 的建立者是 Google，他們開發了一個設計系統，可以為每個使用者在每種型別的產品中提供統一的使用者體驗，而無論使用者使用的是哪個平臺。麵包屑是一種內置於 Materialize CSS 中的元件，當存在很多層級時，它主要用於顯示使用者在其上工作時的當前位置，無論是在網站上還是在 Web 應用中。
在本文中，我們將瞭解 Materialize CSS 中麵包屑的類。
Materialize CSS 中麵包屑的類
Materialize CSS 中存在的 CSS 類用於輕鬆建立麵包屑。使用的類包括：
麵包屑類 - 麵包屑類用於顯示最後一個錨標記處於活動狀態，其餘標記呈灰色。
nav-wrapper 類 - 此類用於將導航元件設定為麵包屑。
讓我們看一下在 Materialize CSS 中建立麵包屑的語法。
語法
<nav>
<div class="nav-wrapper blue">
<a href="#html5" class="breadcrumb">HTML</a>
<a href="#materialize example" class="breadcrumb">Materialize example</a>
<a href="#breadcrumb" class="breadcrumb example">BreadCrumb example</a>
</div>
</nav>
在上面的示例中，您可以看到我們首先打開了一個 nav 標籤，然後建立了一個名為 nav-wrapper 的類，之後我們建立了 3 個不同的錨標籤併為它們提供了 breadcrumb 類。
為了更好地理解麵包屑的概念，讓我們看一個示例。
示例
我們將在示例中採用的方法是建立一個簡單面包屑，這意味著 HTML 將指向麵包屑頁面。讓我們看一下程式碼。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of breadcrumb CSS</title>
<style>
.breadcrumb {
padding: 0.5rem 1rem;
background-color: #f5f5f5;
color: #333;
font-size: 1rem;
text-decoration: none;
font-family: Arial, sans-serif;
}
.breadcrumb:hover {
background-color: #2596be;
}
.breadcrumb:active {
background-color:#efaf67;
}
.breadcrumb:not(:last-child):after {
content: ">";
padding: 0 0.5rem;
}
</style>
</head>
<body>
<nav>
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="breadcrumb">First</a>
<a href="#!" class="breadcrumb">Second</a>
<a href="#!" class="breadcrumb">Third</a>
</div>
</div>
</nav>
</body>
</html>
在上面的示例中，我們使用了類“breadcrumb”，它幫助我們在“nav”元素中錨定元素。使用者可以使用不同的類，如“cyan”或“light-blue”來更改麵包屑的顏色，或者如果使用者想要將麵包屑的位置更改為右側，可以使用“right”類。
注意 - 安裝 Materialize CSS 的方法有很多種。一種方法是訪問 Materialize CSS 的官方網站，然後下載最新版本，在該版本中，您需要將 materialize.min.js 和 materialize.min.css 下載到儲存專案的目錄中。
安裝或使用 Materialize CSS 的第二種方法是使用 CDN 版本，然後在指令碼標籤內包含這些 CDN 連結，之後您可以使用 Materialize CSS 的所有功能。
讓我們看另一個示例來了解 Materialize CSS 中麵包屑的類。
示例
在此示例中，我們將透過使用當前活動麵包屑的位置來建立一個簡單面包屑。
製作麵包屑的程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<style>
.breadcrumb {
background-color: rgb(255, 99, 71); /* tomato */
background-color: hsl(9, 100%, 64%); /* tomato */
background-color: #ff6347; /* tomato */
background-color: rgba(255, 99, 71, 0.5); /* tomato with 50% transparency */
font-family: Arial, sans-serif;
padding: 0 50px ;
}
</style>
</head>
<body>
<nav class="red">
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="breadcrumb">First</a>
<a href="#!" class="breadcrumb">Second</a>
<a href="#!" class="breadcrumb">Third</a>
</div>
</div>
</nav>
</body>
</html>
在上面的程式碼中，我們首先添加了 Materialize CSS CDN 和一些外部字型，然後我們開始編寫 HTML 程式碼，在其中我們使用了 breadcrumb 類並添加了三個連結，然後更改了 nav-wrapper。
什麼是 Materialize CSS？
Materialize CSS 是一個基於 Material Design 的前端框架，並且具有響應性，因為開發人員可以使用自定義元件、動畫和過渡，然後專注於使用者體驗，因為該框架為使用者提供了跨所有可用平臺的響應式系統。
可以使用各種主題來實現 Materialize CSS，並且它有詳細的示例，使用起來很容易。
結論
Materialize CSS 是一種將設計與創新和技術相結合的語言，由 Google 設計，旨在為所有平臺提供完善的使用者體驗。麵包屑是內置於 Materialize CSS 中的一個元件。當內容很多時會使用麵包屑，並且可以使用各種類輕鬆建立麵包屑。
在本文中，我們瞭解了 Materialize CSS 中麵包屑的類以及什麼是 Materialize CSS。
158 次檢視
