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

v5.2.0

Desain yang diperbarui

Bootstrap v5.2.0 menampilkan pembaruan desain yang halus untuk beberapa komponen dan properti di seluruh proyek, terutama melalui border-radiusnilai yang disempurnakan pada tombol dan kontrol formulir . Dokumentasi kami juga telah diperbarui dengan beranda baru, tata letak dokumen yang lebih sederhana yang tidak lagi menciutkan bagian bilah sisi, dan contoh Ikon Bootstrap yang lebih menonjol .

Lebih banyak variabel CSS

Kami telah memperbarui semua komponen kami untuk menggunakan variabel CSS. Sementara Sass masih mendukung semuanya, setiap komponen telah diperbarui untuk menyertakan variabel CSS pada kelas dasar komponen (misalnya, .btn), memungkinkan penyesuaian Bootstrap secara real-time. Dalam rilis berikutnya, kami akan terus memperluas penggunaan variabel CSS ke dalam tata letak, formulir, pembantu, dan utilitas kami. Baca lebih lanjut tentang variabel CSS di setiap komponen di halaman dokumentasi masing-masing.

Penggunaan variabel CSS kami akan agak tidak lengkap hingga Bootstrap 6. Meskipun kami ingin menerapkan ini sepenuhnya di seluruh papan, mereka berisiko menyebabkan perubahan yang merusak. Misalnya, pengaturan $alert-border-width: var(--bs-border-width)dalam kode sumber kami merusak potensi Sass dalam kode Anda sendiri jika Anda melakukannya $alert-border-width * 2karena suatu alasan.

Oleh karena itu, jika memungkinkan, kami akan terus mendorong lebih banyak variabel CSS, tetapi perlu diketahui bahwa implementasi kami mungkin sedikit terbatas di v5.

Baru`_maps.scss`

Bootstrap v5.2.0 memperkenalkan file Sass baru dengan _maps.scss. Ini mengeluarkan beberapa peta Sass _variables.scssuntuk memperbaiki masalah di mana pembaruan ke peta asli tidak diterapkan ke peta sekunder yang memperluasnya. Misalnya, pembaruan untuk $theme-colorstidak diterapkan ke peta tema lain yang mengandalkan $theme-colors, merusak alur kerja penyesuaian utama. Singkatnya, Sass memiliki batasan di mana setelah variabel atau peta default digunakan , itu tidak dapat diperbarui. Ada kekurangan serupa dengan variabel CSS ketika mereka digunakan untuk membuat variabel CSS lainnya.

Inilah sebabnya mengapa penyesuaian variabel di Bootstrap harus dilakukan setelah @import "functions", tetapi sebelum @import "variables"dan sisa tumpukan impor kami. Hal yang sama berlaku untuk peta Sass—Anda harus mengganti default sebelum digunakan. Peta berikut telah dipindahkan ke yang baru _maps.scss:

$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters

Build CSS Bootstrap kustom Anda sekarang akan terlihat seperti ini dengan impor peta terpisah.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Utilitas baru

font-weightUtilitas yang diperluas untuk disertakan .fw-semibolduntuk font semibold.
border-radiusUtilitas yang diperluas untuk menyertakan dua ukuran baru, .rounded-4dan .rounded-5, untuk opsi lainnya.

Perubahan tambahan

Memperkenalkan $enable-container-classesopsi baru. — Sekarang saat memilih ke dalam tata letak Kotak CSS eksperimental, .container-*kelas akan tetap dikompilasi, kecuali opsi ini disetel ke false. Kontainer juga sekarang mempertahankan nilai talangnya.
Komponen Offcanvas kini memiliki variasi responsif . Kelas asli .offcanvastetap tidak berubah—ia menyembunyikan konten di semua viewport. Untuk membuatnya responsif, ubah .offcanvaskelas itu ke kelas mana pun .offcanvas-{sm|md|lg|xl|xxl}.
Pembagi meja yang lebih tebal sekarang disertakan. — Kami telah menghapus batas yang lebih tebal dan lebih sulit untuk ditimpa antara grup tabel dan memindahkannya ke kelas opsional yang dapat Anda terapkan, .table-group-divider. Lihat tabel docs untuk contoh.
Scrollspy telah ditulis ulang untuk menggunakan Intersection Observer API , yang berarti Anda tidak lagi memerlukan pembungkus induk relatif, tidak lagioffsetkonfigurasi, dan banyak lagi. Cari implementasi Scrollspy Anda agar lebih akurat dan konsisten dalam penyorotan navigasinya.
Popover dan tooltips sekarang menggunakan variabel CSS. Beberapa variabel CSS telah diperbarui dari rekan-rekan Sass mereka untuk mengurangi jumlah variabel. Akibatnya, tiga variabel tidak digunakan lagi dalam rilis ini: $popover-arrow-color, $popover-arrow-outer-color, dan $tooltip-arrow-color.
Menambahkan .text-bg-{color}pembantu baru. Alih-alih mengatur individu .text-*dan .bg-*utilitas, Anda sekarang dapat menggunakan pembantu.text-bg-* untuk mengatur denganbackground-color latar depan yang kontras color.
Menambahkan .form-check-reversepengubah untuk membalik urutan label dan kotak centang/radio terkait.
Menambahkan dukungan kolom bergaris ke tabel melalui .table-striped-columnskelas baru.

Untuk daftar lengkap perubahan, lihat proyek v5.2.0 di GitHub .

v5.1.0

Menambahkan dukungan eksperimental untuk tata letak Grid CSS . — Ini adalah pekerjaan yang sedang berlangsung, dan belum siap untuk penggunaan produksi, tetapi Anda dapat memilih fitur baru melalui Sass. Untuk mengaktifkannya, nonaktifkan grid default, dengan mengatur $enable-grid-classes: falsedan mengaktifkan CSS Grid dengan mengatur $enable-cssgrid: true.
Navbar yang diperbarui untuk mendukung offcanvas. — Tambahkan laci offcanvas di navbar mana pun dengan kelas responsif .navbar-expand-*dan beberapa markup offcanvas.
Menambahkan komponen placeholder baru . — Komponen terbaru kami, cara menyediakan blokir sementara sebagai pengganti konten nyata untuk membantu menunjukkan bahwa ada sesuatu yang masih dimuat di situs atau aplikasi Anda.
Ciutkan plugin sekarang mendukung penciutan horizontal . — Tambahkan .collapse-horizontalke Anda .collapseuntuk menciutkan widthalih -alih height. Hindari pengecatan ulang browser dengan menyetel a min-heightatau height.
Menambahkan tumpukan baru dan pembantu aturan vertikal. — Terapkan beberapa properti flexbox dengan cepat untuk membuat tata letak khusus dengan tumpukan dengan cepat . Pilih dari tumpukan horizontal ( .hstack) dan vertikal ( ). .vstackTambahkan pembagi vertikal yang mirip dengan <hr>elemen dengan pembantu baru.vr .
:rootMenambahkan variabel CSS global baru . — Menambahkan beberapa variabel CSS baru ke :rootlevel untuk mengontrol <body>gaya. Lebih banyak lagi yang sedang dikerjakan, termasuk di seluruh utilitas dan komponen kami, tetapi untuk sekarang baca variabel CSS di bagian Kustomisasi .
Utilitas warna dan latar belakang yang dirombak untuk menggunakan variabel CSS, dan menambahkan opasitas teks baru dan utilitas opasitas latar belakang . — .text-* dan .bg-*utilitas sekarang dibangun dengan variabel CSS dan rgba()nilai warna, memungkinkan Anda untuk dengan mudah menyesuaikan utilitas apa pun dengan utilitas opacity baru.
Menambahkan contoh cuplikan baru berdasarkan untuk menunjukkan cara menyesuaikan komponen kami. — Tarik komponen khusus yang siap pakai dan pola desain umum lainnya dengan contoh Cuplikan baru kami . Termasuk footer , dropdown , grup daftar , dan modals .
Menghapus gaya pemosisian yang tidak digunakan dari popover dan tooltips karena ini hanya ditangani oleh Popper. $tooltip-margintelah ditinggalkan dan disetel ke nulldalam proses.

Ingin informasi lebih lanjut? Baca posting blog v5.1.0.

Hei! Perubahan pada rilis besar pertama kami dari Bootstrap 5, v5.0.0, didokumentasikan di bawah ini. Mereka tidak mencerminkan perubahan tambahan yang ditunjukkan di atas.

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-control.custom-checkboxsekarang .form-check.
- .custom-control.custom-custom-radiosekarang .form-check.
- .custom-control.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.
Kontrol formulir tidak lagi digunakan diperbaiki heightbila memungkinkan, alih-alih ditunda min-heightuntuk meningkatkan penyesuaian dan kompatibilitas dengan komponen lain.
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 ketika posisi dropdown statis, atau dropdown 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).
PemecahanKelas .activetidak bisa lagi diterapkan ke .nav-items, itu harus diterapkan langsung di .nav-links.

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 yang valid untuk membuat instance baru dari plugin:
```
const modal = new bootstrap.Modal('#myModal')
const 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().