Tujuan Pembelajaran

Setelah mempelajari bab ini, peserta mampu:

1. Memahami pengertian Bootstrap.
2. Menjelaskan fungsi Bootstrap.
3. Mengetahui kelebihan Bootstrap 5.
4. Menginstal Bootstrap ke dalam proyek website.

---

A. Apa Itu Bootstrap?

Bootstrap adalah framework CSS dan JavaScript yang digunakan untuk mempercepat proses pembuatan antarmuka (User Interface/UI) website.

Bootstrap pertama kali dikembangkan oleh:

• Mark Otto
• Jacob Thornton

di X (Twitter) pada tahun 2011.

Bootstrap menyediakan berbagai komponen siap pakai seperti:

• Tombol
• Form
• Navbar
• Card
• Modal
• Alert
• Grid System
• Carousel

dan masih banyak lagi.

---

B. Mengapa Menggunakan Bootstrap?

Sebelum adanya Bootstrap, programmer harus membuat CSS sendiri untuk setiap komponen website.

Contoh:

Untuk membuat tombol biru diperlukan kode CSS:

.btn {
    background: blue;
    color: white;
    padding: 10px;
}

Dengan Bootstrap cukup:

<button class="btn btn-primary">
    Simpan
</button>

Lebih cepat dan profesional.

---

C. Kelebihan Bootstrap 5

1. Responsive

Website otomatis menyesuaikan ukuran layar.

• Smartphone
• Tablet
• Laptop
• Desktop

2. Mudah Dipelajari

Sintaks sederhana dan konsisten.

3. Banyak Komponen Siap Pakai

Tidak perlu membuat semuanya dari nol.

4. Dokumentasi Lengkap

Bootstrap memiliki dokumentasi resmi yang sangat lengkap.

5. Digunakan Banyak Perusahaan

Menjadi standar dalam pengembangan website modern.

---

D. Bootstrap 5 vs Bootstrap 4

Bootstrap 4	Bootstrap 5
Menggunakan jQuery	Tidak memerlukan jQuery
Ukuran lebih besar	Lebih ringan
Utility terbatas	Utility lebih lengkap
Performa standar	Lebih cepat

---

E. Struktur Kerja Bootstrap

Secara sederhana:

HTML
  ↓
Bootstrap CSS
  ↓
Tampilan Website

Contoh:

<button class="btn btn-success">
    Simpan Data
</button>

Class:

btn
btn-success

akan dibaca oleh Bootstrap dan menghasilkan tombol hijau yang menarik.

---

Praktik 1

Membuat Folder Project

Buat struktur berikut:

belajar-bootstrap/
│
├── index.html
└── assets/

---

Latihan Bab 1

Jawablah pertanyaan berikut:

1. Apa yang dimaksud Bootstrap?
2. Sebutkan 3 kelebihan Bootstrap.
3. Mengapa Bootstrap mempermudah pekerjaan programmer?
4. Apa perbedaan Bootstrap 4 dan Bootstrap 5?
5. Apa fungsi class pada Bootstrap?

---

Tugas Praktik Bab 1

Buatlah rangkuman minimal 1 halaman mengenai:

Perbedaan Bootstrap 4 dan 5

Pengertian Bootstrap

Fungsi Bootstrap

Kelebihan Bootstrap