Berhijrah ke v5

Jejak dan semak perubahan pada fail sumber Bootstrap, dokumentasi dan komponen untuk membantu anda berhijrah dari v4 ke v5.

Pada halaman ini

v5.2.0

Reka bentuk yang diperbaharui

Bootstrap v5.2.0 menampilkan kemas kini reka bentuk yang halus untuk segelintir komponen dan sifat merentas projek, terutamanya melalui border-radiusnilai yang diperhalusi pada butang dan kawalan borang . Dokumentasi kami juga telah dikemas kini dengan halaman utama baharu, reka letak dokumen yang lebih ringkas yang tidak lagi meruntuhkan bahagian bar sisi dan contoh Ikon Bootstrap yang lebih menonjol .

Lebih banyak pembolehubah CSS

Kami telah mengemas kini semua komponen kami untuk menggunakan pembolehubah CSS. Walaupun Sass masih menyokong segala-galanya, setiap komponen telah dikemas kini untuk memasukkan pembolehubah CSS pada kelas asas komponen (cth, .btn), membenarkan lebih banyak penyesuaian masa nyata bagi Bootstrap. Dalam keluaran seterusnya, kami akan terus mengembangkan penggunaan pembolehubah CSS kami ke dalam reka letak, borang, pembantu dan utiliti kami. Baca lebih lanjut mengenai pembolehubah CSS dalam setiap komponen pada halaman dokumentasi masing-masing.

Penggunaan pembolehubah CSS kami akan menjadi agak tidak lengkap sehingga Bootstrap 6. Walaupun kami ingin melaksanakan sepenuhnya ini secara menyeluruh, mereka menghadapi risiko menyebabkan perubahan yang pecah. Sebagai contoh, tetapan $alert-border-width: var(--bs-border-width)dalam kod sumber kami memecahkan potensi Sass dalam kod anda sendiri jika anda melakukannya $alert-border-width * 2atas sebab tertentu.

Oleh itu, di mana mungkin, kami akan terus mendorong ke arah lebih banyak pembolehubah CSS, tetapi sila maklum bahawa pelaksanaan kami mungkin terhad sedikit dalam v5.

Baru`_maps.scss`

Bootstrap v5.2.0 memperkenalkan fail Sass baharu dengan _maps.scss. Ia mengeluarkan beberapa peta Sass daripada _variables.scssuntuk menyelesaikan isu di mana kemas kini pada peta asal tidak digunakan pada peta sekunder yang memanjangkannya. Sebagai contoh, kemas kini kepada $theme-colorstidak digunakan pada peta tema lain yang bergantung pada $theme-colors, memecahkan aliran kerja penyesuaian utama. Ringkasnya, Sass mempunyai had apabila pembolehubah lalai atau peta telah digunakan , ia tidak boleh dikemas kini. Terdapat kelemahan yang sama dengan pembolehubah CSS apabila ia digunakan untuk mengarang pembolehubah CSS yang lain.

Inilah sebabnya mengapa penyesuaian pembolehubah dalam Bootstrap perlu dilakukan selepas @import "functions", tetapi sebelum @import "variables"dan baki import kami yang lain. Perkara yang sama berlaku untuk peta Sass—anda mesti mengatasi lalai sebelum ia digunakan. Peta berikut telah dipindahkan ke peta baharu _maps.scss:

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

Binaan CSS Bootstrap tersuai anda kini sepatutnya kelihatan seperti ini dengan import peta yang berasingan.

  // 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

Utiliti baharu

font-weightUtiliti dikembangkan untuk disertakan .fw-semibolduntuk fon semibold.
border-radiusUtiliti dikembangkan untuk memasukkan dua saiz baharu .rounded-4dan .rounded-5, untuk lebih banyak pilihan.

Perubahan tambahan

Memperkenalkan $enable-container-classespilihan baharu. — Sekarang apabila mengikut serta dalam reka letak Grid CSS eksperimen, .container-*kelas masih akan disusun, melainkan pilihan ini ditetapkan kepada false. Bekas juga kini mengekalkan nilai longkang mereka.
Komponen Offcanvas kini mempunyai variasi responsif . Kelas asal .offcanvaskekal tidak berubah—ia menyembunyikan kandungan merentas semua port pandangan. Untuk menjadikannya responsif, tukar .offcanvaskelas itu kepada mana-mana .offcanvas-{sm|md|lg|xl|xxl}kelas.
Pembahagi meja yang lebih tebal kini ikut serta. — Kami telah mengalih keluar sempadan yang lebih tebal dan sukar untuk mengatasi antara kumpulan jadual dan mengalihkannya ke kelas pilihan yang boleh anda gunakan, .table-group-divider. Lihat dokumen jadual untuk contoh.
Scrollspy telah ditulis semula untuk menggunakan Intersection Observer API , yang bermaksud anda tidak lagi memerlukan pembalut induk relatif, menafikanoffsetkonfigurasi dan banyak lagi. Cari pelaksanaan Scrollspy anda agar lebih tepat dan konsisten dalam penyerlahan nav mereka.
Popover dan petua alat kini menggunakan pembolehubah CSS. Beberapa pembolehubah CSS telah dikemas kini daripada rakan Sass mereka untuk mengurangkan bilangan pembolehubah. Akibatnya, tiga pembolehubah telah ditamatkan dalam keluaran ini: $popover-arrow-color, $popover-arrow-outer-color, dan $tooltip-arrow-color.
Menambah .text-bg-{color}pembantu baharu. Daripada menetapkan individu .text-*dan .bg-*utiliti, anda kini boleh menggunakan pembantu.text-bg-* untuk menetapkan denganbackground-color latar depan yang berbeza color.
Ditambah .form-check-reversepengubah suai untuk membalikkan susunan label dan kotak semak/radio yang berkaitan.
Menambahkan sokongan lajur berjalur pada jadual melalui .table-striped-columnskelas baharu.

Untuk senarai lengkap perubahan, lihat projek v5.2.0 di GitHub .

v5.1.0

Menambahkan sokongan percubaan untuk susun atur Grid CSS . — Ini sedang dalam proses dan belum bersedia untuk kegunaan pengeluaran, tetapi anda boleh mengikut serta dalam ciri baharu melalui Sass. Untuk mendayakannya, lumpuhkan grid lalai, dengan menetapkan $enable-grid-classes: falsedan dayakan Grid CSS dengan menetapkan $enable-cssgrid: true.
Navbar dikemas kini untuk menyokong offcanvas. — Tambahkan laci offcanvas dalam mana-mana bar nav dengan kelas responsif .navbar-expand-*dan beberapa penanda offcanvas.
Menambah komponen pemegang tempat baharu . — Komponen terbaharu kami, satu cara untuk menyediakan blok sementara sebagai ganti kandungan sebenar untuk membantu menunjukkan bahawa sesuatu masih dimuatkan dalam tapak atau apl anda.
Pemalam Runtuhkan kini menyokong runtuh mendatar . — Tambahkan .collapse-horizontalpada anda .collapseuntuk meruntuhkan widthbukannya height. Elakkan pengecatan semula pelayar dengan menetapkan a min-heightatau height.
Menambah tindanan baharu dan pembantu peraturan menegak. — Gunakan berbilang sifat flexbox dengan pantas untuk membuat reka letak tersuai dengan cepat dengan tindanan . Pilih daripada tindanan mendatar ( .hstack) dan menegak ( ). .vstackTambahkan pembahagi menegak yang serupa dengan <hr>elemen dengan pembantu baharu.vr .
Menambah :rootpembolehubah CSS global baharu. — Menambah beberapa pembolehubah CSS baharu ke :roottahap untuk mengawal <body>gaya. Lebih banyak lagi sedang dalam usaha, termasuk merentas utiliti dan komponen kami, tetapi buat masa ini baca pembolehubah CSS dalam bahagian Sesuaikan .
Utiliti warna dan latar belakang yang dibaik pulih untuk menggunakan pembolehubah CSS, dan menambah utiliti kelegapan teks dan kelegapan latar belakang baharu . — .text-* dan .bg-*utiliti kini dibina dengan pembolehubah CSS dan rgba()nilai warna, membolehkan anda menyesuaikan sebarang utiliti dengan mudah dengan utiliti kelegapan baharu.
Menambahkan contoh coretan baharu berdasarkan untuk menunjukkan cara menyesuaikan komponen kami. — Tarik sedia untuk menggunakan komponen tersuai dan corak reka bentuk biasa yang lain dengan contoh Coretan baharu kami . Termasuk pengaki , lungsur turun , senarai kumpulan dan modal .
Mengalih keluar gaya kedudukan yang tidak digunakan daripada popover dan petua alatan kerana ini dikendalikan oleh Popper semata-mata. $tooltip-margintelah ditamatkan dan ditetapkan kepada nulldalam proses.

Ingin maklumat lanjut? Baca catatan blog v5.1.0.

Hey! Perubahan pada keluaran utama pertama kami Bootstrap 5, v5.0.0, didokumenkan di bawah. Ia tidak menggambarkan perubahan tambahan yang ditunjukkan di atas.

Kebergantungan

jQuery digugurkan.
Dinaik taraf daripada Popper v1.x kepada Popper v2.x.
Menggantikan Libsass dengan Dart Sass kerana pengkompil Sass kami yang diberikan Libsass telah ditamatkan.
Berhijrah dari Jekyll ke Hugo untuk membina dokumentasi kami

Sokongan penyemak imbas

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

Perubahan dokumentasi

Laman utama reka bentuk semula, reka letak dokumen dan pengaki.
Menambahkan panduan Bungkusan baharu .
Menambah bahagian Peribadikan baharu , menggantikan halaman Tema v4 , dengan butiran baharu tentang Sass, pilihan konfigurasi global, skema warna, pembolehubah CSS dan banyak lagi.
Menyusun semula semua dokumentasi borang ke bahagian Borang baharu , memecahkan kandungan kepada halaman yang lebih fokus.
Begitu juga, kemas kini bahagian Reka Letak , untuk menyempurnakan kandungan grid dengan lebih jelas.
Menamakan semula halaman komponen "Navs" kepada "Navs & Tabs".
Menamakan semula halaman "Cek" kepada "Cek & radio".
Mereka bentuk semula bar navigasi dan menambah subnav baharu untuk memudahkan anda meneroka tapak dan versi dokumen kami.
Menambah pintasan papan kekunci baharu untuk medan carian: Ctrl + /.

Sass

Kami telah membuang gabungan peta Sass lalai untuk memudahkan anda mengalih keluar nilai berlebihan. Perlu diingat anda kini perlu menentukan semua nilai dalam peta Sass seperti $theme-colors. Semak cara berurusan dengan peta Sass .
BerbukaMenamakan semula color-yiq()fungsi dan pembolehubah berkaitan color-contrast()kerana ia tidak lagi berkaitan dengan ruang warna YIQ. Lihat #30168.
- $yiq-contrasted-thresholddinamakan semula kepada $min-contrast-ratio.
- $yiq-text-darkdan $yiq-text-lightmasing-masing dinamakan semula kepada $color-contrast-darkdan $color-contrast-light.
BerbukaParameter campuran pertanyaan media telah berubah untuk pendekatan yang lebih logik.
- media-breakpoint-down()menggunakan titik putus itu sendiri dan bukannya titik putus seterusnya (cth, media-breakpoint-down(lg)bukannya media-breakpoint-down(md)sasaran pandangan yang lebih kecil daripada lg).
- Begitu juga, parameter kedua dalam media-breakpoint-between()juga menggunakan titik putus itu sendiri dan bukannya titik putus seterusnya (cth, media-between(sm, lg)bukannya media-breakpoint-between(sm, md)sasaran pandangan antara smdan lg).
BerbukaGaya cetakan dan $enable-print-stylespembolehubah dialih keluar. Kelas paparan cetakan masih ada. Lihat #28339 .
BerbukaDigugurkan color(), theme-color(), dan gray()fungsi memihak kepada pembolehubah. Lihat #29083 .
Berbukatheme-color-level()Fungsi dinamakan semula kepada color-level()dan kini menerima sebarang warna yang anda inginkan dan bukannya $theme-colorwarna sahaja. Lihat #29083 Awas : color-level() kemudiannya digugurkan dalam v5.0.0-alpha3.
BerbukaDinamakan semula $enable-prefers-reduced-motion-media-querydan $enable-pointer-cursor-for-buttonskepada $enable-reduced-motiondan $enable-button-pointersuntuk ringkas.
BerbukaMengalih keluar bg-gradient-variant()campuran. Gunakan .bg-gradientkelas untuk menambah kecerunan pada elemen dan bukannya .bg-gradient-*kelas yang dijana.
Berbuka Mengalih keluar campuran yang telah ditamatkan sebelum ini:
- hover, hover-focus, plain-hover-focus, danhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(juga menjatuhkan kelas utiliti yang berkaitan, .text-hide)
- visibility()
- form-control-focus()
BerbukaMenamakan semula scale-color()fungsi kepada shift-color()untuk mengelakkan perlanggaran dengan fungsi penskalaan warna Sass sendiri.
box-shadowmixins kini membenarkan nullnilai dan drop nonedaripada berbilang argumen. Lihat #30394 .
Mixin border-radius()kini mempunyai nilai lalai.

Sistem warna

Sistem warna yang berfungsi dengan color-level()dan $theme-color-intervaltelah dialih keluar memihak kepada sistem warna baharu. Semua lighten()dan darken()fungsi dalam pangkalan kod kami digantikan dengan tint-color()dan shade-color(). Fungsi ini akan mencampurkan warna dengan sama ada putih atau hitam dan bukannya menukar kecerahannya dengan jumlah tetap. Sama ada shift-color()akan mewarna atau mewarnakan warna bergantung pada sama ada parameter beratnya adalah positif atau negatif. Lihat #30622 untuk butiran lanjut.
Menambah warna dan warna baharu untuk setiap warna, menyediakan sembilan warna berasingan untuk setiap warna asas, sebagai pembolehubah Sass baharu.
Kontras warna yang dipertingkatkan. Nisbah kontras warna terhantuk daripada 3:1 hingga 4.5:1 dan warna biru, hijau, cyan dan merah jambu dikemas kini untuk memastikan kontras WCAG 2.1 AA. Juga menukar warna kontras warna kami daripada $gray-900kepada $black.
Untuk menyokong sistem warna kami, kami telah menambah adat tint-color()dan shade-color()fungsi baharu untuk mencampurkan warna kami dengan sewajarnya.

Kemas kini grid

Titik putus baru! Menambah xxltitik putus baharu untuk 1400pxdan ke atas. Tiada perubahan pada semua titik putus yang lain.
Longkang yang lebih baik. Parit kini ditetapkan dalam rem dan lebih sempit daripada v4 ( 1.5rem, atau kira-kira 24px, turun dari 30px). Ini menjajarkan longkang sistem grid kami dengan utiliti jarak kami.
- Menambahkan kelas longkang baharu ( .g-*, .gx-*, dan .gy-*) untuk mengawal longkang mendatar/menegak, longkang mendatar dan longkang menegak.
- BerbukaDinamakan semula .no-gutterskepada .g-0untuk memadankan utiliti longkang baharu.
Lajur tidak lagi position: relativedigunakan, jadi anda mungkin perlu menambah .position-relativebeberapa elemen untuk memulihkan gelagat tersebut.
BerbukaMenggugurkan beberapa .order-*kelas yang sering tidak digunakan. Kami kini hanya menyediakan .order-1kepada .order-5di luar kotak.
BerbukaMenggugurkan .mediakomponen kerana ia boleh direplikasi dengan mudah dengan utiliti. Lihat #28265 dan halaman utiliti fleksibel untuk contoh .
Berbuka bootstrap-grid.csskini hanya digunakan box-sizing: border-boxpada lajur dan bukannya menetapkan semula saiz kotak global. Dengan cara ini, gaya grid kami boleh digunakan di lebih banyak tempat tanpa gangguan.
$enable-grid-classestidak lagi melumpuhkan penjanaan kelas kontena lagi. Lihat #29146.
Mengemas kini make-colmixin kepada lalai kepada lajur yang sama tanpa saiz yang ditentukan.

Kandungan, But semula, dsb

RFS kini didayakan secara lalai. Tajuk yang menggunakanfont-size()mixin akan melaraskannya secara automatik mengikutfont-sizeskala dengan port pandangan. Ciri ini sebelum ini ikut serta dengan v4.
BerbukaMembaik pulih tipografi paparan kami untuk menggantikan $display-*pembolehubah kami dan dengan $display-font-sizespeta Sass. Juga mengalih keluar $display-*-weightpembolehubah individu untuk s tunggal $display-font-weightdan diselaraskan font-size.
Menambah dua .display-*saiz tajuk baharu .display-5dan .display-6.
Pautan digariskan secara lalai (bukan hanya pada tuding), melainkan ia adalah sebahagian daripada komponen tertentu.
Jadual direka bentuk semula untuk menyegarkan gaya mereka dan membina semulanya dengan pembolehubah CSS untuk lebih kawalan ke atas penggayaan.
BerbukaJadual bersarang tidak mewarisi gaya lagi.
Berbuka .thead-lightdan .thead-darkdigugurkan memihak kepada .table-*kelas varian yang boleh digunakan untuk semua elemen jadual ( thead, tbody, tfoot, tr, thdan td).
BerbukaMixin table-row-variant()dinamakan semula kepada table-variant()dan menerima hanya 2 parameter: $color(nama warna) dan $value(kod warna). Warna sempadan dan warna aksen dikira secara automatik berdasarkan pembolehubah faktor jadual.
Pisahkan pembolehubah pelapik sel jadual ke dalam -ydan -x.
BerbukaDigugurkan .pre-scrollablekelas. Lihat #29135
Berbuka .text-*utiliti tidak menambah keadaan tuding dan fokus pada pautan lagi. .link-*kelas pembantu boleh digunakan sebaliknya. Lihat #29267
BerbukaDigugurkan .text-justifykelas. Lihat #29793
Berbuka <hr>elemen kini digunakan heightdan bukannya borderuntuk menyokong sizeatribut dengan lebih baik. Ini juga membolehkan penggunaan utiliti pelapik untuk mencipta pembahagi yang lebih tebal (cth, <hr class="py-1">).
padding-leftTetapkan semula lalai mendatar <ul>dan <ol>elemen daripada lalai penyemak imbas 40pxkepada 2rem.
Ditambah $enable-smooth-scroll, yang terpakai scroll-behavior: smoothsecara global—kecuali untuk pengguna yang meminta gerakan yang dikurangkan melalui prefers-reduced-motionpertanyaan media. Lihat #31877

RTL

Pembolehubah khusus arah mendatar, utiliti dan campuran semuanya telah dinamakan semula untuk menggunakan sifat logik seperti yang terdapat dalam reka letak kotak flex—cth, startdan endsebagai ganti leftdan right.

Borang

Menambah borang terapung baharu! Kami telah mempromosikan contoh label Terapung kepada komponen borang yang disokong sepenuhnya. Lihat halaman label Terapung baharu.
Berbuka Unsur bentuk asli dan tersuai disatukan. Kotak pilihan, radio, pilihan dan input lain yang mempunyai kelas asli dan tersuai dalam v4 telah disatukan. Kini hampir semua elemen borang kami adalah tersuai sepenuhnya, kebanyakannya tanpa memerlukan HTML tersuai.
- .custom-control.custom-checkboxadalah sekarang .form-check.
- .custom-control.custom-custom-radioadalah sekarang .form-check.
- .custom-control.custom-switchadalah sekarang .form-check.form-switch.
- .custom-selectadalah sekarang .form-select.
- .custom-filedan .form-filetelah digantikan dengan gaya tersuai di atas .form-control.
- .custom-rangeadalah sekarang .form-range.
- Digugurkan asli .form-control-filedan .form-control-range.
BerbukaDijatuhkan .input-group-appenddan .input-group-prepend. Anda kini boleh menambah butang dan .input-group-textsebagai anak langsung kumpulan input.
Jejari sempadan Hilang yang lama pada kumpulan input dengan pepijat maklum balas pengesahan akhirnya dibetulkan dengan menambahkan .has-validationkelas tambahan pada kumpulan input dengan pengesahan.
Berbuka Menggugurkan kelas reka letak khusus bentuk untuk sistem grid kami. Gunakan grid dan utiliti kami dan bukannya .form-group, .form-row, atau .form-inline.
BerbukaLabel borang kini memerlukan .form-label.
Berbuka .form-texttidak lagi set display, membolehkan anda membuat teks bantuan sebaris atau menyekat seperti yang anda inginkan hanya dengan menukar elemen HTML.
Kawalan borang tidak lagi digunakan tetap heightapabila boleh, sebaliknya menangguhkan min-heightuntuk meningkatkan penyesuaian dan keserasian dengan komponen lain.
Ikon pengesahan tidak lagi digunakan pada <select>s dengan multiple.
Fail Sass sumber disusun semula di bawah scss/forms/, termasuk gaya kumpulan input.

Komponen

Nilai bersatu paddinguntuk makluman, serbuk roti, kad, lungsur turun, kumpulan senarai, modal, popover dan petua alat berdasarkan $spacerpembolehubah kami. Lihat #30564 .

Akordion

Menambah komponen akordion baharu .

Makluman

Makluman kini mempunyai contoh dengan ikon .
Mengalih keluar gaya tersuai untuk <hr>s dalam setiap makluman kerana ia sudah menggunakan currentColor.

Lencana

BerbukaMenggugurkan semua .badge-*kelas warna untuk utiliti latar belakang (cth, gunakan .bg-primarybukannya .badge-primary).
BerbukaDijatuhkan .badge-pill—gunakan .rounded-pillutiliti sebaliknya.
BerbukaGaya tuding dan fokus dialih keluar untuk <a>dan <button>elemen.
Menambahkan padding lalai untuk lencana dari .25em/ .5emke .35em/ .65em.

Serbuk roti

Mempermudahkan rupa lalai serbuk roti dengan mengalih keluar padding, background-color, dan border-radius.
Menambah sifat tersuai CSS baharu --bs-breadcrumb-divideruntuk penyesuaian mudah tanpa perlu menyusun semula CSS.

Butang

Berbuka Togol butang , dengan kotak pilihan atau radio, tidak lagi memerlukan JavaScript dan mempunyai penanda baharu. Kami tidak lagi memerlukan elemen pembalut, tambah.btn-checkpada<input>, dan pasangkannya dengan mana-mana.btnkelas pada<label>. Lihat #30650 . Dokumen untuk ini telah berpindah dari halaman Butang kami ke bahagian Borang baharu.
Berbuka Digugurkan .btn-blockuntuk utiliti. Daripada menggunakan .btn-blockpada .btn, bungkus butang anda dengan .d-griddan .gap-*utiliti untuk menjarakkannya mengikut keperluan. Beralih kepada kelas responsif untuk mendapatkan lebih kawalan ke atasnya. Baca dokumen untuk beberapa contoh.
Mengemas kini kami button-variant()dan button-outline-variant()mixin untuk menyokong parameter tambahan.
Butang dikemas kini untuk memastikan peningkatan kontras pada tuding dan keadaan aktif.
Butang dilumpuhkan kini mempunyai pointer-events: none;.

Kad

BerbukaDijatuhkan .card-deckmemihak kepada grid kami. Balut kad anda dalam kelas lajur dan tambah .row-cols-*bekas induk untuk mencipta semula dek kad (tetapi dengan lebih kawalan ke atas penjajaran responsif).
BerbukaDijatuhkan .card-columnsmemihak kepada Masonry. Lihat #28922 .
BerbukaMenggantikan .cardakordion berasaskan dengan komponen Akordion baharu .

karusel

Menambahkan .carousel-darkvarian baharu untuk teks gelap, kawalan dan penunjuk (bagus untuk latar belakang yang lebih terang).
Menggantikan ikon chevron untuk kawalan karusel dengan SVG baharu daripada Ikon Bootstrap .

Butang tutup

BerbukaDinamakan semula .closekepada .btn-closeuntuk nama yang kurang generik.
Butang tutup kini menggunakan background-image(SVG terbenam) dan bukannya a ×dalam HTML, membolehkan penyesuaian lebih mudah tanpa perlu menyentuh penanda anda.
Menambahkan .btn-close-whitevarian baharu yang digunakan filter: invert(1)untuk mendayakan ikon tolak kontras yang lebih tinggi terhadap latar belakang yang lebih gelap.

Runtuh

Dialih keluar penambat skrol untuk akordion.

Jatuh turun

Menambahkan .dropdown-menu-darkvarian baharu dan pembolehubah yang berkaitan untuk menu lungsur gelap atas permintaan.
Menambah pembolehubah baharu untuk $dropdown-padding-x.
Menggelapkan pembahagi lungsur untuk kontras yang lebih baik.
BerbukaSemua peristiwa untuk lungsur turun kini dicetuskan pada butang togol lungsur turun dan kemudian menggelembung ke elemen induk.
Menu lungsur turun kini mempunyai data-bs-popper="static"atribut yang ditetapkan apabila kedudukan lungsur turun adalah statik, atau lungsur turun berada dalam bar navigasi. Ini ditambah oleh JavaScript kami dan membantu kami menggunakan gaya kedudukan tersuai tanpa mengganggu kedudukan Popper.
BerbukaPilihan yang digugurkan flipuntuk pemalam lungsur memihak kepada konfigurasi Popper asli. Anda kini boleh melumpuhkan tingkah laku membalik dengan menghantar tatasusunan kosong untuk fallbackPlacementspilihan dalam pengubah suai flip .
Menu lungsur kini boleh diklik dengan pilihan baharu autoCloseuntuk mengendalikan gelagat auto tutup . Anda boleh menggunakan pilihan ini untuk menerima klik di dalam atau di luar menu lungsur turun untuk menjadikannya interaktif.
Dropdown kini menyokong .dropdown-items yang dibungkus dengan <li>s.

Jumbotron

BerbukaMenggugurkan komponen jumbotron kerana ia boleh direplikasi dengan utiliti. Lihat contoh Jumbotron baharu kami untuk demo.

Senaraikan kumpulan

Menambahkan .list-group-numberedpengubah suai baharu pada senarai kumpulan.

Navs dan tab

Menambah nullpembolehubah baharu untuk font-size, font-weight, color, dan :hover colorpada .nav-linkkelas.

Navbars

BerbukaNavbars kini memerlukan bekas dalam (untuk memudahkan keperluan jarak dan CSS yang diperlukan secara drastik).
BerbukaKelas .activetidak lagi boleh digunakan untuk .nav-items, ia mesti digunakan terus pada .nav-links.

Luar Kanvas

Menambahkan komponen offcanvas baharu .

penomboran

Pautan penomboran kini mempunyai boleh disesuaikan margin-leftyang dibulatkan secara dinamik pada semua penjuru apabila dipisahkan antara satu sama lain.
Ditambahkan transitions pada pautan penomboran.

Popovers

BerbukaDinamakan semula .arrowkepada .popover-arrowdalam templat popover lalai kami.
Menamakan semula whiteListpilihan kepada allowList.

Pemintal

Spinners kini menghormati prefers-reduced-motion: reducedengan memperlahankan animasi. Lihat #31882 .
Penjajaran menegak pemutar yang dipertingkatkan.

Roti bakar

Roti bakar kini boleh diletakkan di dalam a .toast-containerdengan bantuan utiliti kedudukan .
Menukar tempoh roti bakar lalai kepada 5 saat.
Dikeluarkan overflow: hiddendaripada roti bakar dan digantikan dengan border-radiuss yang betul dengan calc()fungsi.

Petua alat

BerbukaDinamakan semula .arrowkepada .tooltip-arrowdalam templat petua alat lalai kami.
BerbukaNilai lalai untuk fallbackPlacementsditukar kepada ['top', 'right', 'bottom', 'left']untuk penempatan elemen popper yang lebih baik.
BerbukaMenamakan semula whiteListpilihan kepada allowList.

Utiliti

BerbukaMenamakan semula beberapa utiliti untuk menggunakan nama harta logik dan bukannya nama arah dengan penambahan sokongan RTL:
- Dinamakan semula .left-*dan .right-*kepada .start-*dan .end-*.
- Dinamakan semula .float-leftdan .float-rightkepada .float-startdan .float-end.
- Dinamakan semula .border-leftdan .border-rightkepada .border-startdan .border-end.
- Dinamakan semula .rounded-leftdan .rounded-rightkepada .rounded-startdan .rounded-end.
- Dinamakan semula .ml-*dan .mr-*kepada .ms-*dan .me-*.
- Dinamakan semula .pl-*dan .pr-*kepada .ps-*dan .pe-*.
- Dinamakan semula .text-leftdan .text-rightkepada .text-startdan .text-end.
BerbukaJidar negatif dilumpuhkan secara lalai.
Menambah .bg-bodykelas baharu untuk menetapkan latar belakang dengan pantas <body>kepada elemen tambahan.
Menambahkan utiliti kedudukan baharu untuk top, right, bottom, dan left. Nilai termasuk 0, 50%, dan 100%untuk setiap harta.
Ditambah baharu .translate-middle-x& .translate-middle-yutiliti pada elemen kedudukan mutlak/tetap secara mendatar atau menegak.
Menambah border-widthutiliti baharu .
BerbukaDinamakan semula .text-monospacekepada .font-monospace.
BerbukaDialih keluar .text-hidekerana ia merupakan kaedah lama untuk menyembunyikan teks yang tidak boleh digunakan lagi.
Menambah .fs-*utiliti untuk font-sizeutiliti (dengan RFS didayakan). Ini menggunakan skala yang sama seperti tajuk lalai HTML (1-6, besar ke kecil), dan boleh diubah suai melalui peta Sass.
Berbuka.font-weight-*Utiliti dinamakan semula sebagai .fw-*ringkas dan konsisten.
Berbuka.font-style-*Utiliti dinamakan semula sebagai .fst-*ringkas dan konsisten.
Ditambah .d-griduntuk memaparkan utiliti dan gaputiliti baharu ( .gap) untuk susun atur Grid CSS dan flexbox.
BerbukaDialih keluar .rounded-smdan rounded-lg, dan memperkenalkan skala kelas baharu, .rounded-0kepada .rounded-3. Lihat #31687 .
Menambah line-heightutiliti baharu: .lh-1, .lh-sm, .lh-basedan .lh-lg. Lihat di sini .
Mengalihkan .d-noneutiliti dalam CSS kami untuk memberikannya lebih berat berbanding utiliti paparan lain.
Dilanjutkan .visually-hidden-focusablepembantu untuk turut bekerja pada bekas, menggunakan :focus-within.

Pembantu

Berbuka Pembantu benam responsif telah dinamakan semula kepada pembantu nisbah dengan nama kelas baharu dan gelagat yang dipertingkatkan, serta pembolehubah CSS yang berguna.
- Kelas telah dinamakan semula untuk ditukar bykepada xdalam nisbah bidang. Sebagai contoh, .ratio-16by9adalah sekarang .ratio-16x9.
- Kami telah menggugurkan .embed-responsive-itempemilih kumpulan elemen dan memihak kepada .ratio > *pemilih yang lebih mudah. Tiada lagi kelas diperlukan dan pembantu nisbah kini berfungsi dengan mana-mana elemen HTML.
- Peta $embed-responsive-aspect-ratiosSass telah dinamakan semula kepada $aspect-ratiosdan nilainya telah dipermudahkan untuk memasukkan nama kelas dan peratusan sebagai key: valuepasangan.
- Pembolehubah CSS kini dijana dan disertakan untuk setiap nilai dalam peta Sass. Ubah suai --bs-aspect-ratiopembolehubah pada .ratiountuk mencipta sebarang nisbah aspek tersuai .
Berbuka Kelas "Pembaca skrin" kini ialah kelas "tersembunyi secara visual" .
- Menukar fail Sass daripada scss/helpers/_screenreaders.scsskepadascss/helpers/_visually-hidden.scss
- Dinamakan semula .sr-onlydan .sr-only-focusablekepada .visually-hiddendan.visually-hidden-focusable
- Dinamakan semula sr-only()dan sr-only-focusable()campurkan kepada visually-hidden()dan visually-hidden-focusable().
bootstrap-utilities.csskini juga termasuk pembantu kami. Pembantu tidak perlu diimport dalam binaan tersuai lagi.

JavaScript

Menggugurkan kebergantungan jQuery dan menulis semula pemalam untuk berada dalam JavaScript biasa.
BerbukaAtribut data untuk semua pemalam JavaScript kini diberi ruang nama untuk membantu membezakan fungsi Bootstrap daripada pihak ketiga dan kod anda sendiri. Sebagai contoh, kami menggunakan data-bs-togglebukannya data-toggle.
Semua pemalam kini boleh menerima pemilih CSS sebagai hujah pertama. Anda boleh sama ada menghantar elemen DOM atau mana-mana pemilih CSS yang sah untuk membuat contoh baharu pemalam:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigboleh diluluskan sebagai fungsi yang menerima konfigurasi Popper lalai Bootstrap sebagai hujah, supaya anda boleh menggabungkan konfigurasi lalai ini mengikut cara anda. Digunakan pada lungsur turun, popover dan petua alat.
Nilai lalai untuk fallbackPlacementsditukar kepada ['top', 'right', 'bottom', 'left']peletakan elemen Popper yang lebih baik. Digunakan pada lungsur turun, popover dan petua alat.
Garis bawah dialih keluar daripada kaedah statik awam seperti _getInstance()→ getInstance().