BAB 2 – INSTALASI DAN PERSIAPAN BOOTSTRAP
Tujuan Pembelajaran
Peserta mampu:
- Menginstal Bootstrap menggunakan CDN.
- Menginstal Bootstrap secara offline.
- Menjalankan proyek Bootstrap pertama.
A. Metode Instalasi Bootstrap
Terdapat dua metode:
1. CDN (Online)
2. Download (Offline)
B. Instalasi Menggunakan CDN
Buat file:
index.htmlKemudian isi dengan:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
</body>
</html>C. Menambahkan JavaScript Bootstrap
Tambahkan sebelum tag:
</body><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>D. Instalasi Offline
- Download Bootstrap.
- Ekstrak file.
- Salin folder bootstrap ke project.
Struktur:
project/
│
├── bootstrap/
│
├── css/
│
├── js/
│
└── index.htmlE. Menghubungkan Bootstrap Offline
<link rel="stylesheet"
href="bootstrap/css/bootstrap.min.css"><script src="bootstrap/js/bootstrap.bundle.min.js"></script>Praktik 2
Menampilkan Tulisan Bootstrap Pertama
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello Bootstrap 5</h1>
</body>
</html>Simpan dan jalankan pada browser.
Praktik 3
Tombol Pertama Bootstrap
<button class="btn btn-primary">
Klik Saya
</button>Hasil:
Tombol berwarna biru.
Latihan Bab 2
- Apa itu CDN?
- Kapan sebaiknya menggunakan CDN?
- Apa keuntungan instalasi offline?
- Apa fungsi bootstrap.bundle.min.js?
- Mengapa Bootstrap membutuhkan file CSS?
Tugas Praktik Bab 2
Buat halaman sederhana yang berisi:
- Judul Website
- 3 Tombol Bootstrap
- Paragraf deskripsi
Gunakan:
btn-primary
btn-success
btn-danger