Bootstrap adalah framework CSS populer yang digunakan untuk membuat halaman web yang responsif dan modern dengan lebih mudah dan cepat. Bootstrap menyediakan banyak class siap pakai untuk styling, layout, dan komponen interaktif, sehingga mengurangi kebutuhan untuk menulis CSS dari nol.
1. Mengenal CSS Framework
CSS Framework adalah kumpulan kode CSS yang siap pakai untuk mempercepat pengembangan web. Framework seperti Bootstrap menyediakan struktur CSS dasar, komponen, dan sistem grid yang telah diatur, sehingga pengembang bisa fokus pada konten dan desain. Selain Bootstrap, ada juga framework lain seperti Bulma, Foundation, dan Tailwind CSS.
Keuntungan menggunakan CSS Framework:
- Hemat waktu karena banyak class dan komponen sudah disediakan.
- Desain responsif sudah terintegrasi, sehingga halaman mudah diakses dari berbagai ukuran layar.
- Memiliki konsistensi desain dan standar tata letak yang baik.
2. Mengenal Grid System
Grid System pada Bootstrap adalah sistem layout berbasis grid yang memungkinkan kita untuk membagi layar menjadi kolom-kolom. Dengan grid system ini, tata letak elemen bisa dengan mudah disesuaikan untuk berbagai ukuran layar, seperti desktop, tablet, dan ponsel.
Pada Bootstrap, layar dibagi menjadi 12 kolom dan kita bisa mengatur lebar kolom dengan class seperti col-1, col-6, col-lg-4, dll., tergantung pada ukuran layar yang ditargetkan.
Contoh Grid System:
htmlCopy code<div class="container">
<div class="row">
<div class="col-4">Kolom 1</div>
<div class="col-4">Kolom 2</div>
<div class="col-4">Kolom 3</div>
</div>
</div>
Grid System ini membuat elemen tetap responsif secara otomatis pada berbagai ukuran layar (small, medium, large, dan extra-large).
3. Menggunakan Bootstrap Versi Offline
Untuk menggunakan Bootstrap secara offline, kita perlu mengunduh file CSS dan JavaScript Bootstrap.
Cara menggunakan Bootstrap versi offline:
- Unduh Bootstrap dari situs resmi https://getbootstrap.com.
- Ekstrak file zip yang diunduh dan letakkan file CSS dan JavaScript ke dalam folder proyek Anda.
- Tambahkan file CSS dan JavaScript tersebut ke HTML Anda menggunakan tag
<link>dan<script>.htmlCopy code<link rel="stylesheet" href="path/to/bootstrap.min.css"> <script src="path/to/bootstrap.bundle.min.js"></script>
Dengan Bootstrap versi offline, kita bisa mengembangkan halaman tanpa koneksi internet, namun tetap bisa memanfaatkan semua fitur Bootstrap.
4. Menggunakan Class-Class untuk Content
Bootstrap menyediakan banyak class untuk styling elemen dasar HTML, seperti teks, gambar, dan tabel. Berikut adalah beberapa class yang sering digunakan:
- Text: Mengatur teks dengan class seperti
text-center,text-left,text-primary,text-muted, dll.htmlCopy code<p class="text-center text-primary">Teks ini berwarna biru dan rata tengah.</p> - Gambar: Mengatur gambar dengan class seperti
img-fluid(membuat gambar responsif),rounded, danrounded-circle.htmlCopy code<img src="gambar.jpg" class="img-fluid rounded-circle" alt="Deskripsi Gambar"> - Tabel: Membuat tabel yang terlihat modern dengan class
table,table-striped,table-hover, dantable-bordered.htmlCopy code<table class="table table-striped table-hover"> <thead> <tr> <th>Nama</th> <th>Umur</th> </tr> </thead> <tbody> <tr> <td>Andi</td> <td>25</td> </tr> <tr> <td>Budi</td> <td>30</td> </tr> </tbody> </table>
5. Menggunakan Class-Class untuk Component
Bootstrap memiliki berbagai komponen siap pakai yang sangat berguna, seperti tombol, kartu, navbar, dan lainnya. Setiap komponen memiliki class tersendiri untuk memudahkan penggunaan dan penyesuaian.
- Button: Bootstrap menyediakan berbagai class untuk tombol, seperti
btn,btn-primary,btn-success, dll.htmlCopy code<button class="btn btn-primary">Tombol Biru</button> - Card: Komponen card untuk membuat konten dengan tampilan seperti kartu.htmlCopy code
<div class="card" style="width: 18rem;"> <img src="gambar.jpg" class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Judul Kartu</h5> <p class="card-text">Deskripsi singkat di dalam kartu.</p> <a href="#" class="btn btn-primary">Baca Selengkapnya</a> </div> </div> - Navbar: Komponen navbar untuk membuat menu navigasi yang responsif.htmlCopy code
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Brand</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-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="#">Fitur</a> </li> </ul> </div> </nav>
Bootstrap menyediakan elemen dasar dan komponen kompleks yang membuat desain lebih konsisten dan efisien. Dengan memanfaatkan Bootstrap, pengembangan web menjadi lebih cepat dan hasilnya responsif serta user-friendly.
Referensi Lainnya :
- https://qwords.com/blog/css-framework/?authuser=0
- https://www.petanikode.com/bootstrap-grid/?authuser=0
- https://www.nesabamedia.com/panduan-cara-menggunakan-bootstrap-offline-untuk-pertama-kali/?authuser=0
- https://getbootstrap.com/docs/5.3/getting-started/introduction/?authuser=0
- https://getbootstrap.com/docs/5.3/components/alerts/?authuser=0
