Materialize CSS中的麵包屑有哪些類別？
- PHPz轉載
- 2023-08-19 20:17:10772瀏覽
Materialize是一個用於設計的CSS框架，它使用經典原則並將其與創新和技術結合。 Materialize的創建者是谷歌，他們開發了一個設計系統，可以為每個用戶在任何類型的產品中提供統一的用戶體驗，無論用戶使用的平台是什麼。 Breadcrumbs是一個在Materialize CSS中內建的元件，當有很多層級時，它主要用於顯示使用者目前的位置，無論是在網站上還是在Web應用程式上。
In this article we are going to have a look at the classes of breadcrumb in materialize CSS?
在Materialize CSS中的麵包屑類別
在Materialize CSS中存在的CSS類別用於輕鬆建立麵包屑。使用的類別包括 -
麵包屑類別 − 麵包屑類別用來顯示最後一個錨點標籤是活動狀態，其餘的則被灰化。
nav-wrapper class − This class is used to set the component of the nav to breadcrumb.
讓我們來看看在Materialize CSS中建立麵包屑的語法
Syntax
<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>
In the above example you can see that we first opened a nav tag and then created a class nav-wrapper after which we created 3 different anchor tags and gave them the breadcrumb class.
為了更好地理解麵包屑導航的概念，讓我們來看一個例子
Example
的中文翻譯為：範例
在範例中，我們將採用的方法是建立一個簡單的麵包屑，這表示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”類。
Note − There are different ways to install materialize CSS. One way is to go to the official website of the materialize CSS and then download the latest version available in which you would have to download the matize. min.js and materialize.min.css in the directory where your project is stored.
The second way to install or use the materialize CSS is by using the CDN versions and then including these CDN links inside the script tag and after which you can use all of the features of the materialize CSS.
讓我們來看另一個例子，以了解在Materialize CSS中麵包屑的類別
Example
的中文翻譯為：範例
In this example we will be creating a simple breadcrumb by using the current location of the breadcrumb that is active.
製作麵包屑的程式碼如下：
<!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 is a front-end framework which is based on material design and is responsive as the developer can use custom components and animations and transitions and then focuses on the user experience s the games platforms which are available to the user.
有各種主題可以用於實現CSS，並且有詳細的範例，使其易於使用。
Conclusion
Materialize CSS是一種將設計與創新和技術相結合的語言，由Google設計，旨在為所有平台提供精細的使用者體驗。麵包屑是內建在Materialize CSS中的一個元件。當有大量內容時，可以使用各種類別來輕鬆創建麵包屑。
In this article we saw what are the classes of the breadcrumb in the materialize CSS and what is materialize CSS.
以上是Materialize CSS中的麵包屑有哪些類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！