Apa Itu Boostrap?

Pengertian dari Bootstrap adalah kerangka kerja CSS yang bersifat open source dan digunakan untuk kebutuhan pembuatan tampilan desain visual dari aplikasi web atau situs website. Kerangka kerja yang digunakan berbentuk template desain berbasis HTML dan CSS untuk kebutuhan pengembangan navigasi, tombol, tipografi, formulir, dan komponen antarmuka yang lainnya. 

Selain itu, Bootstrap juga memiliki fitur yang mencakup library dari JavaScript. Untuk penggunaan dari framework ini digunakan untuk membantu dalam menyusun program aplikasi pada sisi front end (client – side). Untuk sekarang, Bootstrap sangat diminati oleh berbagai pengembang web melalui platform Github untuk membantu proses pembuatan desain aplikasi atau website yang lebih komprehensif dan modern.

Manfaat & Keunggulan Bootstrap

Setelah dirilis secara open-source pada tahun 2011, kepopuleran Bootstrap terus meningkat. Selain fleksibel dan mudah digunakan, banyak manfaat lain yang bisa didapatkan loh.

Beberapa keuntungan utama dari Bootstrap adalah:

1. Beginner friendly 一 Bootstrap mudah dan cepat untuk digunakan dan dipelajari.
2. Responsif dan mobile friendly 一 Menawarkan kompatibilitas browser yang luas. 
3. Konsisten 一 Bootstrap memberikan desain yang konsisten dengan menggunakan komponen sama yang ada di dalam framework tersebut. 
4. Scalable 一 Menawarkan ekstensibilitas yang luas menggunakan javascript yang hadir dengan dukungan bawaan untuk plugin jQuery dan API JavaScript.
5. Fleksibel 一 Bootstrap juga bisa digunakan dengan editor dan teknologi dan bahasa sisi server apa pun, mulai dari ASP.NET, PHP, hingga Ruby on Rails.
6. Komunitas aktif 一 Bersifat open-source, framework Bootstrap mempunyai komunitas developer dan juga desainer yang cukup besar di Slack room, GitHub, dan lain-lain.

Dengan Bootstrap, web developer bisa lebih fokus dalam pengembangan website dan membuat situs web yang responsif dan juga cepat.  

Cara Menginstall Bootstrap

Bagaimana cara untuk menginstall Bootstrap framework? Terdapat dua cara untuk dapat mengintegrasikannya ke dalam format kode program kerangka HTML dan CSS, yaitu dengan cara manual atau online. Untuk kali ini, aku akan memberikan tips untuk instalasi secara online saja.

Untuk proses instalasi secara online menggunakan format berbasis CDN (Content Delivery Network), sehingga proses integrasi menjadi lebih praktis dan mudah. Namun, kekurangan dari pemanfaatan CDN ini adalah dapat mengurangi tingkat kecepatan dari website. Berikut ini merupakan script untuk memanggil fungsi Bootstrap menggunakan CDN.

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”></script>

Sehingga, perintah atau instruksi di atas akan memanggil file Bootstrap dan Kamu dapat menyalin script tersebut ke dalam kode program Kamu agar dapat digunakan untuk kebutuhan pemanggilan class atau identifier yang lainnya.

Cara Menggunakan Bootstrap

Penggunaan dari kerangka kerja Bootstrap terbilang cukup mudah dan tidak memerlukan penulisan rangkaian kode yang panjang. Sehingga, sangat memudahkan aktivitas kerja dari setiap web developer untuk mengembangkan website yang lebih optimal dari sisi front end.

Berbagai fitur dan metode telah ditambahkan pada versi terbaru, sehingga menambah fleksibilitas dari Bootstrap itu sendiri. Berikut merupakan beberapa fitur atau elemen yang dapat dikustomisasi pada Bootstrap.

1. Pembuatan Tabel

Bootstrap memberikan berbagai kemudahan dalam mengembangkan struktur tabel dengan penulisan kode program yang lebih singkat, jelas, dan mudah dipahami. Kamu hanya perlu menambahkan kode pada atribut class saja. Berikut ini terdapat beberapa contoh penulisannya:

<table class=”table table-stripped”> atau <table class=”table table-hover”> atau <table class=”table table-responsive”>

2. Penambahan Button

Selanjutnya, kita juga dapat menambahkan button dengan menggunakan berbagai perintah sebagai berikut. 

Kamu dapat menuliskan perintah pada atribut class, “.btn”, “.btn-primary (untuk tombol berwarna biru)”, “.btn-warning (tombol berwarna kuning)”, “.btn-danger (tombol berwarna merah)”, “.btn-secondary (tombol berwarna abu – abu”, “.btn-success (tombol berwarna hijau”, dan masih terdapat jenis tombol yang lainnya.

3. Membuat Pesan Notifikasi (Alert)

Untuk pembuatan fitur pesan notifikasi sendiri, Kamu dapat menuliskan kode yang hampir sama dengan button di atas. Kamu hanya perlu untuk merubah perintah “.btn”, menjadi “.alert” saja. Fungsi dari alert sendiri adalah untuk menginformasikan dan mengindikasikan bahwa terdapat pesan penting atau proses yang tidak berjalan dengan semestinya.

4. Membuat Tampilan Gambar

Pada Bootstrap, Kamu juga dapat menambahkan elemen gambar dengan berbagai jenis bentuk. Kamu perlu untuk menambahkan perintah dengan contoh penulisan sebagai berikut.

<img class=”img-responsive”> atau <img class=”rounded”> atau <img class=”img-thumbnail”>

5. Pembuatan Panel

Untuk pembuatan panel sendiri, proses penulisannya hampir sama dengan fitur di atas, Kamu hanya perlu untuk merubah struktur penulisan mengikuti perintah, misalnya dari “.btn” menjadi “.panel”. Terdapat beberapa contoh penulisannya sebagai berikut.

<div class=”panel panel-default”> atau <div class=”panel panel-primary”>