Berkenalan Dengan Bootstrap

Apa Itu Bootstrap?

Bootstrap adalah kerangka kerja (framework) HTML, CSS, dan JavaScript yang sangat populer digunakan untuk membangun website dan aplikasi web yang responsif dan modern. Dengan Bootstrap, kamu tidak perlu membangun semua bagian dari awal, melainkan bisa langsung menggunakan komponen-komponen yang sudah disediakan. Website yang dibangun dengan Bootstrap akan otomatis menyesuaikan tampilannya sesuai dengan ukuran layar perangkat yang digunakan, baik itu komputer desktop, laptop, tablet, atau smartphone. Bootstrap memberikan tampilan yang modern dan konsisten, sehingga website yang kamu buat akan terlihat profesional dan menarik. 

Keuntungan Menggunakan Bootstrap

• Menghemat waktu: Dengan menggunakan Bootstrap, kamu bisa membangun website lebigh cepat karena tidak perlu menuliskan semua kode dari awal.
• Tampilan yang konsisten: Bootstrap memberikan tampilan yang konsisten di seluruh website, sehingga website kamu akan terlihat lebih profesional.
• Responsif: Website yang dibangun dengan Bootstrap akan otomatis menyesuaikan tampilannya sesuai dengan ukuran layar perangkat yang digunakan.
• Terbuka untuk kustomisasi: Kamu bisa dengan mudah memodifikasi tampilan dan perilaku komponen-komponen Bootstrap sesuai dengan kebutuhanmu. 

Contoh Penggunaan Bootstrap

Saya akan memberikan beberapa contoh penggunaan Bootstrap, Untuk contoh-contoh lainnya kamu bisa kunjungi website getbootstrap.com atau di w3schools.com. 

1. Membuat Hello World Menggunakan Bootstrap

Buatlah file dengan nama helloworld.html (atau sesuai keinginan), kemudian masukkan kode HTML seperti di bawah ini: 

Hasilnya:

Lalu kita coba bandingkan dengan yang tidak menggunakan Bootstrap:

Hasilnya:

Jika diamati baik-baik, output Hello World antara yang mengggunakan Bootstrap dan yang tidak menggunakan Bootstrap memiliki perbedaan di default font.

2. Container

Container merupakan elemen tata letak paling dasar di Bootstrap dan diperlukan saat menggunakan sistem grid default. Container digunakan untuk memuat, melapisi, dan (terkadang) memusatkan konten di dalamnya. Meskipun Container dapat disusun bertingkat, namun sebagian besar tata letak tidak memerlukan container yang disusun bertingkat. Berikut contoh penggunakan Container:

Hasilnya:

Lalu kita coba buat Container yang berbeda, yaitu container-fluid:

Hasilnya:

3. Accordion

Accordion dalam Bootstrap adalah komponen UI yang memungkinkan menampilkan konten secara terstruktur dan ringkas. Konten ini dapat dilipat (collapse) dan diperluas (expand) dengan cara yang interaktif, sehingga pengguna dapat dengan mudah mengakses informasi yang mereka butuhkan tanpa harus melihat semua konten sekaligus. Berikut contoh penggunaan Accordion:

Hasilnya:

4. Alert

Alert dalam Bootstrap adalah komponen yang digunakan untuk menampilkan pesan notifikasi kepada pengguna. Pesan ini bisa berupa informasi, peringatan, sukses, atau bahkan bahaya. Alert biasanya muncul secara singkat untuk memberikan umpan balik kepada pengguna setelah suatu tindakan dilakukan. Berikut contoh penggunaan Alert:

Hasilnya:

5. Badge

Badge dalam Bootstrap adalah elemen kecil yang biasanya digunakan untuk menampilkan label, status, jumlah, atau notifikasi singkat. Badge ini seringkali ditambahkan ke elemen lain seperti tombol, teks, atau avatar untuk memberikan informasi tambahan yang relevan. Berikut contoh penggunaan Badge:

Hasilnya:

6. Carousel

Carousel adalah tayangan slide untuk beralih melalui serangkaian konten, yang dibuat dengan transformasi CSS 3D dan sedikit JavaScript. Carousel berfungsi dengan serangkaian gambar, teks, atau markup khusus. Carousel juga mencakup dukungan untuk kontrol dan indikator sebelumnya/selanjutnya. Berikut contoh penggunaan Carousel:

Hasilnya: 

7. Dropdown

Dropdown dalam Bootstrap adalah elemen yang memungkinkan pengguna memilih dari daftar opsi yang tersembunyi. Ketika pengguna mengklik elemen pemicu (biasanya berupa tombol atau link), sebuah menu akan muncul menampilkan opsi-opsi tersebut. Berikut contoh Dropdown:

Hasilnya:

8. Navbar

Navbar dalam Bootstrap adalah komponen penting yang digunakan untuk membuat menu navigasi pada sebuah situs website. Navbar ini dirancang agar tampilannya menarik, mudah digunakan, dan responsif terhadap berbagai ukuran layar. Berikut contoh penggunaan Navbar:

Hasilnya:

Atau:

Kurang lebih seperti itulah beberapa contoh penggunaan Bootstrap yang bisa saya bagikan. Untuk contoh lain bisa kunjungi getbootstrap.com dan untuk source code bisa kunjungi akun Github saya di elvanazlita. Selamat mmencoba dan semoga membantu!