Pengenalan Bootstrap untuk Web Development
Modul: Pengenalan Bootstrap untuk Web Development
1. Apa itu Bootstrap?
Bootstrap adalah framework CSS yang membantu kita dalam membuat desain website yang responsif (mudah menyesuaikan diri di berbagai ukuran layar perangkat) dan mobile-first (prioritas pada perangkat mobile).
Bootstrap menyediakan berbagai komponen siap pakai seperti tombol, form, navbar, dan grid system, yang memudahkan kita membuat website tanpa perlu menulis kode CSS dari awal.
2. Menyiapkan Bootstrap
Langkah-langkah untuk menggunakan Bootstrap:
- Metode 1 (CDN – Content Delivery Network): Menambahkan link ke file CSS dan JS Bootstrap dari server online.Tambahkan kode berikut di dalam tag
<head>untuk CSS:
1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
Dan tambahkan sebelum penutupan tag untuk JS:
1<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
- Metode 2 (Download Bootstrap): Mengunduh file Bootstrap dari situs resmi Bootstrap, kemudian menyertakan file CSS dan JS di folder proyek.
3. Struktur Dasar Bootstrap
Bootstrap menggunakan sistem grid 12 kolom. Hal ini memungkinkan kita untuk membagi layar menjadi 12 kolom, yang dapat diatur lebar dan posisi kolom-kolomnya sesuai kebutuhan.
Contoh struktur HTML menggunakan grid:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="container"> <div class="row"> <div class="col-md-4"> Kolom 1 </div> <div class="col-md-4"> Kolom 2 </div> <div class="col-md-4"> Kolom 3 </div> </div> </div> |
- container: Pembungkus konten utama.
- row: Baris untuk menampung kolom.
- col-md-4: Kolom yang memiliki lebar 4 dari 12 kolom (33% dari lebar layar).
4. Komponen-Komponen Dasar
- Tombol (Button)
|
1 |
<button class="btn btn-primary">Tombol Biru</button> |
- Navbar (Menu Navigasi)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Website</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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"> <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> </ul> </div> </nav> |
- Card (Kartu)
|
1 2 3 4 5 6 |
<div class="card" style="width: 18rem;"> <img src="image.jpg" class="card-img-top" alt="Gambar"> <div class="card-body"> <h5 class="card-title">Judul Kartu</h5> <p class="card-text">Deskripsi kartu.</p> <a href="#" class="btn btn-primary">Tombol</a> </div> </div> |
5. Studi Kasus: Membuat Halaman Profil Sederhana
Tugas berikut bertujuan untuk melatih penggunaan grid system dan komponen Bootstrap.
Langkah-langkah:
- Buatlah sebuah halaman profil dengan informasi berikut:
- Nama
- Foto profil
- Deskripsi singkat
- Tautan ke media sosial (misalnya LinkedIn, Instagram)
- Gunakan grid system Bootstrap untuk membuat dua kolom:
- Kolom pertama untuk foto profil.
- Kolom kedua untuk nama dan deskripsi.
Contoh:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Halaman Profil</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <div class="row"> <div class="col-md-4"> <img src="foto.jpg" class="img-fluid rounded-circle" alt="Foto Profil"> </div> <div class="col-md-8"> <h2>Nama Lengkap</h2> <p>Deskripsi singkat tentang diri Anda.</p> <a href="#" class="btn btn-primary">LinkedIn</a> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body> </html> |
6. Tugas
- Buat halaman web sederhana menggunakan Bootstrap yang terdiri dari:
- Navbar dengan 3 menu.
- Sebuah card yang berisi gambar dan deskripsi.
- Sebuah tombol dengan style Bootstrap.
- Upload hasil pekerjaanmu di GitHub atau platform sejenis.
Semoga modul ini bermanfaat untuk mengajarkan Bootstrap! Selamat belajar!
