Bootstrap (kerangka kerja)

Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs web dan aplikasi web. Kerangka kerja ini berisi templat desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, dan komponen antarmuka lainnya, serta juga ekstensi opsional JavaScript. Tidak seperti kebanyakan kerangka kerja web lainnya, kerangka kerja ini hanya fokus pada pengembangan front-end saja.

Bootstrap
TipeFramework CSS dan perangkat lunak bebas dan sumber terbuka
Versi pertama19 Agustus 2011; 12 tahun lalu (2011-08-19)
Versi stabil
5.3.3 (20 Februari 2024)
LisensiLisensi MIT (Lisensi Apache 2.0 sebelum Bootstrap v3.1.0)
Karakteristik teknis
Sistem operasiLintas platform
Platformweb platform (en)
Bahasa pemrogramanJavascript, Cascading Style Sheets, HyperText markup language dan Sass (en)
Informasi pengembang
PembuatMark Otto, Jacob Thornton
PengembangBootstrap Core Team[1]
Informasi tambahan
Situs webhttps://getbootstrap.com/
Stack ExchangeEtiqueta
Free Software DirectoryBootstrap
Twitter: getbootstrap
Sunting di Wikidata Sunting di Wikidata • Sunting kotak info • L • B
Info templat
Bantuan penggunaan templat ini

Bootstrap adalah proyek yang paling banyak dibintangi keenam di GitHub, dengan lebih dari 139.000 bintang.[3]

Sejarah sunting

Awal mula sunting

Bootstrap, awalnya bernama Twitter Blueprint, dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter sebagai kerangka kerja untuk mendorong konsistensi di perangkat internal yang sesuai. Sebelum Bootstrap, berbagai pustaka sudah banyak digunakan untuk pengembangan antarmuka, yang menyebabkan ketidak-konsistenan dan beban pemeliharaan yang berat. Menurut Mark Otto, pengembang Twitter:

"Sebuah grup developer super kecil dan juga aku telah bersama-sama untuk mendesain dan membangun perangkat internal baru dan melihat kesempatan untuk melakukan hal yang lebih banyak lagi. Melalui proses itu, kami melihat bahwa kami sedang membangun sesuatu yang lebih substansial dari perangkat internal lainnya. Beberapa bulan kemudian, kami menghasilkan sebuah versi paling awal dari Bootstrap, sebagai sebuah cara untuk berbagi pola desain yang lazim dan dan aset-aset perusahaan."

Setelah beberapa bulan pengembangan oleh sebuah kelompok kecil, banyak pengembang di Twitter mulai memberikan kontribusi untuk proyek ini sebagai bagian dari Hack Week, sebuah pekan ala hackathon untuk tim pengembangan Twitter. Nama itu diganti dari Twitter Blueprint menjadi Bootstrap, dan dirilis sebagai proyek sumber terbuka pada 19 Agustus 2011.[5] Hal ini terus dipertahankan oleh Mark Otto, Jacob Thornton, dan sekelompok kecil pengembang inti, serta sejumlah besar komunitas dari para kontributor.[6]

Bootstrap 2 dan 3 sunting

Pada 31 Januari 2012, Bootstrap 2 dirilis, yang menambahkan sistem layout dua belas kolom grid yang responsif, dukungan built-in untuk Glyphicons, beberapa komponen baru, serta perubahan dari beberapa komponen yang sudah ada.[7]

Pada 19 Agustus 2013, Bootstrap 3 dirilis, yang didesain ulang komponennya untuk menggunakan desain flat, dan pendekatan mobile-first.[8]

Bootstrap 4 sunting

Pada 29 Oktober 2014, Mark Otto mengumumkan bahwa Bootstrap 4 sedang dalam pengembangan.[9] Versi alfa pertama dari Bootstrap 4 dirilis pada 19 Agustus 2015.[10] Pada 6 September 2016, Mark menghentikan pengerjaan Bootstrap 3 dalam rangka untuk meluangkan waktu untuk pengerjaan Bootstrap 4. Sejauh ini, sudah lebih dari 17.500 kommit yang telah dibuat untuk basis kode Bootstrap 4. Versi beta pertama dirilis pada 10 Agustus 2017.[11]

Versi stabil dari Bootstrap 4 yang dirilis pada 18 Januari 2018,[12] mayoritas merupakan tulisan ulang dari Bootstrap 3. Perubahan yang signifikan di antaranya:

  • Peralihan dari Less menuju Sass.
  • Peluncuran but ulang untuk normalisasi css.
  • Menghapus dukungan peramban web IE8, IE9, dan iOS 6.
  • Penambahan dukungan flexbox dan menghapus dukungan komponen non-flexbox.
  • Penambahan kustomisasi pilihan navigasi.
  • Penambahan utilitas untuk pemberian ruangan dan ukuran yang responsif.
  • Beralih dari piksel ke em.
  • Meningkatkan ukuran fon global dari 14px menjadi 16px.
  • Menghapus panel, keluku, dan juga komponen-komponen yang mendukung elemen cards.
  • Menghapus fon ikon Glyphicons.
  • Menghapus komponen pembuat halaman (pager).
  • Menambahkan sejumlah besar utilitas "class".
  • Memperbaiki perancangan formulir.
  • Memperbaiki tombol dan dropdown.
  • Memperbaiki objek media dan "class" untuk gambar.
  • Penulisan ulang hampir semua komponen, plugin jQuery, dan dokumentasi.

Bootstrap 5 sunting

Bootstrap 5 adalah versi baru Bootstrap yang akan datang. Perubahan besar termasuk:[13][14][15]

  • Menghapus jQuery dari komponen dan menggunakan vanilla JavaScript.
  • Menulis ulang komponen grid untuk mendukung fitur kolom yang ditempatkan di luar baris dan gutter (ruang antar kolom) yang responsif.
  • Migrasi perangkat lunak dokumentasi dari Jekyll ke Hugo.
  • Menghapus dukungan peramban web IE10.
  • Memindahkan infrastruktur pengujian dari QUnit ke Jasmine.

Fitur-fitur sunting

Bootstrap 3 mendukung versi terbaru Google Chrome, Firefox, Internet Explorer, Opera, dan Safari (kecuali pada Windows). Selain itu mendukung kembali IE8 dan Firefox Extended Support Release (ESR) terbaru.[16]

Sejak versi 2.0, Bootstrap mendukung desain web responsif. Ini berarti tata letak halaman web secara dinamis dapat menyesuaikan dengan mempertimbangkan karakteristik dari perangkat yang digunakan (desktop, tablet, ponsel).

Dimulai dari versi 3.0, Bootstrap mengadopsi filosofi desain "mobile-first", menekankan pada desain responsif secara baku.

Versi 4.0 menambahkan dukungan Sass dan flexbox.

Penggunaan ulang komponen-komponen sunting

Selain elemen HTML reguler, Bootstrap juga berisi elemen antarmuka yang umum digunakan. Komponen-komponen tersebut diimplementasikan dalam bentuk "class" CSS, yang harus diaplikasikan dalam elemen HTML tertentu pada halaman situs web.

Komponen-komponen JavaScript sunting

Bootstrap dilengkapi dengan beberapa komponen JavaScript dalam bentuk plugin jQuery. Mereka menyediakan tambahan elemen antarmuka untuk pengguna seperti kotak dialog, tooltips, dan carousels. Mereka juga memperluas fungsi dari beberapa elemen antarmuka yang sudah ada, termasuk misalnya sebuah fungsi auto-complete untuk bidang input. Di versi 1.3,[17] plugin JavaScript berikut ini didukung oleh Bootstrap: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel dan Typeahead.

Lihat pula sunting

Referensi sunting

  1. ^ "About · Bootstrap". getbootstrap.com (dalam bahasa Inggris). 
  2. ^ Otto, Mark (5 Oktober 2021). "Bootstrap 5.1.2". The Bootstrap Blog. Diakses tanggal 10 Oktober 2021. 
  3. ^ "Search · stars:>1". GitHub. Diakses tanggal 08 Februari 2020. 
  4. ^ Otto, Mark (17 Januari 2012). "Bootstrap in A List Apart No. 342". Mark Otto's blog. Diarsipkan dari versi asli tanggal 28 Oktober 2016. Diakses tanggal 23 Februari 2017. 
  5. ^ Otto, Mark (19 Agustus 2011). "Bootstrap from Twitter". Developer Blog. Twitter. Diarsipkan dari versi asli tanggal 23 Februari 2017. Diakses tanggal 23 Februari 2017. 
  6. ^ "About". Bootstrap. Diakses tanggal 23 Februari 2017. 
  7. ^ Otto, Mark (31 Januari 2012). "Say hello to Bootstrap 2.0". Developer Blog. Twitter. Diarsipkan dari versi asli tanggal 23 Februari 2017. Diakses tanggal 23 Februari 2017. 
  8. ^ Otto, Mark (19 Agustus 2013). "Bootstrap 3 released". Diarsipkan dari versi asli tanggal 23 Oktober 2016. Diakses tanggal 23 Februari 2017. 
  9. ^ Otto, Mark (29 Oktober 2014). "Bootstrap 3.3.0 released". Diarsipkan dari versi asli tanggal 24 Juli 2016. Diakses tanggal 23 Februari 2017. 
  10. ^ Otto, Mark (19 Agustus 2015). "Bootstrap 4 alpha". Diarsipkan dari versi asli tanggal 23 Januari 2017. Diakses tanggal 23 Februari 2017. 
  11. ^ Otto, Mark; Thornton, Jacob (10 Agustus 2017). "Bootstrap 4 Beta". Diarsipkan dari versi asli tanggal 2018-09-07. Diakses tanggal 16 Agustus 2017. 
  12. ^ Mark Otto dan tim Bootstrap. "Bootstrap 4". blog.getbootstrap.com (dalam bahasa Inggris). Diakses tanggal 16 Maret 2018. 
  13. ^ contributors, Mark Otto, Jacob Thornton, and Bootstrap (21 Desember 2018). "Bootstrap 4.2.1". Bootstrap Blog (dalam bahasa Inggris). Diakses tanggal 22 Maret 2019. 
  14. ^ contributors, Mark Otto, Jacob Thornton, and Bootstrap (11 Februari 2019). "Bootstrap 4.3.0". Bootstrap Blog (dalam bahasa Inggris). Diakses tanggal 29 September 2019. 
  15. ^ "Bootstrap 5 grid by MartijnCuppens · Pull Request #28517 · twbs/bootstrap". GitHub (dalam bahasa Inggris). Diakses tanggal 29 September 2019. 
  16. ^ "Supported browsers". Bootstrap. Diakses tanggal 23 Februari 2017. 
  17. ^ "Bootstrap, from Twitter 1.3.0 Documentation - BootstrapDocs". bootstrapdocs.com (dalam bahasa Inggris). Diakses tanggal 22 Oktober 2017. 

Pranala luar sunting