Mengenal Framework Bootstrap

78 / 100
Mengenal bootstrap
Sumber Gambar : bootstrap

Memiliki sebuah halaman website yang unik, enak dipandang ataupun user friendly tentu tidak terlepas dari peran serta seorang front-end web developer. Memaksimalkan koding yang berkaitan dengan CSS ini merujuk pada tampilan dari halaman website tersebut. Namun koding CSS ini tentu akan sangat banyak sekali source code-nya. Untuk memudahkan hal tersebut maka hadirlah yang dinamakan dengan framework. Dalam hal ini kami akan membahas sebuah framework bootstrap yang cukup mudah untuk anda gunakan. Dengan framework ini struktur koding akan lebih rapih dan mudah untuk proses pengembangan kedepannya. 

Apa yang anda ketahui tentang framework bootstrap ?

Sumber Gambar : pixabay.com

Pengertian Bootstrap

Jika anda seorang developer website mungkin tidak asing lagi dengan yang namanya framework dan pastinya bukanlah hal yang baru bagi anda. Framework ini merupakan kumpulan dari script koding yang telah tersusun rapih sesuai dengan fungsinya masing-masing. Dengan adanya framework, developer menjadi lebih mudah dan terbantu ketika ingin membuat halaman website. Waktu pengerjaan menjadi semakin lebih efisien dan maksimal. Framework bootstrap adalah implementasi dari semua itu. Lalu apa framework bootstrap ini ?.

Bootstrap merupakan sebuah framework yang bersifat open source dimana lebih dominan digunakan dari sisi front end atau interface user. Framework ini dibangun oleh Jacob Thornton dan juga Mark Otto dengan tujuan untuk mempercepat pembuatan design halaman web. Namun nyatanya dari sisi back-end pun ada yang menggunakannya sebagai pelengkap.

Framework bootstrap ini di dalamnya terdiri dari berbagai source code HTML dan juga CSS dimana di dalamnya memuat komponen dan fungsi dasar hingga advanced. Baik itu menu navigasi, button, background, form dan sebagainya.

Fungsi Bootstrap

Penggunaan bootstrap ini memberikan dampak yang positif bagi para web developer utamanya dari sisi front end. Dengan adanya framework bootstrap ini para web developer seperti diberikan tools tambahan untuk membangun website tidak hanya rapih dari sisi interface user saja tapi juga bisa membangun struktur koding yang teratur. Dan tentunya kedepan jika ada pengembangan dari halaman website yang menggunakan framework bootstrap ini akan lebih mudah untuk penambahan modul karena sudah tersusun dengan rapih. Adapun point-point yang menggambarkan fungsi umum dari framework bootstrap ini yaitu sebagai berikut :

  • Menghemat waktu proses pembuatan halaman website terutama dari sisi front end.
  • Interface user yang lebih modern dan enak dipandang.
  • Halaman website lebih ringan terutama saat loading halamannya.
  • Halaman website yang responsive mobile.

Komponen utama bootstrap

Framework bootstrap ini berupa sekumpulan script atau source code yang dapat menjalankan berbagai fungsi dimana di dalamnya terdapat modul-modul tertentu yang berpedoman dengan kerangka website pada umumnya. Adapun komponen utama dari bootstrap sendiri yaitu sebagai berikut :

  • Bootstrap.js (bootstrap extensi javascript)

File ini merupakan bagian modul yang menangani aktifitas interaksi dari sebuah halaman website. Dari mulai entry data, aktifitas registrasi dan lain sebagainya. Namun script tersebut cukup banyak sekali jika harus dibuat satu per satu. Jika halaman website sederhana dan hanya berisi source code javascript yang sedikit tidak jadi masalah. Namun jika banyak itu yang jadi persoalan. Namun disini ada sebuah library javascript yang dapat mengatasi hal tersebut. Itulah yang disebut dengan jQuery.

JQuery ini merupakan sebuah library javascript yang digunakan untuk menghemat waktu pengerjaan dan pembuatan script. Dimana dalam hal ini programmer tidak perlu melakukan pengetikan berulang. Library jQuery ini bersifat open source dimana setiap pengembang meskipun sudah ada source code javascript dari sebuah halaman website masih bisa memodifikasinya. Website menjadi lebih dinamis dan user friendly. Selain itu juga, JQuery ini merupakan library javascript yang populer di kalangan programmer. Dengan fiturnya yang mudah serta dapat dimodifikasi oleh beberapa pengembang pertama ke pengembang berikutnya menjadikan ini digemari oleh para programmer.

  • Bootstrap.css (Bootstrap extensi css)

Bootstrap.css ini merupakan bagian framework yang bertugas untuk mengatur layout dari halaman website yang dibuat. Selain itu juga ada HTML yang berperan beriringan dengan css ini. HTML fokus pada bagian konten dan struktur halaman website sedangkan css pada bagian layoutnya secara keseluruhan. Seperti warna dasar website, background, ukuran huruf dan juga jenis hurufnya, bentuk form atau tabel dan sebagainya. Antara HTML, CSS dan library javascript (jQuery) ini diperlukan agar halaman website ini responsif, elegan dan tidak datar begitu saja.

  • Glyphicons
Sumber Gambar : bootstrap

Glyphicons merupakan icon-icon yang terdapat di dalam bootstrap dimana bisa kalian gunakan untuk mempercantik tampilan website seperti huruf, push button, form entry data, navigasi dan sebagainya. Untuk menggunakan glyphicons ini cukup mudah. Anda tinggal download terlebih dahulu di framework bootstrap atau bisa ambil per source code untuk ditempelkan di website yang sedang anda buat. Berikut contoh script dari glyphicons yang bisa anda gunakan.

Cara menggunakan bootstrap

Sumber Gambar : pixabay.com

Jika anda ingin menggunakan framework bootstrap, tentunya anda harus melakukan instalasi bootstrap terlebih dahulu. Untuk mendapatkan paket instalasinya anda bisa mengunjungi halaman resmi bootstrap berikut ini : https://getbootstrap.com/docs/4.5/getting-started/introduction/

Hingga juni 2020, bootstrap telah merilis versi ke 5. Untuk mendapatkannya anda bisa download di link berikut : https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/

Bootstrap sepertinya akan terus merilis versi-versi terbarunya. Kembali kepada anda akan menggunakan versi ke berapa. Untuk fungsi dan manfaatnya tidak jauh berbeda, hanya ada penambahan-penambahan fitur saja. Silahkan dicoba satu per satu untuk merasakan perbedaannya. Jika tidak pilih satu versi yang menurut anda tepat untuk website yang akan anda buat. Berikut screenshot jenis-jenis file botstrap setelah di download.

Cara Instalasi Bootstrap

Instalasi bootstrap ini dapat anda gunakan dengan berbagai cara baik itu secara online ataupun offline. Dalam penerapannya anda bisa menggunakan composer, bower dan juga npm. Berikut screenshot perintah instalasinya.

Jika anda belum memahami apa itu composer, bower dan juga npm maka anda bisa instalasi bootstrap dalam 8 langkah sederhana seperti berikut ini :

  • Anda harus mengunjungi situs resmi bootstrap.
  • Lalu pilih versi bootstrap di menu atas halaman yang akan anda gunakan.
  • Maka akan muncul button download di bagian kanan atas halaman.
  • Setelah itu anda akan diarahkan pada dokumentasi atau file bootstrap versi tersebut.
  • Klik button download.
  • Setelah selesai download maka hasilnya dalam bentuk winrar.
  • Extract File winrar tersebut.
  • Lalu copy folder file hasil extract ke project anda.
  • Bootstrap siap digunakan.

Leave Comment

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