Migrasi ke v5

Lacak dan tinjau perubahan pada file sumber Bootstrap, dokumentasi, dan komponen untuk membantu Anda bermigrasi dari v4 ke v5.

Di halaman ini

Ketergantungan

Menjatuhkan jQuery.
Upgrade dari Popper v1.x ke Popper v2.x.
Mengganti Libsass dengan Dart Sass karena kompiler Sass kami yang diberikan Libsass sudah tidak digunakan lagi.
Bermigrasi dari Jekyll ke Hugo untuk membangun dokumentasi kami

Dukungan peramban

Menjatuhkan Internet Explorer 10 dan 11
Menjatuhkan Microsoft Edge <16 (Legacy Edge)
Menjatuhkan Firefox < 60
Menjatuhkan Safari <12
Menjatuhkan iOS Safari <12
Menjatuhkan Chrome < 60

Perubahan dokumentasi

Beranda yang didesain ulang, tata letak dokumen, dan footer.
Menambahkan panduan Paket baru .
Menambahkan bagian Kustomisasi baru , menggantikan halaman Tema v4 , dengan detail baru tentang Sass, opsi konfigurasi global, skema warna, variabel CSS, dan banyak lagi.
Mengatur ulang semua dokumentasi formulir menjadi bagian Formulir baru , memecah konten menjadi halaman yang lebih fokus.
Demikian pula, perbarui bagian Tata Letak , untuk menyempurnakan konten kisi dengan lebih jelas.
Mengganti nama halaman komponen “Navs” menjadi “Navs & Tabs”.
Mengganti nama halaman "Cek" menjadi "Cek & radio".
Mendesain ulang navbar dan menambahkan subnav baru untuk mempermudah menjelajahi situs dan versi dokumen kami.
Menambahkan pintasan keyboard baru untuk bidang pencarian: Ctrl + /.

Kelancangan

Kami telah membuang gabungan peta Sass default untuk mempermudah menghapus nilai yang berlebihan. Ingatlah bahwa Anda sekarang harus mendefinisikan semua nilai di peta Sass seperti $theme-colors. Lihat cara menangani peta Sass .
PemecahanMengganti nama color-yiq()fungsi dan variabel terkait menjadi color-contrast()karena tidak lagi terkait dengan ruang warna YIQ. Lihat #30168.
- $yiq-contrasted-thresholddiubah namanya menjadi $min-contrast-ratio.
- $yiq-text-darkdan $yiq-text-lightmasing-masing diubah namanya menjadi $color-contrast-darkdan $color-contrast-light.
PemecahanParameter mixin kueri media telah berubah untuk pendekatan yang lebih logis.
- media-breakpoint-down()menggunakan breakpoint itu sendiri alih-alih breakpoint berikutnya (mis., media-breakpoint-down(lg)alih-alih media-breakpoint-down(md)menargetkan area pandang yang lebih kecil dari lg).
- Demikian pula, parameter kedua di media-breakpoint-between()juga menggunakan breakpoint itu sendiri alih-alih breakpoint berikutnya (misalnya, media-between(sm, lg)sebagai ganti media-breakpoint-between(sm, md)target viewports antara smdan lg).
PemecahanDihapus gaya cetak dan $enable-print-stylesvariabel. Kelas tampilan cetak masih ada. Lihat #28339 .
PemecahanMenjatuhkan color(), theme-color(), dan gray()fungsi yang mendukung variabel. Lihat #29083 .
PemecahanBerganti nama menjadi theme-color-level()fungsi color-level()dan sekarang menerima warna apa pun yang Anda inginkan, bukan hanya $theme-colorwarna. Lihat #29083 Hati-hati: color-level() kemudian dijatuhkan v5.0.0-alpha3.
PemecahanBerganti nama $enable-prefers-reduced-motion-media-querydan $enable-pointer-cursor-for-buttonske $enable-reduced-motiondan $enable-button-pointersuntuk singkatnya.
PemecahanDihapus bg-gradient-variant()mixinnya. Gunakan .bg-gradientkelas untuk menambahkan gradien ke elemen, bukan .bg-gradient-*kelas yang dihasilkan.
Pemecahan Menghapus mixin yang sebelumnya tidak digunakan lagi:
- hover, hover-focus, plain-hover-focus, danhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(juga menjatuhkan kelas utilitas terkait, .text-hide)
- visibility()
- form-control-focus()
PemecahanBerganti nama menjadi scale-color()fungsi untuk shift-color()menghindari tabrakan dengan fungsi penskalaan warna Sass sendiri.
box-shadowmixin sekarang mengizinkan nullnilai dan turun nonedari beberapa argumen. Lihat #30394 .
Mixin border-radius()sekarang memiliki nilai default.

Sistem warna

Sistem warna yang bekerja dengan color-level()dan $theme-color-intervaltelah dihapus demi sistem warna baru. Semua lighten()dan darken()fungsi dalam basis kode kami digantikan oleh tint-color()dan shade-color(). Fungsi-fungsi ini akan mencampur warna dengan putih atau hitam alih-alih mengubah kecerahannya dengan jumlah yang tetap. Baik shift-color()akan mewarnai atau menaungi warna tergantung pada apakah parameter bobotnya positif atau negatif. Lihat #30622 untuk lebih jelasnya.
Menambahkan rona dan corak baru untuk setiap warna, memberikan sembilan warna terpisah untuk setiap warna dasar, sebagai variabel Sass baru.
Kontras warna yang ditingkatkan. Rasio kontras warna terbentur dari 3:1 hingga 4,5:1 dan warna biru, hijau, cyan, dan pink yang diperbarui untuk memastikan kontras WCAG 2.1 AA. Juga mengubah warna kontras warna kami dari $gray-900menjadi $black.
Untuk mendukung sistem warna kami, kami telah menambahkan kustom tint-color()dan shade-color()fungsi baru untuk mencampur warna kami dengan tepat.

Pembaruan jaringan

Titik henti baru! Menambahkan xxlbreakpoint baru untuk 1400pxdan ke atas. Tidak ada perubahan pada semua breakpoint lainnya.
Talang yang ditingkatkan. Talang sekarang diatur dalam rem, dan lebih sempit dari v4 ( 1.5rem, atau sekitar 24px, turun dari 30px). Ini menyelaraskan talang sistem grid kami dengan utilitas jarak kami.
- Menambahkan kelas talang baru ( .g-*, .gx-*, dan .gy-*) untuk mengontrol talang horizontal/vertikal, talang horizontal, dan talang vertikal.
- PemecahanDiganti namanya .no-guttersmenjadi .g-0agar sesuai dengan utilitas selokan baru.
Kolom tidak lagi position: relativediterapkan, jadi Anda mungkin harus menambahkan .position-relativebeberapa elemen untuk memulihkan perilaku tersebut.
PemecahanMenjatuhkan beberapa .order-*kelas yang sering tidak digunakan. Kami sekarang hanya menyediakan .order-1di .order-5luar kotak.
PemecahanMenjatuhkan .mediakomponen karena dapat dengan mudah direplikasi dengan utilitas. Lihat #28265 dan halaman utilitas fleksibel untuk contoh .
Pemecahan bootstrap-grid.csssekarang hanya berlaku box-sizing: border-boxuntuk kolom alih-alih mengatur ulang ukuran kotak global. Dengan cara ini, gaya kisi kita dapat digunakan di lebih banyak tempat tanpa gangguan.
$enable-grid-classestidak lagi menonaktifkan pembuatan kelas kontainer. Lihat #29146.
Memperbarui make-colmixin ke default ke kolom yang sama tanpa ukuran yang ditentukan.

Konten, Reboot, dll

RFS sekarang diaktifkan secara default. Judul yang menggunakanfont-size()mixin akan secara otomatis menyesuaikanfont-sizeskalanya dengan area pandang. Fitur ini sebelumnya ikut serta dengan v4.
PemecahanMerombak tipografi tampilan kami untuk mengganti $display-*variabel kami dan dengan $display-font-sizespeta Sass. Juga menghapus $display-*-weightvariabel individu untuk s tunggal $display-font-weightdan disesuaikan font-size.
Menambahkan dua .display-*ukuran heading baru, .display-5dan .display-6.
Tautan digarisbawahi secara default (tidak hanya saat mengarahkan kursor), kecuali jika merupakan bagian dari komponen tertentu.
Tabel yang didesain ulang untuk menyegarkan gayanya dan membangunnya kembali dengan variabel CSS untuk kontrol lebih besar atas gaya.
PemecahanTabel bersarang tidak mewarisi gaya lagi.
Pemecahan .thead-lightdan .thead-darkdijatuhkan demi .table-*kelas varian yang dapat digunakan untuk semua elemen tabel ( thead, tbody, tfoot, tr, thdan td).
PemecahanMixin table-row-variant()diubah namanya menjadi table-variant()dan hanya menerima 2 parameter: $color(nama warna) dan $value(kode warna). Warna batas dan warna aksen dihitung secara otomatis berdasarkan variabel faktor tabel.
Pisahkan variabel padding sel tabel menjadi -ydan -x.
PemecahanKelas yang dijatuhkan .pre-scrollable. Lihat #29135
Pemecahan .text-*utilitas tidak menambahkan status hover dan fokus ke tautan lagi. .link-*kelas pembantu dapat digunakan sebagai gantinya. Lihat #29267
PemecahanKelas yang dijatuhkan .text-justify. Lihat #29793
Pemecahan <hr>elemen sekarang digunakan heightalih-alih borderuntuk mendukung sizeatribut dengan lebih baik. Ini juga memungkinkan penggunaan utilitas padding untuk membuat pembagi yang lebih tebal (misalnya, <hr class="py-1">).
Setel ulang default horizontal dan elemen dari default padding-leftbrowser ke .<ul><ol>40px2rem
Ditambahkan $enable-smooth-scroll, yang berlaku scroll-behavior: smoothsecara global—kecuali untuk pengguna yang meminta pengurangan gerakan melalui prefers-reduced-motionkueri media. Lihat #31877

RTL

Variabel khusus arah horizontal, utilitas, dan mixin semuanya telah diganti namanya untuk menggunakan properti logis seperti yang ditemukan di tata letak flexbox—misalnya, startdan endsebagai pengganti leftdan right.

Formulir

Menambahkan formulir mengambang baru! Kami telah mempromosikan contoh label Mengambang ke komponen formulir yang didukung penuh. Lihat halaman label Mengambang yang baru.
Pemecahan Elemen formulir asli dan kustom yang dikonsolidasikan. Kotak centang, radio, pilihan, dan masukan lain yang memiliki kelas asli dan khusus di v4 telah digabungkan. Sekarang hampir semua elemen formulir kami sepenuhnya khusus, sebagian besar tanpa memerlukan HTML khusus.
- .custom-checksekarang .form-check.
- .custom-check.custom-switchsekarang .form-check.form-switch.
- .custom-selectsekarang .form-select.
- .custom-filedan .form-filetelah digantikan oleh gaya khusus di atas .form-control.
- .custom-rangesekarang .form-range.
- Menjatuhkan asli .form-control-filedan .form-control-range.
PemecahanDijatuhkan .input-group-appenddan .input-group-prepend. Anda sekarang dapat menambahkan tombol dan .input-group-textsebagai anak langsung dari grup input.
Radius batas Hilang yang sudah lama ada pada grup input dengan bug umpan balik validasi akhirnya diperbaiki dengan menambahkan .has-validationkelas tambahan ke grup input dengan validasi.
Pemecahan Menjatuhkan kelas tata letak khusus formulir untuk sistem kisi kami. Gunakan grid dan utilitas kami sebagai ganti .form-group, .form-row, atau .form-inline.
PemecahanLabel formulir sekarang membutuhkan .form-label.
Pemecahan .form-texttidak lagi set display, memungkinkan Anda untuk membuat teks bantuan sebaris atau blok sesuai keinginan hanya dengan mengubah elemen HTML.
Ikon validasi tidak lagi diterapkan ke <select>s dengan multiple.
Mengatur ulang file Sass sumber di bawah scss/forms/, termasuk gaya grup input.

Komponen

Nilai terpadu paddinguntuk peringatan, remah roti, kartu, dropdown, grup daftar, modals, popover, dan tooltips untuk didasarkan pada $spacervariabel kami. Lihat #30564 .

Akordeon

Menambahkan komponen akordeon baru .

Peringatan

Lansiran sekarang memiliki contoh dengan ikon .
Menghapus gaya khusus untuk <hr>s di setiap peringatan karena sudah menggunakan currentColor.

Lencana

PemecahanMenjatuhkan semua .badge-*kelas warna untuk utilitas latar belakang (misalnya, gunakan .bg-primaryalih-alih .badge-primary).
PemecahanDijatuhkan .badge-pill—gunakan .rounded-pillutilitas sebagai gantinya.
PemecahanMenghapus gaya hover dan fokus untuk <a>dan <button>elemen.
Peningkatan padding default untuk lencana dari .25em/ .5emke .35em/ .65em.

Tepung roti

Sederhanakan tampilan default remah roti dengan menghapus padding, background-color, dan border-radius.
Menambahkan properti kustom CSS baru --bs-breadcrumb-divideruntuk penyesuaian yang mudah tanpa perlu mengkompilasi ulang CSS.

Tombol

Pemecahan Tombol alih , dengan kotak centang atau radio, tidak lagi memerlukan JavaScript dan memiliki markup baru. Kami tidak lagi memerlukan elemen pembungkus, tambahkan.btn-checkke<input>, dan pasangkan dengan.btnkelas apa pun di<label>. Lihat #30650 . Dokumen untuk ini telah dipindahkan dari halaman Tombol kami ke bagian Formulir baru.
Pemecahan Dijatuhkan .btn-blockuntuk utilitas. Alih-alih menggunakan .btn-blockpada .btn, bungkus tombol Anda dengan .d-griddan .gap-*utilitas untuk memberi ruang sesuai kebutuhan. Beralih ke kelas responsif untuk kontrol yang lebih besar terhadapnya. Baca dokumen untuk beberapa contoh.
Memperbarui kami button-variant()dan button-outline-variant()mixin untuk mendukung parameter tambahan.
Tombol yang diperbarui untuk memastikan peningkatan kontras pada hover dan status aktif.
Tombol yang dinonaktifkan sekarang memiliki pointer-events: none;.

Kartu

PemecahanTurun .card-deckmendukung jaringan kami. Bungkus kartu Anda di kelas kolom dan tambahkan .row-cols-*wadah induk untuk membuat ulang dek kartu (tetapi dengan kontrol lebih besar atas perataan responsif).
PemecahanTurun .card-columnsmendukung Masonry. Lihat #28922 .
PemecahanMengganti .cardakordeon berbasis dengan komponen Accordion baru .

Korsel

Menambahkan .carousel-darkvarian baru untuk teks gelap, kontrol, dan indikator (bagus untuk latar belakang yang lebih terang).
Ikon chevron yang diganti untuk kontrol carousel dengan SVG baru dari Bootstrap Icons .

Tutup tombol

PemecahanBerganti nama menjadi .closeuntuk nama .btn-closeyang kurang umum.
Tombol tutup sekarang menggunakan background-image(SVG tertanam) alih-alih a ×dalam HTML, memungkinkan penyesuaian yang lebih mudah tanpa perlu menyentuh markup Anda.
Menambahkan .btn-close-whitevarian baru yang digunakan filter: invert(1)untuk mengaktifkan ikon pengabaian kontras yang lebih tinggi dengan latar belakang yang lebih gelap.

Jatuh

Penahan gulir yang dihapus untuk akordeon.

Dropdown

Menambahkan .dropdown-menu-darkvarian baru dan variabel terkait untuk dropdown gelap sesuai permintaan.
Menambahkan variabel baru untuk $dropdown-padding-x.
Menggelapkan pembagi tarik-turun untuk meningkatkan kontras.
PemecahanSemua peristiwa untuk dropdown sekarang dipicu pada tombol sakelar dropdown dan kemudian digelembungkan ke elemen induk.
Menu dropdown sekarang memiliki data-bs-popper="static"atribut yang ditetapkan saat posisi dropdown statis dan data-bs-popper="none"saat dropdown ada di navbar. Ini ditambahkan oleh JavaScript kami dan membantu kami menggunakan gaya posisi khusus tanpa mengganggu pemosisian Popper.
PemecahanOpsi yang dijatuhkan flipuntuk plugin dropdown yang mendukung konfigurasi Popper asli. Anda sekarang dapat menonaktifkan perilaku membalik dengan melewatkan array kosong untuk fallbackPlacementsopsi di pengubah flip .
Menu dropdown sekarang dapat diklik dengan autoCloseopsi baru untuk menangani perilaku tutup otomatis . Anda dapat menggunakan opsi ini untuk menerima klik di dalam atau di luar menu tarik-turun agar interaktif.
Dropdown sekarang mendukung .dropdown-items yang dibungkus <li>s.

Jumbotron

PemecahanMenjatuhkan komponen jumbotron karena dapat direplikasi dengan utilitas. Lihat contoh Jumbotron baru kami untuk demo.

Daftar grup

Menambahkan .list-group-numberedpengubah baru ke grup daftar.

Nav dan tab

Menambahkan nullvariabel baru untuk font-size, font-weight, color, dan :hover colorke .nav-linkkelas.

Navbar

PemecahanNavbar sekarang memerlukan wadah di dalamnya (untuk menyederhanakan persyaratan spasi dan CSS secara drastis).

di luar kanvas

Menambahkan komponen offcanvas baru .

paginasi

Tautan pagination sekarang dapat disesuaikan margin-leftyang dibulatkan secara dinamis di semua sudut saat dipisahkan satu sama lain.
Menambahkan transitions ke tautan pagination.

Popover

PemecahanDiganti namanya .arrowmenjadi .popover-arrowdi template popover default kami.
Mengganti nama whiteListopsi menjadi allowList.

Pemintal

Pemintal sekarang menghormati prefers-reduced-motion: reducedengan memperlambat animasi. Lihat #31882 .
Penyelarasan vertikal pemintal yang ditingkatkan.

bersulang

Roti panggang sekarang dapat diposisikan dengan .toast-containerbantuan utilitas pemosisian .
Mengubah durasi roti panggang default menjadi 5 detik.
Dihapus overflow: hiddendari toasts dan diganti dengan border-radiuss yang tepat dengan calc()fungsi.

Keterangan alat

PemecahanDiganti namanya .arrowmenjadi .tooltip-arrowdi template tooltip default kami.
PemecahanNilai default untuk fallbackPlacementsdiubah menjadi ['top', 'right', 'bottom', 'left']untuk penempatan elemen popper yang lebih baik.
PemecahanMengganti nama whiteListopsi menjadi allowList.

Keperluan

PemecahanMengganti nama beberapa utilitas untuk menggunakan nama properti logis alih-alih nama arah dengan penambahan dukungan RTL:
- Berganti nama .left-*dan .right-*menjadi .start-*dan .end-*.
- Berganti nama .float-leftdan .float-rightmenjadi .float-startdan .float-end.
- Berganti nama .border-leftdan .border-rightmenjadi .border-startdan .border-end.
- Berganti nama .rounded-leftdan .rounded-rightmenjadi .rounded-startdan .rounded-end.
- Berganti nama .ml-*dan .mr-*menjadi .ms-*dan .me-*.
- Berganti nama .pl-*dan .pr-*menjadi .ps-*dan .pe-*.
- Berganti nama .text-leftdan .text-rightmenjadi .text-startdan .text-end.
PemecahanMargin negatif dinonaktifkan secara default.
Menambahkan .bg-bodykelas baru untuk mengatur <body>latar belakang dengan cepat ke elemen tambahan.
Menambahkan utilitas posisi baru untuk top, right, bottom, dan left. Nilai termasuk 0, 50%, dan 100%untuk setiap properti.
Menambahkan utilitas .translate-middle-x& baru .translate-middle-yke elemen posisi absolut/tetap secara horizontal atau vertikal di tengah.
Menambahkan border-widthutilitas baru .
PemecahanBerganti nama .text-monospacemenjadi .font-monospace.
PemecahanDihapus .text-hidekarena merupakan metode kuno untuk menyembunyikan teks yang tidak boleh digunakan lagi.
Menambahkan .fs-*utilitas untuk font-sizeutilitas (dengan RFS diaktifkan). Ini menggunakan skala yang sama dengan judul default HTML (1-6, besar ke kecil), dan dapat dimodifikasi melalui peta Sass.
PemecahanBerganti nama menjadi .font-weight-*utilitas .fw-*untuk singkatnya dan konsistensi.
PemecahanBerganti nama menjadi .font-style-*utilitas .fst-*untuk singkatnya dan konsistensi.
Ditambahkan .d-griduntuk menampilkan utilitas dan gaputilitas baru ( .gap) untuk CSS Grid dan layout flexbox.
PemecahanDihapus .rounded-smdan rounded-lg, dan memperkenalkan skala kelas baru, .rounded-0ke .rounded-3. Lihat #31687 .
Menambahkan line-heightutilitas baru: .lh-1, .lh-sm, .lh-basedan .lh-lg. Lihat di sini .
Memindahkan .d-noneutilitas di CSS kami untuk memberikan bobot lebih pada utilitas tampilan lainnya.
Memperluas .visually-hidden-focusablepembantu untuk juga mengerjakan wadah, menggunakan :focus-within.

Pembantu

Pemecahan Pembantu embed responsif telah diubah namanya menjadi pembantu rasio dengan nama kelas baru dan perilaku yang ditingkatkan, serta variabel CSS yang membantu.
- Kelas telah diubah namanya menjadi byrasio xaspek. Misalnya, .ratio-16by9sekarang .ratio-16x9.
- Kami telah menjatuhkan .embed-responsive-itempemilih grup elemen dan untuk memilih .ratio > *pemilih yang lebih sederhana. Tidak ada lagi kelas yang diperlukan, dan penolong rasio sekarang berfungsi dengan elemen HTML apa pun.
- Peta $embed-responsive-aspect-ratiosSass telah diubah namanya menjadi $aspect-ratiosdan nilainya telah disederhanakan untuk menyertakan nama kelas dan persentase sebagai key: valuepasangan.
- Variabel CSS sekarang dibuat dan disertakan untuk setiap nilai di peta Sass. Ubah --bs-aspect-ratiovariabel pada .ratiountuk membuat rasio aspek kustom apa pun .
Pemecahan Kelas "Pembaca layar" sekarang menjadi kelas "tersembunyi secara visual" .
- Mengubah file Sass dari scss/helpers/_screenreaders.scsskescss/helpers/_visually-hidden.scss
- Berganti nama .sr-onlydan .sr-only-focusablemenjadi .visually-hiddendan.visually-hidden-focusable
- Berganti nama sr-only()dan sr-only-focusable()bercampur menjadi visually-hidden()dan visually-hidden-focusable().
bootstrap-utilities.csssekarang juga termasuk pembantu kami. Helper tidak perlu lagi diimpor dalam custom build.

JavaScript

Menjatuhkan ketergantungan jQuery dan menulis ulang plugin menjadi JavaScript biasa.
PemecahanAtribut data untuk semua plugin JavaScript sekarang diberi namespace untuk membantu membedakan fungsionalitas Bootstrap dari pihak ketiga dan kode Anda sendiri. Misalnya, kami menggunakan data-bs-togglealih-alih data-toggle.
Semua plugin sekarang dapat menerima pemilih CSS sebagai argumen pertama. Anda dapat meneruskan elemen DOM atau pemilih CSS apa pun yang valid untuk membuat instance baru dari plugin:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigdapat diteruskan sebagai fungsi yang menerima konfigurasi Popper default Bootstrap sebagai argumen, sehingga Anda dapat menggabungkan konfigurasi default ini dengan cara Anda. Berlaku untuk dropdown, popover, dan tooltips.
Nilai default untuk fallbackPlacementsdiubah menjadi ['top', 'right', 'bottom', 'left']untuk penempatan elemen Popper yang lebih baik. Berlaku untuk dropdown, popover, dan tooltips.
Garis bawah yang dihapus dari metode statis publik seperti _getInstance()→ getInstance().