Tutorial Bootstrap Part 1: Pengertian Framework CSS Bootstrap

Sebagai materi pertama dari seri tutorial belajar Bootstrap di Duniailkom, kita akan bahas pengertian Bootstrap serta melihat apa keunggulan, sejarah singkat, serta alternatif CSS framework selain Bootstrap.


Pengertian Bootstrap

Bootstrap adalah open source front-end framework untuk merancang tampilan web. Bootstrap terdiri dari kumpulan kode HTML, CSS dan JavaScript "siap pakai" yang memudahkan kita dalam membuat desain web.

Bootstrap juga sering disebut sebagai CSS framework karena berisi sebuah "kerangka kerja" (framework) bagaimana cara menyusun kode HTML dan CSS sesuai dengan aturan dari Bootstrap. Namun karena Bootstrap juga menggunakan JavaScript, maka lebih pas disebut sebagai front-end framework.

Dengan Bootstrap, kita bisa membuat tampilan web menarik tanpa harus paham kode-kode rumit dibaliknya. Dasar yang diperlukan cukup basic HTML, CSS dan sedikit JavaScript jika ingin membuat efek-efek interaktif.

Bootstrap bersifat open source dan bisa digunakan secara gratis. Website resmi Bootstrap beralamat di getbootstrap.com.

Website resmi Bootstrap

 


Keunggulan Bootstrap

Kenapa harus pakai framework seperti Bootstrap? Ada beberapa alasan:

  • Browser compatibility. Kita tidak perlu khawatir dengan perbedaan tampilan antara satu web browser dengan web browser lain. Jika anda pernah membuat design web menggunakan CSS sebelumnya, tidak jarang terdapat perbedaan implementasi dari web browser yang satu dengan web browser lain.
  • Faster Development. Kita bisa merancang tampilan web dengan cepat karena Bootstrap sudah menyediakan kode-kode yang sudah jadi untuk membuat berbagai komponen web, seperti menu navigasi, tombol, form, teknik responsive, dll.
  • Great Design. Bootstrap sudah menyediakan standar design yang bagus sehingga sangat membantu terutama bagi programmer yang kurang ahli dalam hal design. Terlebih lagi tampilan web yang dibuat dengan Bootstrap sudah responsive secara bawaan.
  • Mudah Dipelajari. Untuk bisa menggunakan sebagian besar fitur yang ada di Bootstrap, cukup dengan menulis beberapa class ke dalam kode HTML tanpa perlu memahami kode CSS yang ada dibaliknya.

Dibalik semua keunggulan ini, Bootstrap juga sering mendapat kritikan karena tampilannya terkesan "itu-itu saja". Hal ini tidak terlepas dari efek kepopuleran Bootstrap sendiri.

Sudah sangat banyak website yang menggunakan Bootstrap sehingga tidak heran ada kemiripan antara satu web dengan web yang lain. Selain itu banyak juga developer yang "malas" mengubah standar tampilan bawaan Bootstrap (misalnya tetap menggunakan warna biru yang menjadi ciri khas Bootstrap).

Bootstrap merupakan sebuah "front-end framework". Artinya Bootstrap secara khusus menangani perancangan desain tampilan saja seperti merapikan design form, membuat slideshow, atau membuat jendela popup. Pemrosesan form serta pengolahan data sudah berada di luar jangkauan Bootstrap.

Jika anda ingin memproses form, itu sudah bagian back-end programming yang bisa diproses menggunakan bahasa PHP atau memakai framework khusus back-end seperti Code Igniter / Laravel.


Sejarah Bootstrap

Sekitar tahun 2010, Mark Otto and Jacob Thornton yang merupakan developer di Twitter mengembangkan sebuah framework untuk internal perusahaan. Framework ini diberi nama Twitter Blueprint.

Alasan di balik pengembangan ini adalah agar Twitter memiliki tampilan yang konsisten untuk berbagai project. Sebelumnya, developer di Twitter memakai library yang berbeda-beda untuk setiap project sehingga susah dikelola. Twitter Blueprint di harapkan bisa menjadi framework universal untuk berbagai project yang dikerjakan Twitter.

Setelah beberapa bulan pengembangan (dan penggunaan internal), Twitter Blueprint berubah nama menjadi Bootstrap dan dirilis sebagai open source project pada 19 Agustus 2011. Sejak itu, Bootstrap bisa dipakai oleh berbagai developer di seluruh dunia (tidak hanya untuk karyawan Twitter saja). Banyak programmer dan web designer juga ikut bergabung mengembangkan Bootstrap.

Pada 31 Januari 2012, Bootstrap 2 di rilis dengan penambahan 12 kolom responsive grid system, menggunakan icon dari Glyphicons, serta penambahan berbagai komponen baru.

Selanjutnya, Bootstrap 3 dirilis pada 19 Agustus 2013 dengan beberapa perubahan seperti mengadopsi flat design dan menggunakan konsep mobile-first.

Bootstrap 4 hadir pada 18 Januari 2018, 4 tahun setelah versi 3. Versi ini menggunakan konsep flexbox dalam pembuatan layout (sebelumnya menggunakan sistem float), serta mengganti CSS pre-processor internal dari Less ke Sass.

Terakhir, Bootstrap 5 di rilis pada 5 Mei 2021 setelah melewati beberapa versi alpha dan beta sepanjang 2020. Versi inilah yang akan kita pakai sepanjang tutorial ini.


Framework CSS Alternatif Selain Bootstrap

Bootstrap saat ini masih menjadi front-end framework yang paling populer, tapi Bootstrap bukan satu-satunya framework untuk membuat design web dengan cepat. Terdapat berbagai framework lain, diantaranya:

Dan masih banyak lagi…. (bisa search di Google dengan keyword "CSS Framework")

Apakah saya harus belajar semua ini? Well… tidak harus semua.

Kita harus bisa mengatur waktu dan tenaga untuk memilih apa saja yang sebaiknya dipelajari. Setiap framework punya kelebihan dan kelemahan masing-masing. Yang terpenting adalah bagaimana cara agar project yang dikerjakan bisa selesai, terlepas memakai framework apa.

Jika punya waktu dan ingin fokus di bidang web design, tidak ada salahnya mempelajari 2 atau 3 front-end framework lagi skill yang dimiliki lebih beragam. Sedikit banyak kita bisa belajar bagaimana prinsip kerja framework dan menentukan apa yang cocok untuk project A, dan apa yang pas untuk project B.

Jika harus memilih satu saja, menurut saya Bootstrap tetap menjadi pilihan terbaik. Karena relatif mudah di gunakan dan sudah sangat terkenal.


Itulah perkenalan kita dengan framework CSS Bootstrap. Bootstrap 5 menjadi versi terakhir saat tutorial ini ditulis, dan itulah yang akan kita pakai sepanjang tutorial belajar Bootstrap di Duniailkom.

Lanjut, berikutnya akan dibahas tentang Cara Menginstall VS Code.

Saat ini di Duniailkom tersedia eBook / buku Bootstrap 5 Uncover. Dengan 529 halaman A4, materi di buku jauh lebih banyak daripada tutorial Bootstrap di web Duniailkom. Penjelasan lebih lanjut bisa ke: Bootstrap 5 Uncover – Panduan Belajar Framework Bootstrap.

Add Comment