Rumah >hujung hadapan web >tutorial css >Apakah kelas utiliti yang berbeza dalam Materialize CSS?
Apakah kelas utiliti yang berbeza dalam Materialize CSS?
- WBOYke hadapan
- 2023-09-12 17:57:071470semak imbas
Dalam artikel ini, kita akan mempelajari tentang kelas utiliti yang berbeza dalam Materialize CSS, tetapi sebelum meneruskan, mari kita fahami apa itu Materialize CSS. Materialize CSS ialah rangka kerja pembangunan bahagian hadapan yang popular yang menyediakan pelbagai ciri dan utiliti untuk mencipta aplikasi web yang responsif dan menarik. Salah satu komponen asas Materialize CSS ialah kelas utilitinya, yang menyediakan cara yang mudah dan cekap untuk menambah gaya pada elemen HTML
Kelas utiliti ialah kelas CSS pratakrif yang boleh digunakan pada mana-mana elemen HTML untuk mencapai penggayaan tertentu.
Berikut ialah beberapa kelas utiliti yang boleh anda gunakan
Kategori praktikal warna
Kelas Utiliti Penjajaran
Kelas utiliti untuk menyembunyikan/menunjukkan kandungan
Formatkan kelas utiliti
Kategori praktikal warna
Kelas utiliti Warna dalam Materialize CSS menyediakan cara mudah untuk menambah warna pada elemen HTML. Kelas ini membolehkan pembangun memilih daripada pelbagai warna yang dipratentukan atau menentukan warna tersuai untuk aplikasi web mereka. Kelas utiliti warna termasuk kelas warna teks dan warna latar belakang.
Contoh
<html> <head> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </head> <body> <h1 class = "red-text text-darken-2">This is red color</h1> <h2 class = "red">This is red color</h2> </body> </html>
Kelas Utiliti Penjajaran
Materialize CSS menyediakan beberapa kelas utiliti penjajaran yang membolehkan pembangun menjajarkan elemen HTML mereka. Kelas-kelas ini termasuk penjajaran kiri, penjajaran kanan, penjajaran tengah, penjajaran justify, pembungkus valign dan penjajaran ). Kelas penjajaran kiri, penjajaran kanan, penjajaran tengah dan penjajaran justify digunakan untuk menjajarkan kandungan teks, manakala kelas pembungkus valign dan valign digunakan untuk menjajarkan elemen secara menegak.
Penjajaran Teks
Ia membolehkan anda mengawal penjajaran mendatar teks dalam elemen, ia termasuk kelas seperti penjajaran kiri, penjajaran kanan, penjajaran tengah dan penjajaran wajar.
Contoh
<html> <head> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </head> <body class = "container"> <h3 class = "left-align"> Left Aligned </h3> <h3 class = "right-align"> right Aligned </h3> <h3 class = "center-align"> center Aligned </h3> </body> </html>
Penjajaran Menegak
Ia membolehkan anda menjajarkan elemen secara menegak menggunakan kelas pembungkus valign, ini boleh digunakan pada elemen bekas induk dan ia akan menjajarkan elemen anak secara menegak dalam bekas itu.
Contoh
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class = "valign-wrapper" style = "height:50vh">
<h5>vertically aligned</h5>
</div>
</body>
</html>
Sembunyikan/tunjukkan kelas utiliti kandungan
Dengan menggunakan kelas utiliti untuk bersembunyi dan menunjukkan, kami boleh menyembunyikan dan menunjukkan kandungan dengan mudah berdasarkan saiz peranti dan dapat menunjukkan kandungan secara terpilih. Menggunakan kelas utiliti ini, anda boleh menggunakan sifat yang berbeza pada kandungan berdasarkan saiz peranti. Sebagai contoh, jika kita ingin menyembunyikan sebarang teks pada peranti mudah alih, maka kita hanya boleh menggunakan kelas "sembunyikan pada kecil sahaja" untuk teks yang sepatutnya kelihatan hanya pada saiz skrin besar atau pada peranti desktop.
Terdapat banyak kelas berbeza yang tersedia di sini seperti .hide, .hide-on-small-only, .hide-on-med-only, .hide-on-med-and-down, .hide-on-med- dan -up, .sorok-pada-besar-sahaja, .tunjuk-pada-kecil, .tunjuk-atas-besar, .tunjuk-pada-sederhana-dan-atas, tunjukkan-pada-sederhana-dan-bawah.
Contoh
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div style = "border:black; border-style:solid; padding:20px; margin:20px">
<h4 class = "hide-on-small-only">hide on small only</h4>
</div>
</body>
</html>
Formatkan kelas utiliti
Materialize CSS menyediakan beberapa kelas yang boleh digunakan untuk memformat kandungan HTML dengan cara yang mudah dan berkesan. Dengan memanfaatkan kelas utiliti pemformatan ini, kami boleh memotong kandungan yang dipaparkan dalam penyemak imbas dengan mudah dan menambah kesan bayangan apabila tetikus melayang di atas elemen kad tanpa menggunakan kod CSS yang kompleks.
Untuk mencapai kesan pemformatan ini, kita boleh menggunakan kelas berikut -
1. Pangkas
Kelas ini digunakan untuk memotong kandungan dan memaparkan elips untuk menunjukkan bahawa terdapat lebih banyak teks yang tidak kelihatan pada masa ini.
Contoh
<html> <head> <title> Document </title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </head> <body> <h4 class = "truncate">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam</h4> </body> </html>
2. Panel kad.boleh dilegar
Kelas ini menambahkan kesan bayangan pada elemen kad apabila melayang di atasnya, yang membantu menjajarkan dan menyerlahkan kandungan yang terkandung dalam kad.
Contoh
<html>
<head>
<title> Document </title>
<link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class = "row">
<div class = "col s12 m6">
<div class = " card card-panel hoverable">
<div class = "card-content blue-text">
<span class = "card-title"> Card panel hoverable </span>
<p>:This class adds a shadow effect to a card element when it is hovered over, which helps to align and highlight the content contained within the card. </p>
</div>
<div class = "card-action">
<a href = "#"> This is a link </a>
<a href = "#"> This is a link </a>
</div>
</div>
</div>
</div>
</body>
</html>
Dalam artikel ini, kami mengetahui bahawa CSS ialah rangka kerja pembangunan bahagian hadapan yang berkuasa yang menyediakan pelbagai ciri dan utiliti untuk mencipta aplikasi web yang responsif dan menarik secara visual. Salah satu komponennya yang paling berguna ialah satu set kelas utiliti yang menyediakan cara yang mudah tetapi berkesan untuk menambah gaya pada elemen HTML. Kelas utiliti ini termasuk kelas warna, penjajaran, menyembunyikan/menunjukkan kandungan dan kelas pemformatan, antara lain. Dengan memanfaatkan kelas utiliti ini, pembangun boleh mencapai kesan penggayaan yang mereka inginkan dengan mudah tanpa menulis kod CSS yang kompleks. Secara keseluruhan, Materialize CSS ialah pilihan terbaik untuk pembangun yang ingin mencipta aplikasi web yang cantik dan responsif dengan cepat dan mudah.
Atas ialah kandungan terperinci Apakah kelas utiliti yang berbeza dalam Materialize CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!