Pengenalan Apa Itu Bootstrap 4 dan Penerapannya untuk Membuat Website Responsive

materi tentang bootstrap 4

Bootstrap terus berkembang dan sampai saat ini sudah mencapai versi ke-4.

Sama seperti teknologi pada umumnya, bootstrap ikut berkembang seiring dengan perkembangan web development yang terus berubah dan semakin maju.

Bootstrap memanjakan penggunanya yang menginginkan kemudahan serta kepraktisan dalam membangun tampilan halaman web sehingga tidak perlu membangunnya dari nol.

Developer website sangat terbantu karena hal ini.

Pekerjaan dalam membangun website tidak lagi membutuhkan waktu yang lama karena harus membangun dari nol.

… melalui bootstrap yang sudah menyediakan “paket class” akan mempercepat kinerja dan developer bisa memaksimalkan waktunya untuk fokus kepada bagian program yang lainnya.

Pengertian Bootstrap

Bootstrap merupakan sebuah framework front-end yang dibuat untuk mempercepat dan mempermudah proses development web yang terdiri dari file css, javascript, jquery dan lain-lain.

Di dalam Bootstrap terdapat beragam template HTML dan CSS seperti form, button, table, navigation, modal, pop up, alert dan lain-lain.

Bootstrap mempermudah developer dalam mengembangkan sebuah website yang responsive.

Maksud dari responsive adalah sebuah website bisa diakses dari perangkat apa saja (PC, Handphone atau Tab) namun halaman web menyesuaikan ukuran layar pengguna.

… sehingga tampilan halaman web tidak akan berantakan dan menyusahkan pengguna.

Hebat!

Alasan Web Developer Menggunakan Bootstrap

Selain alasan yang sudah saya utarakan sebelumnya, masih ada beberapa alasan lagi yang membuat web developer sering menggunakan bootstrap, yaitu:

1# Mudah Digunakan

Setiap orang yang mempunyai pengetahuan basic tentang HTML dan CSS bisa menggunakan bootstrap.

2# Fitur yang Responsive

Bootstrap memiliki fitur CSS yang responsive dan bisa menyesuaikan dengan tablet, handphone atau desktop.

3# Pendekatan Mobile yang Pertama

Bootstrap merupakan pendekatan pertama yang menganut konsep responsive web menggunakan framework

4# Kompatible dengan Browser

Bootstrap 4 sudah compatible dengan browser yang modern, seperti Chrome, Firefox, Edge, Safari dan lain-lain)

Perbedaan Bootstrap 3 dan Bootstrap 4

1. Bootstrap 4 merupakan versi terbaru dari Bootstrap.

2. Bootstrap 4 dilengkapi dengan beberapa komponen baru dan performa yang lebih baik.

3. Bootstrap 4 mendukung browser-browser versi terbaru. Untuk Internet Expoler 9 kebawah tidak disupport.

Cara Menggunakan Boostrap

Banyak jalan menuju Roma adalah istilah yang sering kita gunakan dalam kehidupan sehari-hari.

Begitupun dengan bootstrap yang tidak hanya bisa digunakan dengan satu cara saja.

Pertama, gunakan Content Delivery Network (CDN)

cara menggunakan bootstrap dengan cdn

Kedua, Download file langsung dari situs resminya di getbootstrap.com, extract lalu simpan di dalam folder project.


Hasil file yang sudah didownload simpan di project, dan susun seperti pada gambar di atas.

Setelah itu, kita panggil filenya dengan cara:

cara menggunakan bootstrap hasil download

Membuat Project Pertama dengan Boostrap 4

Pada kesempatan kali ini saya akan membuat project untuk menampilkan “Hello World menggunakan Boostrap.

Contoh:

membuat project pertama dengan bootstrap

Simpan dengan nama myProject.html

Setelah itu silahkan buka file dengan cara klik kanan, lalu pilih open with, lalu pilih browser favorit yang Anda gunakan.

Penting!

Karena dalam contoh project ini menggunakan CDN, jadi komputer harus terhubung dengan internet.

Hasilnya:

1# Tampilan Sebelum Menggunakan Boostrap

hasil project tanpa menggunakan bootstrap

2# Tampilan Setelah Menggunakan Bootstrap

hasil project menggunakan bootstrap

Dari perbedaan ini Anda pasti sepakat kalau menggunakan bootstrap lebih baik daripada tidak menggunakannya.

Tidak perlu lagi membuat file CSS dari nol yang akan memperlambat pekerjaan, tapi bootstrap sudah menyediakannya dan tinggal langsung pakai saja.

Kesimpulan

Saat teknologi semakin canggih, maka kita dituntut untuk terus mengikuti perkembangan zaman.

Dalam hal pergeseran budaya dari menggunakan internet melalui desktop, sekarang sudah bisa menggunakan handphone.

Maka dari itu, Bootstrap hadir sebagai solusi untuk memperbaiki kinerja website yang bisa diakses melalui perangkat apa saja.

Sehingga tidak menurunkan performa website pada pengguna.

Selamat bereksperimen dengan bootstrap!

Silahkan ceritakan pengalamanmu menggunakan bootstrap 4 melalui kolom komentar di bawah ya.

Sekian dulu tutorial pengertian apa itu bootstrap dan Penerapannya untuk Membuat Website Responsive. Semoga bermanfaat. Aamiin.

Share Artikel Ini Ya :)

Makasih.

Related Posts

Saya Mau Beri Komentar

Comments