Bagi para web developer di Malang dan di seluruh Indonesia, tentu sudah tidak asing lagi dengan Bootstrap. Framework CSS open-source ini telah menjadi salah satu fondasi utama dalam pengembangan front-end web yang responsif dan cepat. Artikel pertama dalam seri tutorial Bootstrap ini akan membahas pengertian mendasar tentang Bootstrap dan langkah-langkah mudah untuk mulai menggunakannya dalam proyek web Anda.
Apa Itu Bootstrap?
Bootstrap adalah sebuah framework CSS, HTML, dan JavaScript yang dirancang untuk memudahkan dan mempercepat pengembangan website dan aplikasi web yang responsif. Dikembangkan oleh tim di Twitter, Bootstrap menyediakan kumpulan template desain berbasis CSS dan JavaScript untuk berbagai komponen antarmuka pengguna (UI) seperti tombol, formulir, navigasi, carousel, dan banyak lagi.
Mengapa Bootstrap Begitu Populer?
- Responsif: Salah satu fitur utama Bootstrap adalah kemampuannya untuk membuat layout web yang secara otomatis menyesuaikan diri dengan berbagai ukuran layar, mulai dari desktop hingga smartphone. Ini sangat penting di era mobile-first saat ini.
- Mudah Digunakan: Bootstrap dirancang dengan fokus pada kemudahan penggunaan. Dengan pemahaman dasar HTML dan CSS, Anda dapat dengan cepat membangun antarmuka yang menarik dan fungsional.
- Kaya Komponen: Bootstrap menyediakan berbagai komponen UI siap pakai yang dapat Anda gunakan langsung dalam proyek Anda, menghemat waktu dan usaha dalam membuat elemen-elemen tersebut dari awal.
- Konsisten: Menggunakan Bootstrap membantu menciptakan tampilan dan perilaku yang konsisten di seluruh website Anda, memberikan pengalaman pengguna yang lebih baik.
- Didukung Komunitas Besar: Bootstrap memiliki komunitas pengguna dan pengembang yang sangat besar dan aktif. Ini berarti Anda akan mudah menemukan bantuan, tutorial, dan sumber daya lainnya jika Anda mengalami masalah.
- Gratis dan Open Source: Bootstrap adalah proyek open source di bawah lisensi MIT, yang berarti Anda dapat menggunakannya secara gratis untuk proyek pribadi maupun komersial.
Cara Menggunakan Bootstrap: Langkah Demi Langkah
Ada beberapa cara untuk menggunakan Bootstrap dalam proyek web Anda. Berikut adalah dua metode yang paling umum dan mudah untuk pemula:
Metode 1: Menggunakan Bootstrap CDN (Content Delivery Network)
Cara termudah untuk memulai dengan Bootstrap adalah dengan menggunakan Content Delivery Network (CDN). CDN menyediakan file CSS dan JavaScript Bootstrap yang dihosting di server global, sehingga Anda hanya perlu menambahkan beberapa baris kode ke dalam file HTML Anda.
- Buka File HTML Anda: Buka file HTML utama proyek web Anda. Jika Anda belum memiliki file HTML, buatlah satu dengan struktur dasar HTML seperti berikut:
<pre><code class=”language-html”> <!DOCTYPE html> <html lang=”id”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Website Saya dengan Bootstrap</title> </head> <body> </body> </html> </code></pre>
- Tambahkan Link CSS Bootstrap: Letakkan kode berikut di dalam tag
<head>file HTML Anda:<pre><code class=”language-html”> <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” integrity=”sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z” crossorigin=”anonymous”> </code></pre>
Pastikan URL dan versi Bootstrap sesuai dengan yang Anda inginkan. Pada contoh ini, kita menggunakan Bootstrap versi 4.5.2. Anda bisa memeriksa versi terbaru di situs resmi Bootstrap.
- Tambahkan Link JavaScript Bootstrap (dan dependensinya): Bootstrap membutuhkan jQuery, Popper.js, dan JavaScript Bootstrap itu sendiri agar beberapa komponen interaktifnya berfungsi dengan baik. Letakkan kode berikut tepat sebelum tag
</body>penutup:<pre><code class=”language-html”> <script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js” integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anonymous”></script>
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js” integrity=”sha384-9/reFTGAWvNH9iYyJyh5GaSFxEWhaol+UpFjlAZpTtmCHg99j9GaWYUfXn” crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js” integrity=”sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV” crossorigin=”anonymous”></script>
</code></pre>
Pastikan urutan penempatan skrip sudah benar: jQuery, kemudian Popper.js, lalu Bootstrap JavaScript.
- Mulai Gunakan Komponen Bootstrap: Sekarang Anda sudah siap menggunakan kelas-kelas CSS dan komponen JavaScript dari Bootstrap. Contoh sederhana, mari kita buat sebuah tombol:
<pre><code class=”language-html”> <!DOCTYPE html> <html lang=”id”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Website Saya dengan Bootstrap</title> <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” integrity=”sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z” crossorigin=”anonymous”> </head> <body> <div class=”container”> <h1>Selamat Datang di Website Saya!</h1> <button class=”btn btn-primary”>Klik Saya</button> </div>
<script src="[https://code.jquery.com/jquery-3.5.1.slim.min.js](https://code.jquery.com/jquery-3.5.1.slim.min.js)" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="[https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js](https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js)" integrity="sha384-9/reFTGAWvNH9iYyJyh5GaSFxEWhaol+UpFjlAZpTtmCHg99j9GaWYUfXn" crossorigin="anonymous"></script> <script src="[https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js](https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js)" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script></body> </html> </code></pre>
Simpan file HTML Anda dan buka di browser. Anda akan melihat sebuah tombol berwarna biru dengan teks “Klik Saya”. Kelas
btnadalah kelas dasar untuk tombol Bootstrap, danbtn-primarymemberikan warna tema utama. Kelascontainerdigunakan untuk membuat layout responsif dengan lebar tetap.
Metode 2: Mengunduh dan Menyertakan File Bootstrap
Jika Anda ingin bekerja secara offline atau memiliki kontrol lebih terhadap file Bootstrap, Anda dapat mengunduhnya dari situs resmi GetBootstrap.com.
- Unduh Bootstrap: Kunjungi GetBootstrap.com dan unduh versi terbaru Bootstrap. Anda akan mendapatkan file ZIP yang berisi file CSS, JavaScript, dan font.
- Ekstrak File: Ekstrak isi file ZIP ke dalam folder proyek web Anda. Biasanya, Anda akan memiliki folder
css(berisibootstrap.min.css),js(berisibootstrap.bundle.min.jsatau file JavaScript terpisah sepertibootstrap.min.js,jquery.slim.min.js, danpopper.min.js). - Link File Lokal di HTML: Ganti link CDN di file HTML Anda dengan path ke file lokal yang sudah Anda ekstrak. Contoh:
<pre><code class=”language-html”> <!DOCTYPE html> <html lang=”id”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Website Saya dengan Bootstrap</title> <link rel=”stylesheet” href=”css/bootstrap.min.css”> </head> <body> <div class=”container”> <h1>Selamat Datang di Website Saya!</h1> <button class=”btn btn-primary”>Klik Saya</button> </div>
<script src="js/jquery.slim.min.js"></script><script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script></body> </html> </code></pre>
Pastikan path ke file CSS dan JavaScript sesuai dengan struktur folder proyek Anda.
- Mulai Gunakan Bootstrap: Sama seperti metode CDN, Anda sekarang dapat menggunakan kelas-kelas CSS dan komponen JavaScript Bootstrap dalam proyek web Anda.
Kesimpulan
Bootstrap adalah framework yang sangat berguna untuk mempercepat pengembangan web responsif dan modern. Dengan mengikuti langkah-langkah sederhana di atas, Anda sudah dapat mulai mengintegrasikan Bootstrap ke dalam proyek web Anda di Malang maupun di mana pun Anda berada. Pada tutorial Bootstrap berikutnya, kita akan membahas lebih lanjut tentang layout dasar Bootstrap menggunakan sistem Grid. Selamat mencoba!
