Rumah > Artikel > hujung hadapan web > Kuasai rangka kerja CSS biasa dan bina halaman web dengan mudah
Kuasai rangka kerja CSS biasa dan bina halaman web dengan mudah
- 王林asal
- 2024-01-05 11:21:10968semak imbas
Ketahui tentang rangka kerja CSS yang biasa digunakan untuk membantu anda membina halaman web dengan cepat
Dalam pembangunan web moden, rangka kerja CSS memainkan peranan yang sangat penting. Mereka menyediakan pembangun dengan pilihan penggayaan dan reka letak yang kaya, menjadikan laman web pembinaan lebih cekap dan lebih mudah. Artikel ini akan memperkenalkan beberapa rangka kerja CSS yang biasa digunakan dan menyediakan contoh kod khusus untuk membantu anda memahami dan menggunakannya dengan lebih baik.
- Bootstrap
Bootstrap ialah salah satu rangka kerja CSS paling popular di luar sana. Ia berdasarkan HTML, CSS dan JavaScript serta menyediakan komponen UI yang kaya dan pilihan susun atur responsif. Dengan menggunakan Bootstrap, anda boleh membina halaman web yang cantik dan responsif dengan mudah.
Berikut ialah contoh kod untuk membina bar navigasi menggunakan Bootstrap:
<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 ml-auto">
<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="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>- Foundation
Foundation ialah satu lagi rangka kerja CSS popular yang turut menyediakan sejumlah besar komponen UI dan pilihan susun atur responsif. Tidak seperti Bootstrap, Foundation lebih memfokuskan pada penyesuaian dan fleksibiliti, membolehkan pembangun menyesuaikannya mengikut keperluan mereka sendiri.
Berikut ialah contoh kod untuk membina butang dengan Foundation:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.css">
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell small-6">
<button class="button">Button 1</button>
</div>
<div class="cell small-6">
<button class="button">Button 2</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.js"></script>
</body>
</html>- Bulma
Bulma ialah rangka kerja CSS ringan yang menyediakan pilihan penggayaan dan reka letak yang mudah, intuitif. Bulma adalah berdasarkan reka letak Flexbox dan menggunakan peraturan penamaan CSS semantik yang serupa dengan Bootstrap.
Berikut ialah contoh kod untuk menggunakan Bulma untuk membina bar navigasi responsif:
<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="logo.png" alt="logo">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">Home</a>
<a class="navbar-item" href="#">About</a>
<a class="navbar-item" href="#">Services</a>
<a class="navbar-item" href="#">Contact</a>
</div>
</div>
</nav>Di atas ialah pengenalan ringkas dan contoh kod bagi tiga rangka kerja CSS yang biasa digunakan. Sudah tentu, ini hanyalah sebahagian kecil daripada keupayaan mereka, mereka juga menawarkan lebih banyak komponen dan pilihan yang boleh dipelajari dan digunakan secara mendalam berdasarkan keperluan khusus. Sama ada Bootstrap, Foundation atau Bulma, mereka boleh membantu anda membina halaman web yang cantik dan responsif dengan lebih pantas serta meningkatkan kecekapan pembangunan. Semoga artikel ini dapat membantu anda!
Atas ialah kandungan terperinci Kuasai rangka kerja CSS biasa dan bina halaman web dengan mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!