Pengenalan Bootstrap

Kursus: Membuat Website dari Nol

Bootstrap adalah framework CSS yang membantu pengembang membangun website dengan cepat dan responsif. Dikembangkan oleh Twitter, Bootstrap menyediakan kumpulan komponen siap pakai seperti tombol, form, navigasi, dan grid system yang memudahkan desain web tanpa harus menulis banyak kode CSS dari nol.

Keunggulan Bootstrap:

Responsif Otomatis – Menggunakan sistem grid fleksibel yang dapat menyesuaikan tampilan di berbagai ukuran layar.
Komponen Siap Pakai – Menyediakan elemen UI seperti navbar, modal, carousel, form, dan lainnya.
Dukungan Kustomisasi – Bisa diubah sesuai kebutuhan menggunakan variabel Sass atau CSS kustom.
Kompatibilitas – Bekerja dengan baik di berbagai browser modern.
Dukungan Komunitas – Dokumentasi lengkap dan komunitas besar memudahkan pembelajaran.

Cara Menggunakan Bootstrap:

Menggunakan CDN
Tambahkan link berikut di dalam <head> untuk menggunakan Bootstrap tanpa mengunduhnya:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Menggunakan File Unduhan
- Unduh Bootstrap dari getbootstrap.com
- Sertakan file CSS dan JS ke dalam proyek.

Contoh Penggunaan Bootstrap (Grid System)

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contoh Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 bg-primary text-white p-3">Kolom 1</div>
            <div class="col-md-6 bg-secondary text-white p-3">Kolom 2</div>
        </div>
    </div>
</body>
</html>

Kode di atas membuat dua kolom responsif dengan warna berbeda.

Kesimpulan:

Bootstrap sangat membantu dalam mempercepat pengembangan website dengan tampilan yang modern dan responsif. Dengan memanfaatkan komponen dan sistem grid-nya, Anda dapat membuat website yang menarik dan fungsional tanpa harus menulis banyak kode CSS dari awal.