Pengertian Bootstrap:
Bootstrap adalah kerangka kerja (framework) front-end yang digunakan untuk merancang tampilan situs web dengan cepat dan mudah. Ini berisi gaya, komponen, dan skrip JavaScript yang dapat di gunakan untuk membangun situs web yang responsif dan menarik.
Keuntungan Bootstrap:
- Responsif: Bootstrap memungkinkan tampilan situs web beradaptasi dengan baik di berbagai perangkat, dari layar besar hingga ponsel pintar.
- Komponen Siap Pakai: Bootstrap menyediakan berbagai komponen seperti tombol, formulir, navigasi, dan banyak lagi, yang mempercepat proses desain.
- Konsistensi Tampilan: Bootstrap membantu mencapai konsistensi dalam tampilan antarhalaman dan elemen situs web.
- Pengembangan Cepat: Dengan menggunakan kelas-kelas Bootstrap, dapat membangun tampilan yang menarik dengan cepat tanpa perlu menulis gaya CSS dari awal.
- Dokumentasi Lengkap: Bootstrap memiliki dokumentasi yang sangat baik, dengan contoh-contoh dan panduan penggunaan yang mudah diikuti.
Instalasi Bootstrap
Langkah 1: Pilih Opsi Instalasi Anda dapat menggunakan Bootstrap dengan mengunduh file CSS dan JavaScript atau menggunakan CDN (Content Delivery Network). Pilihan pertama adalah mengunduh file Bootstrap dan mengintegrasikannya ke dalam proyek Anda. Opsi kedua adalah menggunakan Bootstrap langsung dari internet melalui CDN.
Opsi A: Mengunduh Bootstrap
- Buka situs resmi Bootstrap di https://getbootstrap.com.
- Unduh versi Bootstrap yang diinginkan.
- Ekstrak file ZIP setelah selesai diunduh.
- Salin file bootstrap.min.css (dari folder css) dan bootstrap.min.js (dari folder js) ke direktori proyek Anda.
Opsi B: Menggunakan CDN BootstrapTambahkan kode berikut di bagian <head> dari halaman HTML Anda:
Cara Kerja Bootstrap
Langkah 2: Penggunaan Kelas-Kelas Bootstrap Bootstrap berfungsi dengan cara menambahkan kelas-kelas CSS khusus ke elemen HTML Anda. Ini mengubah tampilan dan perilaku elemen tersebut.
Contoh 1: Tombol dengan Bootstrap
<button class=”btn btn-primary”>Tombol Utama</button>
Contoh 2: Tata Letak Responsif dengan Grid System
Contoh 3: Navigasi dengan Navbar
