Cara Install dan Menggunakan Bootstrap 4 Terbaru

Posted on
Cara Install dan Menggunakan Bootstrap 4 Terbaru

 

Halo sahabat programmer, jumpa lagi dengan lambecode. Pembahasan kali ini tentang cara install dan mengguanakan Bootstrap 4. Saat ini, tampilan website ataupun aplikasi online menjadi pengaruh besar bagi penggunanya. Banyak pengguna yang menginginkan tampilan yang menarik dan mudah digunakan baik di sisi desktop maupun di sisi mobile. Oleh karena itu di sini kami akan menjelaskan salah satu toolkit yang dapat anda gunakan untuk memenuhi kebutuhan pembuatan tampilan yang menarik pada suatu halaman website atau aplikasi online.

Pengertian Bootstrap

Bootstrap adalah library atau framework open source yang digunakan untuk membangung web user interface agar lebih responsif dan mudah. Yang dimaksud dengan web user interface merupakan tampilan tatap muka anatara user dengan web application. Dengan adanya bootstrap, seorang programmer ataupun developper sangat terbantu dalam membangun sistem user interface(UI).
Elemen yang dikelola oleh bootstrap adalah CSS dan JS(JavaScript) pada tag HTML. Dengan bantuan plugin dari jQuery, bootstrap menjadi sangat berguna dan penuh dengan animasi. Semua komponen yang telah dibuat oleh bootstrap baik itu CSS maupun javascript disediakan dalam class dan id. Sehingga untukmenggunakan bootstrap kita hanya perlu memanggil class bootstrap atau id yang telah disediakan. Hal itu tentunya sangat mudah daripada harus membuat css sendiri. Selain itu, kita juga dapat memodifikasi css dan js yang disediakan bootstrap sesuai dengan keinginan kita sendiri.
 
Pada umumnya, bootstrap digunakan untuk membuat UI front-end. Namun ada juga yang menggunakan bootstrap untuk sisi back-end. Front-end adalah tampilan yang dapat dilihat / diakses semua user sedangkan back-end adalah tampilan yang hanya bisa dilihat oleh operator,admin, dan beberapa user saja. Karena kemudahan bootstrap banyak website dan aplikasi online yang menggunakannya sebagai pondasi untuk membuat user interface. Seperti salah satu contohnya, twitter. Twitter merupakan aplikasi media sosial yang menggunakan bootstrap. Hal itu karena twitter merupakan developper pertama bootstrap.
 
Saat ini, sudah ada beberapa versi yang dapat anda download dari situs utama bootstrap. Dimulai dari versi 2, versi 3, hingga yang terbaru saat ini versi 4. Tentunya setelah versi 4 pasti akan ada pengembangan dari bootstrap mungkin versi 5. Untuk versi 2 dan versi 3 tidak jauh beda, namun untuk versi 4 memiliki perubahan yang cukup signifikan dari nama class maupun id.
 

Cara Menggunakan Bootstrap 4

Bootstrap 4 merupakan versi terbaru dari bootstrap. Terjadi perubahan signifikan daripada bootstrap 3. Dimulai dari pemanggilan class banyak yang baru dan juga beberapa fitur yang juga bertambah. Untuk mengguanakan bootstrap, download bootstrap dari situs resminya di sini. Setalah download bootstrap, jangan lupa untuk mendownload  jQuerydan diletakkan sebelum js bootstrap.
Setelah mendownload, perhatikan struktur file dari bootstrap 4 berikut ini.

Komponen yang harus ada ketika ingin menggunakan bootstrap 4 adalah css dan js yang di download dari situs utama bootstrap. Pada skema di atas sudah terdapat banyak css dan js namun yang digunakan untuk project hanya 2 buah css dan js yang sangat penting. Berikut ini penjelasan dan fungsi dari css dan js tersebut.

 

CSS Files

CSS files Layout Content Components Utilities
bootstrap.css
bootstrap.min.css
Included Included Included Included
bootstrap-grid.css
bootstrap-grid.min.css
Only grid system Not included Not included Only flex utilities
bootstrap-reboot.css
bootstrap-reboot.min.css
Not included Only Reboot Not included Not included
Pada tabel di atas, file css yang papling lengkap adalah bootstrap.css atau bootstrap.min.css. Krena kedua file tersebut telah include semua fitur dari bootstrap 4. Namun file css yang lain tetap dapat digunakan sesuai keinginan pengguna jika hanya ingin menggunakan beberapa fitur dari bootstrap 4.

 

JS Files

JS files Popper jQuery
bootstrap.bundle.js
bootstrap.bundle.min.js
Included Not included
bootstrap.js
bootstrap.min.js
Not included Not included
Pada tabel di atas, file js yang paling lengkap adalah bootstrap.bundle.js atau bootstrap.bundle.min.js. Dimana kedua file tersebut sudah include popper. Popper merupakan library untuk menigkatkan auto-placement dari popover, tooltip, dan dropdown. Jika anda hanya memanggil bootstrap.js tentu saja anda harus download popper sendiri dan ditambahkan secara manual pada file project anda. Bootstrap 4 berbeda dengan bootstrap 3 yang tidak membutuhkan pemanggilan popper pada file js.
Seperti penjelasan sebelumnya, bootstrap membutuhkan library dari jQuery agar dapat menjalankan beberapa animasi dari javascript sehingga harus mendownload jQuery secara manual. File jQuery.js harus diletakkan paling atas sebelum semua pemanggilan file js.

Cara Install Bootstrap 4 Onine

Proses install bootstrap 4 dengan cara online biasa dikenal dengan CDN(Content Delivery Network). User hanya tinggal memanggil css dan js dari server cdn, proses ini lebih mudah dan dinamis daripada proses install bootstrap 4 secara offline. Namun kelemahannya, user tidak dapat memodifikasi / melakukan custom terhadap file tersebut karena file tersebut bukan ada di lokal. Berikut ini proses pemanggilan css dan js bootstrap 4 dari CDN.

Cara Install Bootstrap 4 Offline

Proses install boostrap 4 dengan cara offline dilakukan dengan download langsung dari situs resmi bootstrap di sini. Setelah download bootstrap 4, extract zip ke dalam folder project yang akan digunakan. Berikut ini struktur file yang telah di download.

Berikut ini contoh pemanggilan file css dan js dari bootstrap 4 :


Untuk lebih jelas terkait bootstrap 4 buka dokumentasi dari website resmi bootstrap 4 di sini atau perhatikan demo berikut ini yang dapat anda modifikasi :

See the Pen jvwjLy by b1em8in (@b1em8in) on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *