Ketahui tentang lima rangka kerja reka letak CSS yang biasa digunakan-tutorial css-php.cn

Ketahui tentang lima rangka kerja reka letak CSS yang biasa digunakan

WBOY

Lepaskan： 2024-01-16 09:20:17

asal

610 orang telah melayarinya

Ketahui tentang lima rangka kerja reka letak CSS yang biasa digunakan

Rangka kerja reka letak CSS: Terokai lima rangka kerja reka letak yang biasa digunakan

Pengenalan:
Dalam reka bentuk web, reka letak adalah bahagian yang penting. Rangka kerja reka letak CSS boleh membantu kami membina halaman web dengan cepat dengan gaya reka letak yang berbeza. Artikel ini akan memperkenalkan lima rangka kerja reka letak CSS yang biasa digunakan dan menyediakan contoh kod khusus untuk membantu pembaca memahami dan menggunakan rangka kerja ini dengan lebih baik.

1. Bootstrap:
Bootstrap ialah salah satu rangka kerja reka letak CSS yang paling popular pada masa ini. Ia mempunyai komponen yang kaya dan ciri responsif yang berkuasa yang boleh membantu kami membina halaman web moden dengan cepat. Berikut ialah contoh kod ringkas yang menunjukkan cara menggunakan Bootstrap untuk melaksanakan reka letak halaman web biasa:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-3">左侧栏</div>
      <div class="col-md-6">中间内容</div>
      <div class="col-md-3">右侧栏</div>
    </div>
  </div>
</body>
</html>

Salin selepas log masuk

Kod di atas menggunakan sistem grid Bootstrap untuk membahagikan halaman kepada tiga lajur, lajur kiri, kandungan tengah dan bar sisi kanan dan secara automatik menyesuaikan diri dengan saiz skrin yang berbeza.

2. UI Semantik:
UI Semantik ialah satu lagi rangka kerja reka letak CSS yang popular dan mudah digunakan. Ia menyediakan nama kelas semantik, yang boleh menjadikan kod lebih mudah dibaca dan diselenggara. Berikut ialah contoh kod menggunakan UI Semantik:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
<body>
  <div class="ui grid">
    <div class="three column row">
      <div class="column">左侧栏</div>
      <div class="column">中间内容</div>
      <div class="column">右侧栏</div>
    </div>
  </div>
</body>
</html>

Salin selepas log masuk

Kod di atas menggunakan sistem grid UI Semantik, membahagikan halaman kepada tiga lajur dan menggunakan nama kelas semantik untuk menjadikan kod lebih mudah dibaca.

3 Foundation:
Foundation ialah rangka kerja CSS yang fleksibel dan berkuasa yang bukan sahaja merangkumi fungsi reka letak, tetapi juga menyediakan banyak komponen UI. Berikut ialah contoh kod menggunakan Foundation:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
</head>
<body>
  <div class="grid-container">
    <div class="grid-x">
      <div class="cell small-4">左侧栏</div>
      <div class="cell small-4">中间内容</div>
      <div class="cell small-4">右侧栏</div>
    </div>
  </div>
</body>
</html>

Salin selepas log masuk

Kod di atas menggunakan sistem grid Foundation untuk membahagikan halaman kepada tiga lajur dan menggunakan nama kelas yang berbeza untuk mentakrifkan lebar lajur.

4. PureCSS:
PureCSS ialah rangka kerja CSS yang ringan, terutamanya digunakan untuk membina reka letak halaman web ringkas dengan cepat. Walaupun fungsinya agak mudah, ia mudah untuk dimulakan dan disesuaikan. Berikut ialah contoh kod menggunakan PureCSS:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.5/pure-min.css">
</head>
<body>
  <div class="pure-g">
    <div class="pure-u-1-3">左侧栏</div>
    <div class="pure-u-1-3">中间内容</div>
    <div class="pure-u-1-3">右侧栏</div>
  </div>
</body>
</html>

Salin selepas log masuk

Kod di atas menggunakan sistem grid PureCSS untuk membahagikan halaman kepada tiga lajur dan menentukan lebar lajur menggunakan nama kelas.

5. Tailwind CSS:
Tailwind CSS ialah rangka kerja CSS serba baharu Ia menggunakan kaedah yang berbeza daripada rangka kerja tradisional, mentakrifkan gaya dengan menggabungkan nama kelas. Berikut ialah contoh kod menggunakan Tailwind CSS:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@1.5.1/dist/tailwind.min.css">
</head>
<body>
  <div class="grid grid-cols-3">
    <div class="col-span-1">左侧栏</div>
    <div class="col-span-1">中间内容</div>
    <div class="col-span-1">右侧栏</div>
  </div>
</body>
</html>

Salin selepas log masuk

Kod di atas menggunakan sistem grid Tailwind CSS untuk membahagikan halaman kepada tiga lajur dan mentakrifkan lebar lajur melalui nama kelas.

Kesimpulan:
Melalui pengenalan artikel ini, kami telah mempelajari tentang lima rangka kerja susun atur CSS yang biasa digunakan, iaitu Bootstrap, Semantic UI, Foundation, PureCSS dan Tailwind CSS. Mereka masing-masing mempunyai ciri tersendiri, dan anda boleh memilih rangka kerja yang sesuai untuk susun atur halaman web mengikut keperluan yang berbeza. Saya harap pembaca dapat menguasai dan menggunakan rangka kerja susun atur ini dengan lebih baik melalui pengenalan dan contoh kod artikel ini.

Atas ialah kandungan terperinci Ketahui tentang lima rangka kerja reka letak CSS yang biasa digunakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!