Materialize ialah rangka kerja CSS untuk reka bentuk yang menggunakan prinsip klasik dan menggabungkannya dengan inovasi dan teknologi. Pencipta Materialize ialah Google, yang telah membangunkan sistem reka bentuk yang menyediakan setiap pengguna pengalaman pengguna yang bersatu dalam sebarang jenis produk, tanpa mengira platform yang mereka gunakan. Breadcrumbs ialah komponen terbina dalam Materialize CSS yang digunakan terutamanya untuk memaparkan lokasi semasa pengguna apabila terdapat banyak peringkat, sama ada pada tapak web atau aplikasi web.
Dalam artikel ini kita akan melihat kelas serbuk roti dalam CSS terwujud?
Kategori serbuk roti dalam Materialize CSS
Kelas CSS hadir dalam Materialize CSS untuk memudahkan penciptaan serbuk roti. Kelas yang digunakan termasuk -
Breadcrumbs − Breadcrumbs digunakan untuk menunjukkan bahawa anchor tag terakhir aktif, dan selebihnya dikelabukan.
kelas nav-wrapper − Kelas ini digunakan untuk menetapkan komponen nav kepada serbuk roti.
Mari kita lihat sintaks untuk mencipta serbuk roti dalam Materialize CSS
Sintaks
<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>
Salin selepas log masuk
Dalam contoh di atas, anda dapat melihat bahawa kami mula-mula membuka teg nav dan kemudian mencipta pembungkus nav kelas selepas itu kami mencipta 3 teg sauh yang berbeza dan memberi mereka kelas serbuk roti.
Untuk lebih memahami konsep navigasi serbuk roti, mari lihat contoh
Terjemahan bahasa Cina bagi
Contoh
ialah:
Contoh
Dalam contoh, pendekatan yang akan kami ambil ialah mencipta serbuk roti yang mudah, bermakna HTML akan menghala ke halaman serbuk roti. Mari lihat kod
<!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>
Salin selepas log masuk
Dalam contoh di atas, kami telah menggunakan kelas "breadcrumb", yang membantu kami menambat elemen yang terletak di dalam elemen "nav". Pengguna boleh menggunakan kelas yang berbeza seperti "cyan" atau "biru muda" untuk menukar warna serbuk roti, atau jika pengguna ingin menukar kedudukan serbuk roti ke kanan, mereka boleh menggunakan kelas "kanan".
. min.css dalam direktori tempat projek anda disimpan.
Cara kedua untuk memasang atau menggunakan CSS materialize ialah dengan menggunakan versi CDN dan kemudian masukkan pautan CDN ini di dalam teg skrip dan selepas itu anda boleh menggunakan semua ciri CSS materialize.
Mari lihat contoh lain untuk memahami kategori serbuk roti dalam Materialize CSS
Terjemahan bahasa Cina bagi
Contoh
ialah:
Contoh
Dalam contoh ini kita akan mencipta serbuk roti mudah dengan menggunakan lokasi semasa serbuk roti yang aktif.
Kod untuk membuat serbuk roti adalah seperti berikut:
<!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>
Salin selepas log masuk
Dalam kod di atas, kami mula-mula menambah materialize CSS CDN dan beberapa fon luaran, kemudian memulakan kod HTML kami, menggunakan kelas breadcrumb di dalamnya dan menambah tiga pautan, dan kemudian menukar nav-wrapper.
Apakah Materialize CSS?
Materialize CSS ialah rangka kerja bahagian hadapan yang berdasarkan reka bentuk bahan dan responsif kerana pembangun boleh menggunakan komponen tersuai dan animasi serta peralihan dan kemudian memfokuskan pada pengalaman pengguna kerana rangka kerja tersebut menyediakan pengguna sistem responsif merentas semua platform yang tersedia untuk pengguna.
Terdapat pelbagai tema yang tersedia untuk melaksanakan CSS, dengan contoh terperinci menjadikannya mudah digunakan.
Kesimpulan
Materialize CSS ialah bahasa yang menggabungkan reka bentuk dengan inovasi dan teknologi, direka oleh Google untuk memberikan pengalaman pengguna yang diperhalusi untuk semua platform. Serbuk roti ialah komponen terbina dalam Materialize CSS. Apabila terdapat sejumlah besar kandungan, pelbagai kelas boleh digunakan untuk membuat serbuk roti dengan mudah.
Dalam artikel ini kita melihat apakah kelas serbuk roti dalam CSS materialize dan apa itu CSS materialize.
Atas ialah kandungan terperinci Apakah kategori yang ada untuk serbuk roti dalam Materialize CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
