Apakah kelas utiliti yang berbeza dalam Materialize CSS?-tutorial css-php.cn

Materialise CSS 中有哪些不同的实用程序类？

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!