Untuk membuat design akan membutuhkan banyak waktu. Jika kita harus membuat design web dari awal dengan CSS, itu akan sangat melelahkan. Dan mungkin tidak akan cukup waktunya jika ada deadline. Nah oleh karena itulah tujuan framework dibuat.
Jika diterjemahkan ke Bahasa Indonesia, framework artinya Kerangka Kerja. Ya.. dari sini saya bisa disimpulkan bahwa Bootstrap ini adalah framework untuk memudahkan kita untuk membuat design (Front-End) web.
Bootstrap ini adalah salah satu Front-End framework yang populer, tetapi tidak akan bahas sekaligus dalam satu artikel.
Pada Bootstrap terdapat banyak component dan utilities yang keren, sehingga kita bisa membuat design layout suatu web yang menarik, responsive dan tentunya akan lebih cepat jika dibandingkan kita membuat design css sendiri dari awal.
Apa itu Bootstrap?
Bootstrap adalah suatu framework untuk bagian front-end pada situs atau aplikasi website. Bootstrap ini termasuk Open Source, yang berarti bisa kita gunakan secara gratis.
Dikutip dari situs wikipedia, Bootstrap ini dirancang pertama kali oleh Mark Otto dan Jacob Thornton yang rilis perdana pada tanggal 19 Agustus 2011. Dan saat ini sedang dikembangkan oleh Bootstrap Core Team.
Framework ini berisi template atau komponen berbasis HTML dan CSS yang bisa kita gunakan untuk membuat Tipografi, form, button, navigasi dan komponen-komponen interface lainnya. Lalu ada juga komponen yang membutuhkan Javascript seperti membuat modal dialog, collapse, mobile menu, dan lain-lain.
Saat ini Bootstrap sudah versi 4 yang dirilis dengan lisensi MIT dan masih membutuhkan library Jquery untuk menjalankan komponen yang membutuhkan javascript seperti yang sudah sayakan sebelumnya. Kita doakan saja semoga Bootstrap versi 5 nanti, tidak akan menggunakan Jquery lagi alias pure javascript agar webnya bisa lebih cepat diload.
Alasan Mengapa Anda Harus Menggunakan Boostrap
Ada beberapa alasan yang membuat anda harus menggunakan framework ini.
1. Tersedia Banyak Komponen Siap Pakai
Alasan yang pertama yaitu, karena sudah ada banyak komponen web yang biasa digunakan pada layout aplikasi atau situs web seperti Form Input, Menu Navigasi, Button dan lain-lain.
2. Mudah Digunakan
Alasan yang kedua yaitu, mudah digunakan. Anda bisa mengunjungi halaman ini untuk melihat dokumentasi nya.
Bagaimana? begitu mudah dibaca kan?
Sudah sangat jelas jika kita ingin membuat suatu komponen atau bagian web. Kita bisa langsung copy paste script yang ada disana untuk membuatnya.
Jika kita perhatikan nama classnya, itu mudah diingat. Sehingga akan lebih mudah diingat jika kita sering menggunakannya.
3. Responsive
Yang paling penting menurut saya adalah Responsive, dimulai dari Navigasi Menu, Table dan Bootstrap juga sudah menyediakan Grid System untuk membuat layout yang responsive.
Kenapa harus responsive? karena saat ini lebih banyak orang yang membuka internet menggunakan handphonenya dari pada laptop.
4. Utilities
Satu lagi yang akan sangat membantu adalah utilitiesnya. Dengan ini kita bisa memberi atau mengubah suatu elemen dengan mudah seperti, margin, padding, position, display, border, background color, text color, dan lain sebagainya.
5. Banyak Template yang dibuat Menggunakan Bootstrap
Saat ini sudah banyak bangeeet template keren yang dibuat menggunakan Bootstrap, salah satunya AdminLTE. Mengapa banyak orang yang membuat template menggunakan Bootstrap?
Ada dua alasannya. Yang pertama, karena Bootstrap ini sudah banyak orang yang pakai, oleh karena itu Bootstrap ini akan lebih dipilih user atau pelanggan, sehingga template dengan Bootstrap ini lebih laku dipasaran.
Alasan yang kedua yaitu, karena dengan Bootstrap kita akan lebih mudah dan cepat untuk membuat layout design front-end webnya.
6. Banyak Orang Yang Menggunakan Bootstrap
Seperti yang sudah saya sebutkan sebelumnya, Bootstrap ini adalah framework yang bisa dikatakan paling populer dibanding yang lainnya.
Nah itu dia beberapa alasan dari beberapa orang-orang yang memilih Bootstrap untuk keperluan front-end web mereka.
Apakah anda akan pakai Bootstrap juga?
Jika anda tertarik untuk menggunakan Bootstrap, berikut ini adalah cara untuk memasang Bootstrap pada project web dengan HTML.
Cara Memasang Bootstrap 4
1. Pertama, silahkan anda download terlebih dahulu Bootstrapnya disini. Silahkan download file yang formatnya .zip.
Versi Bootstrap saat artikel ini dibuat v.4.3.1 (bootstrap-4.3.1-dist.zip)
2. Selanjutnya, silahkan Anda download Jquery.
3. Setelah itu, buat file baru index.html. Dan silahkan letakan file Bootstrap dan Jquery tadi didalam satu folder yang sama. Struktur foldernya jadi seperti ini.
 |
| Struktur Folder Bootstrap 4 |
4. Jika sudah betul, silahkan isi file index.html nya dengan script berikut ini.
<!doctype html><html lang="en"><head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://www.alamkoding.web.id/2019/08/css/bootstrap.min.css" crossorigin="anonymous"> <title>Hello, world!</title></head><body> <h1>Hello, world!</h1> <a href="#" class="btn btn-sm btn-primary">Ini Button</a> <!-- JavaScript --> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script></body></html>5. Jika sudah, selanjutnya bisa langsung anda buka file index.html nya pada browser favorit anda.
Versi Praktis Tidak Perlu Download File Bootstrap
Jika anda ingin install Bootstrap tanpa harus mendownload filenya. Anda bisa langsung gunakan CDN bootstrap seperti ini. (Syaratnya, perangkat yang anda gunakan harus tersambung dengan Internet)
<!doctype html><html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body></html>Nah begitulah cara menginstal Bootstrap. mudah bukan?
Demikianlah untuk artikel kali ini tentang pengenalan Bootstrap, anda bisa langsung mencoba script untuk membuat component pada dokumentasi Bootstrap nya sekarang.
Jika ada yang ingin anda tanyakan, silahkan langsung tanyakan saja di kolom komentar. Baiklah saya rasa cukup, jika artikel ini bermanfaat, tolong bagikan ke teman-teman anda ya. Terima kasih.
Komentar
Posting Komentar