Lompat ke isi

Bootstrap (kerangka kerja): Perbedaan antara revisi

Ensiklopedia Pengetahuan Universitas Islam Sultan Agung
Maintenance script (bicara | kontrib)
Impor teks terkontrol dari Wikipedia bahasa Indonesia; revisi 28243190; atribusi sumber disertakan.
 
Maintenance script (bicara | kontrib)
Presentation V4: sitasi, referensi, Math, Wikimedia Commons, dan atribusi
 
Baris 1: Baris 1:
[[File:Bootstrap_logo.svg|thumb|right|280px|Bootstrap logo]]
'''Bootstrap''' adalah kerangka kerja CSS yang [[Perangkat lunak sumber terbuka|sumber terbuka]] dan [[Perangkat lunak bebas|bebas]] untuk merancang [[situs web]] dan [[aplikasi web]]. Kerangka kerja ini berisi templat desain berbasis [[HTML]] dan [[Cascading Style Sheets|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''' adalah kerangka kerja CSS yang [[Perangkat lunak sumber terbuka|sumber terbuka]] dan [[Perangkat lunak bebas|bebas]] untuk merancang [[situs web]] dan [[aplikasi web]]. Kerangka kerja ini berisi templat desain berbasis [[HTML]] dan [[Cascading Style Sheets|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 adalah proyek yang paling banyak dibintangi keenam di [[GitHub]], dengan lebih dari 139.000 bintang.
Bootstrap adalah proyek yang paling banyak dibintangi keenam di [[GitHub]], dengan lebih dari 139.000 bintang.<ref>[https://github.com/search?o=desc&q=stars%3A%3E1&s=stars&type=Repositories Search · stars:>1]. ''GitHub''.</ref>


== Sejarah ==
== Sejarah ==
Baris 7: Baris 9:
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 (perangkat lunak)|pustaka]] sudah banyak digunakan untuk pengembangan antarmuka, yang menyebabkan ketidak-konsistenan dan beban pemeliharaan yang berat. Menurut Mark Otto, pengembang [[Twitter]]:
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 (perangkat lunak)|pustaka]] sudah banyak digunakan untuk pengembangan antarmuka, yang menyebabkan ketidak-konsistenan dan beban pemeliharaan yang berat. Menurut Mark Otto, pengembang [[Twitter]]:


 
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.<ref>Mark Otto. [https://blog.twitter.com/2011/bootstrap-twitter Bootstrap from Twitter]. ''Developer Blog''. Twitter. 19 Agustus 2011.</ref> Hal ini terus dipertahankan oleh Mark Otto, Jacob Thornton, dan sekelompok kecil pengembang inti, serta sejumlah besar komunitas dari para kontributor.<ref>[https://getbootstrap.com/about/ About]. ''Bootstrap''.</ref>
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. Hal ini terus dipertahankan oleh Mark Otto, Jacob Thornton, dan sekelompok kecil pengembang inti, serta sejumlah besar komunitas dari para kontributor.


=== Bootstrap 2 dan 3 ===
=== Bootstrap 2 dan 3 ===
Pada 31 Januari 2012, Bootstrap 2 dirilis, yang menambahkan sistem ''layout'' dua belas kolom ''grid'' yang [[Desain web responsif|responsif]], dukungan ''built-in'' untuk Glyphicons, beberapa komponen baru, serta perubahan dari beberapa komponen yang sudah ada.
Pada 31 Januari 2012, Bootstrap 2 dirilis, yang menambahkan sistem ''layout'' dua belas kolom ''grid'' yang [[Desain web responsif|responsif]], dukungan ''built-in'' untuk Glyphicons, beberapa komponen baru, serta perubahan dari beberapa komponen yang sudah ada.<ref>Mark Otto. [https://blog.twitter.com/2012/say-hello-to-bootstrap-2 Say hello to Bootstrap 2.0]. ''Developer Blog''. Twitter. 31 Januari 2012.</ref>


Pada 19 Agustus 2013, Bootstrap 3 dirilis, yang didesain ulang komponennya untuk menggunakan desain flat, dan pendekatan ''[[Desain web responsif|mobile-first]]''.
Pada 19 Agustus 2013, Bootstrap 3 dirilis, yang didesain ulang komponennya untuk menggunakan desain flat, dan pendekatan ''[[Desain web responsif|mobile-first]]''.<ref>Mark Otto. [https://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/ Bootstrap 3 released]. 19 Agustus 2013.</ref>


=== Bootstrap 4 ===
=== Bootstrap 4 ===
Pada 29 Oktober 2014, Mark Otto mengumumkan bahwa Bootstrap 4 sedang dalam pengembangan. Versi alfa pertama dari Bootstrap 4 dirilis pada 19 Agustus 2015. 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 (kendali versi)|kommit]] yang telah dibuat untuk basis kode Bootstrap 4. Versi beta pertama dirilis pada 10 Agustus 2017.
Pada 29 Oktober 2014, Mark Otto mengumumkan bahwa Bootstrap 4 sedang dalam pengembangan.<ref>Mark Otto. [https://blog.getbootstrap.com/2014/10/29/bootstrap-3-3-0-released/ Bootstrap 3.3.0 released]. 29 Oktober 2014.</ref> Versi alfa pertama dari Bootstrap 4 dirilis pada 19 Agustus 2015.<ref>Mark Otto. [https://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/ Bootstrap 4 alpha]. 19 Agustus 2015.</ref> 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 (kendali versi)|kommit]] yang telah dibuat untuk basis kode Bootstrap 4. Versi beta pertama dirilis pada 10 Agustus 2017.<ref>Mark Otto. [https://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/ Bootstrap 4 Beta]. 10 Agustus 2017.</ref>


Versi stabil dari Bootstrap 4 yang dirilis pada 18 Januari 2018, mayoritas merupakan tulisan ulang dari Bootstrap 3. Perubahan yang signifikan di antaranya:
Versi stabil dari Bootstrap 4 yang dirilis pada 18 Januari 2018,<ref>Mark Otto dan tim Bootstrap. [https://blog.getbootstrap.com/2018/01/18/bootstrap-4/ Bootstrap 4]. ''blog.getbootstrap.com''.</ref> mayoritas merupakan tulisan ulang dari Bootstrap 3. Perubahan yang signifikan di antaranya:
* Peralihan dari [[Less (bahasa stylesheet)|Less]] menuju [[Sass (bahasa stylesheet)|Sass]].
* Peralihan dari [[Less (bahasa stylesheet)|Less]] menuju [[Sass (bahasa stylesheet)|Sass]].
* Peluncuran but ulang untuk normalisasi css.
* Peluncuran but ulang untuk normalisasi css.
Baris 37: Baris 38:


=== Bootstrap 5 ===
=== Bootstrap 5 ===
Bootstrap 5 adalah versi baru Bootstrap yang akan datang. Perubahan besar termasuk:
Bootstrap 5 adalah versi baru Bootstrap yang akan datang. Perubahan besar termasuk:<ref>Mark Otto, Jacob Thornton, and Bootstrap contributors. [https://blog.getbootstrap.com/2018/12/21/bootstrap-4-2-1/ Bootstrap 4.2.1]. ''Bootstrap Blog''. 21 Desember 2018.</ref><ref>Mark Otto, Jacob Thornton, and Bootstrap contributors. [https://blog.getbootstrap.com/2019/02/11/bootstrap-4-3-0/ Bootstrap 4.3.0]. ''Bootstrap Blog''. 11 Februari 2019.</ref><ref>[https://github.com/twbs/bootstrap/pull/28517 Bootstrap 5 grid by MartijnCuppens · Pull Request #28517 · twbs/bootstrap]. ''GitHub''.</ref>
* Menghapus jQuery dari komponen dan menggunakan vanilla JavaScript.
* 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.
* Menulis ulang komponen ''grid'' untuk mendukung fitur kolom yang ditempatkan di luar baris dan ''gutter'' (ruang antar kolom) yang responsif.
Baris 45: Baris 46:


== Fitur-fitur ==
== Fitur-fitur ==
 
Bootstrap 3 mendukung versi terbaru [[Google Chrome]], [[Firefox]], [[Internet Explorer]], [[Opera (peramban web)|Opera]], dan [[Safari (peramban web)|Safari]] (kecuali pada Windows). Selain itu mendukung kembali IE8 dan [[Firefox]] Extended Support Release (ESR) terbaru.<ref>[https://getbootstrap.com/getting-started/#support-browsers Supported browsers]. ''Bootstrap''.</ref>
Bootstrap 3 mendukung versi terbaru [[Google Chrome]], [[Firefox]], [[Internet Explorer]], [[Opera (peramban web)|Opera]], dan [[Safari (peramban web)|Safari]] (kecuali pada Windows). Selain itu mendukung kembali IE8 dan [[Firefox]] Extended Support Release (ESR) terbaru.


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


=== Komponen-komponen JavaScript ===
=== Komponen-komponen JavaScript ===
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, plugin JavaScript berikut ini didukung oleh Bootstrap: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel dan Typeahead.
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,<ref>[https://bootstrapdocs.com/v1.3.0/docs Bootstrap, from Twitter 1.3.0 Documentation - BootstrapDocs]. ''bootstrapdocs.com''.</ref> plugin JavaScript berikut ini didukung oleh Bootstrap: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel dan Typeahead.


== Lihat pula ==
== Lihat pula ==
Baris 65: Baris 65:
* [[Desain web responsif]]
* [[Desain web responsif]]
* [[Perancangan web]]
* [[Perancangan web]]
== Referensi ==


== Pranala luar ==
== Pranala luar ==
 
*  
*
*
*


== Referensi ==
<references />


== Sumber dan atribusi ==


== Sumber dan atribusi ==
Konten artikel ini diadaptasi dari [https://id.wikipedia.org/w/index.php?title=Bootstrap+%28kerangka+kerja%29&oldid=28243190 Wikipedia bahasa Indonesia], revisi 28243190 (2025-10-30T07:52:59Z), yang tersedia berdasarkan lisensi Creative Commons Atribusi-BerbagiSerupa (CC BY-SA). Gambar pada artikel ini bersumber dari Wikimedia Commons dan mengikuti ketentuan lisensi masing-masing berkas. Mohon gunakan konten dan media secara bijak serta sesuai dengan ketentuan lisensi yang berlaku.


Konten artikel ini diadaptasi dari [https://id.wikipedia.org/w/index.php?title=Bootstrap+%28kerangka+kerja%29&oldid=28243190 Wikipedia bahasa Indonesia], revisi 28243190 (2025-10-30T07:52:59Z), yang tersedia berdasarkan lisensi Creative Commons Atribusi-BerbagiSerupa (CC BY-SA). Mohon gunakan konten ini secara bijak serta sesuai dengan ketentuan lisensi yang berlaku.
<!-- WIKI_UNISSULA_PRESENTATION_V4 -->

Revisi terkini sejak 23 Agustus 2026 14.07

Bootstrap logo

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 adalah proyek yang paling banyak dibintangi keenam di GitHub, dengan lebih dari 139.000 bintang.[1]

Sejarah

Awal mula

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:

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.[2] Hal ini terus dipertahankan oleh Mark Otto, Jacob Thornton, dan sekelompok kecil pengembang inti, serta sejumlah besar komunitas dari para kontributor.[3]

Bootstrap 2 dan 3

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.[4]

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

Bootstrap 4

Pada 29 Oktober 2014, Mark Otto mengumumkan bahwa Bootstrap 4 sedang dalam pengembangan.[6] Versi alfa pertama dari Bootstrap 4 dirilis pada 19 Agustus 2015.[7] 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.[8]

Versi stabil dari Bootstrap 4 yang dirilis pada 18 Januari 2018,[9] 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

Bootstrap 5 adalah versi baru Bootstrap yang akan datang. Perubahan besar termasuk:[10][11][12]

  • 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

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.[13]

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

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

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,[14] plugin JavaScript berikut ini didukung oleh Bootstrap: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel dan Typeahead.

Lihat pula

Pranala luar

Referensi

  1. Search · stars:>1. GitHub.
  2. Mark Otto. Bootstrap from Twitter. Developer Blog. Twitter. 19 Agustus 2011.
  3. About. Bootstrap.
  4. Mark Otto. Say hello to Bootstrap 2.0. Developer Blog. Twitter. 31 Januari 2012.
  5. Mark Otto. Bootstrap 3 released. 19 Agustus 2013.
  6. Mark Otto. Bootstrap 3.3.0 released. 29 Oktober 2014.
  7. Mark Otto. Bootstrap 4 alpha. 19 Agustus 2015.
  8. Mark Otto. Bootstrap 4 Beta. 10 Agustus 2017.
  9. Mark Otto dan tim Bootstrap. Bootstrap 4. blog.getbootstrap.com.
  10. Mark Otto, Jacob Thornton, and Bootstrap contributors. Bootstrap 4.2.1. Bootstrap Blog. 21 Desember 2018.
  11. Mark Otto, Jacob Thornton, and Bootstrap contributors. Bootstrap 4.3.0. Bootstrap Blog. 11 Februari 2019.
  12. Bootstrap 5 grid by MartijnCuppens · Pull Request #28517 · twbs/bootstrap. GitHub.
  13. Supported browsers. Bootstrap.
  14. Bootstrap, from Twitter 1.3.0 Documentation - BootstrapDocs. bootstrapdocs.com.

Sumber dan atribusi

Konten artikel ini diadaptasi dari Wikipedia bahasa Indonesia, revisi 28243190 (2025-10-30T07:52:59Z), yang tersedia berdasarkan lisensi Creative Commons Atribusi-BerbagiSerupa (CC BY-SA). Gambar pada artikel ini bersumber dari Wikimedia Commons dan mengikuti ketentuan lisensi masing-masing berkas. Mohon gunakan konten dan media secara bijak serta sesuai dengan ketentuan lisensi yang berlaku.