Pemrograma
n Web
Bootstrap Dasar
Bootstrap adalah framework CSS yang dirancang untuk mempermudah pengembangan web responsif
dan mobile-first. Dengan Bootstrap, pengembang dapat menggunakan komponen yang sudah jadi dan
sistem grid yang fleksibel untuk membangun tampilan web yang menarik dan fungsional.
1. Mengapa Menggunakan Bootstrap?
•Mempercepat pengembangan web.
•Responsif secara default.
•Komponen siap pakai (button, navbar, card, modal, dll).
•Mudah dikustomisasi.
•Dokumentasi yang lengkap dan komunitas besar.
Ada dua cara utama untuk menggunakan Bootstrap:
[Link] CDN (Content Delivery Network)
Tambahkan link berikut dalam <head> HTML Anda:
<link href="[Link] rel="stylesheet">
<script src="[Link]
[Link] dan Meng-host Sendiri
•Unduh Bootstrap dari [Link].
•Ekstrak file dan hubungkan CSS serta JavaScript dalam proyek Anda.
Struktur Dasar Halaman dengan Bootstrap
Setiap halaman berbasis Bootstrap umumnya memiliki struktur dasar seperti berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Bootstrap</title>
<link href="[Link] rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center">Selamat Datang di Bootstrap</h1>
<p class="text-muted">Ini adalah contoh dasar penggunaan Bootstrap.</p>
</div>
<script src="[Link]
</script>
</body>
</html>
4. Sistem Grid pada Bootstrap
Grid Bootstrap terdiri dari 12 kolom dan digunakan untuk menyusun tata letak halaman.
Contoh Penggunaan Grid
<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>
Penjelasan:
•.container: Menentukan kontainer utama.
•.row: Membuat baris.
•.col-md-6: Membagi halaman menjadi 2 bagian (masing-masing 6 kolom dari total 12).
Tipografi dan Warna dalam Bootstrap
Bootstrap menyediakan berbagai kelas untuk mengatur teks dan warna dengan mudah:
<p class="text-primary">Teks berwarna biru</p>
<p class="text-danger">Teks berwarna merah</p>
<p class="fw-bold">Teks tebal</p>
<p class="fst-italic">Teks miring</p>
Button dan Alert
<button class="btn btn-primary">Klik Saya</button>
<div class="alert alert-success">Pesan Sukses!</div>
Komponen Dasar Bootstrap
Navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
</ul>
</div>
</nav>
Pemrograma
n Web
Bootstrap Lanjutan
1. Menggunakan Flexbox untuk Layout
Bootstrap mendukung Flexbox untuk pengaturan tata letak yang lebih dinamis.
<div class="d-flex justify-content-between bg-light p-3">
<div class="p-2 bg-primary text-white">Item 1</div>
<div class="p-2 bg-secondary text-white">Item 2</div>
</div>
Penjelasan:
•.d-flex: Mengaktifkan flexbox.
•.justify-content-between: Menyusun elemen dengan jarak di antara mereka.
2. Modals (Popup Dialogs)
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#myModal">
Buka Modal</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Judul Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">Isi Modal</div>
<div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss=
"modal">Tutup</button>
</div>
</div>
</div>
</div>
3. Carousel (Slideshow)
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="[Link]" class="d-block w-100" alt="Gambar 1">
</div>
<div class="carousel-item">
<img src="[Link]" class="d-block w-100" alt="Gambar 2">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
Kesimpulan
Bootstrap adalah framework yang kuat untuk membangun
tampilan web responsif dengan cepat. Dengan memahami
dasar-dasar seperti grid system, komponen dasar, hingga
fitur lanjutan seperti modal dan carousel, Anda dapat
membangun antarmuka web yang menarik dan profesional.