Ketahui lebih lanjut tentang rangka kerja CSS: Teroka apakah rangka kerja biasa di dunia hadapan

Teroka dunia bahagian hadapan: Fahami apa itu rangka kerja CSS biasa dan perlukan contoh kod khusus

​CSS (Cascading Style Sheets) ialah bahasa yang digunakan untuk menerangkan gaya halaman, yang menyediakan kesan visual yang kaya dan interaksi untuk halaman web kesan khas. Sebagai pembangun bahagian hadapan, pemahaman dan penguasaan CSS adalah penting. Dalam pembangunan sebenar, menggunakan rangka kerja CSS boleh membantu kami membina halaman web dengan lebih cekap dan meningkatkan kecekapan pembangunan. Artikel ini akan memperkenalkan beberapa rangka kerja CSS biasa dan memberikan contoh kod khusus.

1. Bootstrap
   Bootstrap ialah salah satu rangka kerja CSS sumber terbuka yang paling popular Ia menyediakan set kelas dan komponen CSS yang dipratentukan untuk membina halaman web responsif dengan cepat. Berikut ialah contoh kod yang menggunakan Bootstrap untuk melaksanakan bar navigasi ringkas:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

2. Foundation
   Foundation ialah satu lagi rangka kerja CSS yang sangat popular, yang menyediakan sistem grid yang fleksibel dan komponen UI yang kaya yang boleh dibina dengan cepat halaman web Responsif. Berikut ialah contoh kod yang menggunakan Foundation untuk melaksanakan kumpulan butang ringkas:

<div class="button-group">
  <a href="#" class="button">Button 1</a>
  <a href="#" class="button">Button 2</a>
  <a href="#" class="button">Button 3</a>
</div>

3. Bulma
   Bulma ialah rangka kerja CSS ringan yang memfokuskan pada kesederhanaan dan kebolehubahsuaian, serta menyediakan satu set gaya intuitif dan mudah digunakan. . Berikut ialah contoh kod menggunakan Bulma untuk melaksanakan susun atur kad ringkas:

<div class="card">
  <div class="card-image">
    <figure class="image">
      <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="Image">
    </figure>
  </div>
  <div class="card-content">
    <div class="content">
      <h3 id="Title">Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
    </div>
  </div>
</div>

4. Tailwind CSS
   Tailwind CSS ialah rangka kerja CSS yang sangat boleh disesuaikan yang menyediakan satu siri kelas utiliti yang membolehkan anda membina antara muka web penyesuaian dengan cepat. Berikut ialah contoh kod yang menggunakan Tailwind CSS untuk melaksanakan butang mudah:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Ringkasan:
Dengan memahami rangka kerja CSS biasa, kami boleh membina halaman web yang cantik dan praktikal dengan lebih cepat. Artikel ini memperkenalkan beberapa rangka kerja CSS biasa dan memberikan contoh kod khusus Saya harap ia akan membantu semua orang dalam menggunakan rangka kerja CSS dalam pembangunan bahagian hadapan. Sudah tentu, ini hanyalah puncak gunung es. Terdapat banyak rangka kerja CSS yang hebat yang menunggu anda untuk meneroka dan menggunakan.

Atas ialah kandungan terperinci Ketahui lebih lanjut tentang rangka kerja CSS: Teroka apakah rangka kerja biasa di dunia hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!