Migrasi ka v5

Lacak sareng marios parobihan kana file sumber Bootstrap, dokuméntasi, sareng komponén pikeun ngabantosan anjeun migrasi tina v4 ka v5.

Dina kaca ieu

v5.2.0

Desain refreshed

Bootstrap v5.2.0 nampilkeun pembaruan desain anu halus pikeun sakeupeul komponén sareng pasipatan dina proyék, khususna ngalangkungan border-radiusnilai anu disampurnakeun dina tombol sareng kadali formulir . Dokuméntasi kami ogé parantos diapdét sareng halaman wéb énggal, perenah dokumén anu langkung saderhana anu henteu deui ngancurkeun bagian tina sidebar, sareng conto anu langkung menonjol ngeunaan Ikon Bootstrap .

Langkung variabel CSS

Kami parantos ngamutahirkeun sadaya komponén kami pikeun ngagunakeun variabel CSS. Bari Sass masih underpins sagalana, unggal komponén geus diropéa pikeun ngawengku variabel CSS dina kelas dasar komponén (misalna, .btn), sahingga pikeun leuwih real-time kustomisasi tina Bootstrap. Dina sékrési salajengna, urang bakal terus ngalegaan pamakean variabel CSS kana perenah, formulir, pembantu, sareng utilitas. Baca langkung seueur ngeunaan variabel CSS dina unggal komponén dina halaman dokuméntasi masing-masing.

Pamakéan variabel CSS urang bakal rada teu lengkep dugi Bootstrap 6. Bari urang kukituna cinta pikeun pinuh nerapkeun ieu sakuliah dewan, aranjeunna ngajalankeun resiko ngabalukarkeun megatkeun parobahan. Contona, setelan $alert-border-width: var(--bs-border-width)dina kode sumber urang megatkeun poténsi Sass dina kode sorangan lamun anjeun ngalakukeun $alert-border-width * 2pikeun sababaraha alesan.

Sapertos kitu, dimana waé mungkin, kami bakal teras-terasan nyorong kana langkung seueur variabel CSS, tapi punten ngakuan palaksanaan kami tiasa rada terbatas dina v5.

Anyar`_maps.scss`

Bootstrap v5.2.0 ngawanohkeun file Sass anyar kalawan _maps.scss. Éta ngaluarkeun sababaraha peta Sass _variables.scsspikeun ngalereskeun masalah dimana apdet kana peta asli henteu dilarapkeun kana peta sekundér anu manjangkeunana. Contona, apdet $theme-colorsteu keur dilarapkeun ka peta téma séjén nu ngandelkeun $theme-colors, megatkeun alur kerja kustomisasi konci. Pondokna, Sass gaduh watesan dimana sakali variabel standar atanapi peta parantos dianggo , éta henteu tiasa diropéa. Aya kakurangan anu sami sareng variabel CSS nalika aranjeunna dianggo pikeun nyusun variabel CSS anu sanés.

Ieu sababna kustomisasi variabel dina Bootstrap kedah saatosna @import "functions", tapi sateuacan @import "variables"sareng sesa tumpukan impor urang. Sami manglaku ka peta Sass-anjeun kedah override standar sateuacan aranjeunna dipaké. Peta di handap ieu geus dipindahkeun ka nu anyar _maps.scss:

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

Ngawangun CSS Bootstrap khusus anjeun ayeuna kedah siga kieu kalayan impor peta anu misah.

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

font-weightUtiliti dimekarkeun pikeun kalebet .fw-semiboldpikeun fon semibold.
border-radiusUtiliti dimekarkeun pikeun ngawengku dua ukuran anyar, .rounded-4jeung .rounded-5, pikeun leuwih pilihan.

parobahan tambahan

Diwanohkeun $enable-container-classespilihan anyar. — Ayeuna nalika milih kana perenah CSS Grid ékspérimén, .container-*kelas masih bakal disusun, iwal pilihan ieu disetel ka false. Wadah ogé ayeuna tetep nilai talang maranéhanana.
Komponén Offcanvas ayeuna gaduh variasi responsif . Kelas aslina .offcanvastetep unchanged-eta nyumput eusi sakuliah sakabéh viewports. Pikeun ngajantenkeun responsif, robih .offcanvaskelas éta ka kelas naon waé .offcanvas-{sm|md|lg|xl|xxl}.
Dividers méja kandel ayeuna milih-di. - Kami geus dihapus kandel tur leuwih hese override wates antara grup tabel sarta dipindahkeun ka kelas pilihan anjeun bisa nerapkeun .table-group-divider,. Tempo docs tabel pikeun conto.
Scrollspy geus ditulis ulang ngagunakeun Intersection Observer API , nu hartina anjeun teu perlu deui wrappers indungna relatif, deprecatesoffsetconfig, sareng nu sanesna. Tingali pikeun palaksanaan Scrollspy anjeun leuwih akurat tur konsisten dina nav panyorot maranéhna.
Popovers sareng tooltips ayeuna nganggo variabel CSS. Sababaraha variabel CSS geus diropéa tina counterparts Sass maranéhna pikeun ngurangan jumlah variabel. Hasilna, tilu variabel geus deprecated dina release ieu: $popover-arrow-color, $popover-arrow-outer-color, jeung $tooltip-arrow-color.
Ditambahkeun .text-bg-{color}pembantu anyar. Gantina netepkeun individu .text-*sareng .bg-*utilitas, anjeun ayeuna tiasa nganggo helpers .text-bg-*pikeun nyetél background-colorsareng latar hareup anu kontras color.
Ditambahkeun .form-check-reversemodifier pikeun flip tatanan labél sareng kotak centang / radio anu aya hubunganana.
Ditambahkeun kolom belang ngarojong kana tabel via .table-striped-columnskelas anyar.

Pikeun daptar lengkep parobahan, tingali proyék v5.2.0 on GitHub .

v5.1.0

Ditambahkeun dukungan ékspérimén pikeun perenah CSS Grid . - Ieu karya dina kamajuan, sarta teu acan siap pikeun pamakéan produksi, tapi anjeun bisa milih kana fitur anyar via Sass. Pikeun ngaktifkeunana, mareuman grid standar, ku netepkeun $enable-grid-classes: falsesareng aktipkeun CSS Grid ku netepkeun $enable-cssgrid: true.
Navbars diropéa pikeun ngarojong offcanvas. - Tambihkeun laci offcanvas dina navbar naon waé kalayan .navbar-expand-*kelas responsif sareng sababaraha markup offcanvas.
Ditambahkeun komponén pananda tempat anyar . - Komponén pang anyarna kami, cara pikeun nyayogikeun blok samentawis gaganti eusi nyata pikeun ngabantosan nunjukkeun yén aya anu masih dimuat dina situs atanapi aplikasi anjeun.
Plugin Collapse ayeuna ngadukung runtuh horisontal . - Tambihkeun .collapse-horizontalka anjeun .collapsepikeun ngancurkeun widthtinimbang height. Nyingkahan browser repainting ku nyetel min-heightatawa height.
Ditambahkeun tumpukan anyar sareng pembantu aturan nangtung. - Gancang nerapkeun sababaraha sipat flexbox pikeun gancang nyieun perenah custom kalawan tumpukan . Pilih tina tumpukan horizontal ( .hstack) jeung vertikal ( .vstack). Tambihkeun pemisah nangtung anu sami sareng <hr>elemen sareng asisten énggal.vr .
Ditambahkeun :rootvariabel CSS global anyar. - Ditambahkeun sababaraha variabel CSS anyar kana tingkat pikeun gaya :rootngadalikeun . <body>Langkung seueur anu didamel, kalebet dina utilitas sareng komponén urang, tapi pikeun ayeuna baca variabel CSS dina bagian Sesuaikeun .
Utiliti warna sareng latar tukang dirobih pikeun ngagunakeun variabel CSS, sareng nambihan opacity téks énggal sareng utilitas opacity latar . — .text-* sareng .bg-*utilitas ayeuna diwangun ku variabel CSS sareng rgba()nilai warna, ngamungkinkeun anjeun gampang ngaluyukeun utilitas sareng utilitas opacity énggal.
Nambahkeun conto snippet anyar dumasar kana nunjukkeun kumaha ngaropea komponén urang. — Tarik siap-siap nganggo komponén khusus sareng pola desain umum anu sanés nganggo conto Snippét énggal kami . Ngawengku footers , dropdowns , grup daptar , jeung modals .
Dipiceun gaya positioning henteu kapake ti popovers na tooltips sakumaha ieu diatur solely ku Popper. $tooltip-margingeus deprecated tur disetel ka nulldina prosés.

Hoyong inpormasi langkung seueur? Baca pos blog v5.1.0.

Héi anu didinya! Parobihan kana sékrési utama Bootstrap 5, v5.0.0, didokumentasikeun di handap ieu. Éta henteu ngagambarkeun parobahan tambahan anu dipidangkeun di luhur.

Depéndensi

Dileupaskeun jQuery.
Ditingkatkeun tina Popper v1.x ka Popper v2.x.
Ngaganti Libsass ku Dart Sass salaku kompiler Sass kami dibéré Libsass ieu deprecated.
Migrasi ti Jekyll ka Hugo pikeun ngawangun dokuméntasi kami

Rojongan browser

Ngaleungitkeun Internet Explorer 10 sareng 11
Turunkeun Microsoft Edge <16 (Legacy Edge)
Dileupaskeun Firefox <60
Dileupaskeun Safari <12
Ngaleupaskeun iOS Safari <12
Chrome turun <60

parobahan dokuméntasi

Halaman utama anu didesain ulang, perenah dokumén, sareng footer.
Ditambahkeun pituduh Parsél énggal .
Ditambahkeun bagian Sesuaikeun anyar , ngagentos halaman Theming v4 , kalayan detil énggal ngeunaan Sass, pilihan konfigurasi global, skéma warna, variabel CSS, sareng seueur deui.
Reorganisasi sadaya dokuméntasi formulir kana bagian Bentuk anyar , megatkeun eta eusi kana kaca leuwih difokuskeun.
Nya kitu, diropéa bagian Layout , pikeun flesh kaluar eusi grid leuwih jelas.
Ngaganti ngaran "Navs" kaca komponén jadi "Navs & Tab".
Ganti nami halaman "Cék" janten "Cék & radio".
Ngadesain ulang navbar sareng nambihan subnav énggal pikeun ngagampangkeun pikeun ngurilingan situs sareng versi dokumén kami.
Ditambahkeun potong kompas keyboard anyar pikeun widang teangan: Ctrl + /.

Sass

Kami parantos ngaleungitkeun peta Sass standar pikeun ngagampangkeun ngahapus nilai anu kaleuleuwihan. Émut yén anjeun ayeuna kedah netepkeun sadaya nilai dina peta Sass sapertos $theme-colors. Pariksa kumaha cara nungkulan peta Sass .
MeupeuskeunNgaganti color-yiq()fungsi sareng variabel color-contrast()anu aya hubunganana janten henteu aya hubunganana sareng rohangan warna YIQ. Tempo #30168.
- $yiq-contrasted-thresholddiganti ngaranna jadi $min-contrast-ratio.
- $yiq-text-darktur $yiq-text-lightmasing-masing diganti jadi $color-contrast-darkna $color-contrast-light.
MeupeuskeunParameter mixin query média parantos robih pikeun pendekatan anu langkung logis.
- media-breakpoint-down()ngagunakeun breakpoint sorangan tinimbang breakpoint salajengna (contona, media-breakpoint-down(lg)tinimbang media-breakpoint-down(md)target viewports leuwih leutik batan lg).
- Nya kitu, parameter kadua dina media-breakpoint-between()ogé ngagunakeun breakpoint sorangan tinimbang breakpoint salajengna (misalna, media-between(sm, lg)tinimbang media-breakpoint-between(sm, md)target viewports antara smna lg).
MeupeuskeunDipiceun gaya print na $enable-print-stylesvariabel. Kelas tampilan print masih aya. Tempo #28339 .
MeupeuskeunDropped color(), theme-color(), sarta gray()fungsi dina ni'mat variabel. Tempo #29083 .
Meupeuskeuntheme-color-level()Pungsi anu diganti janten color-level()sareng ayeuna nampi warna anu anjeun pikahoyong tibatan ngan ukur $theme-colorwarna. Tempo # 29083 Awas: color-level() ieu engké dina turun di v5.0.0-alpha3.
MeupeuskeunDiganti ngaran $enable-prefers-reduced-motion-media-queryjeung $enable-pointer-cursor-for-buttonska $enable-reduced-motionjeung $enable-button-pointerspikeun singgetan.
MeupeuskeunDipiceun bg-gradient-variant()mixin. Anggo .bg-gradientkelas pikeun nambihan gradién kana elemen tibatan .bg-gradient-*kelas anu dihasilkeun.
Meupeuskeun Dipiceun mixins saméméhna deprecated:
- hover, hover-focus, plain-hover-focus, jeunghover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(ogé turun kelas utiliti pakait, .text-hide)
- visibility()
- form-control-focus()
MeupeuskeunNgaganti ngaran scale-color()fungsi pikeun shift-color()nyegah tabrakan jeung fungsi skala warna Sass sorangan.
box-shadowmixins ayeuna ngidinan nullnilai tur teundeun nonetina sababaraha argumen. Tempo #30394 .
Mixin border-radius()ayeuna gaduh nilai standar.

Sistem warna

Sistem warna anu dianggo sareng color-level()dihapus $theme-color-intervalpikeun milih sistem warna énggal. Sadaya lighten()sareng darken()fungsi dina basis kode urang diganti ku tint-color()sareng shade-color(). Pungsi ieu bakal nyampur warna boh bodas atawa hideung tinimbang ngarobah lightness na ku jumlah tetep. Bakal shift-color()ngawarnaan atanapi ngiuhan warna gumantung kana naha parameter beuratna positip atanapi négatif. Tempo #30622 pikeun leuwih rinci.
Ditambahkeun tints anyar jeung nuansa pikeun unggal warna, nyadiakeun salapan kelir misah pikeun tiap warna dasar, salaku variabel Sass anyar.
Ningkatkeun kontras warna. Rasio kontras warna nabrak tina 3: 1 ka 4.5: 1 sareng diropéa warna biru, héjo, cyan, sareng pink pikeun mastikeun kontras WCAG 2.1 AA. Ogé robah warna kontras warna urang ti $gray-900ka $black.
Pikeun ngadukung sistem warna kami, kami parantos nambihan adat tint-color()sareng shade-color()fungsi anyar pikeun nyampur warna kami kalayan leres.

apdet grid

breakpoint anyar! Ditambahkeun xxlbreakpoint anyar pikeun 1400pxjeung up. Taya parobahan ka sadaya breakpoints séjén.
Ngaronjat talang. Talang ayeuna disetél dina rém, sareng langkung heureut tibatan v4 ( 1.5rem, atanapi sakitar 24px, turun tina 30px). Ieu aligns talang sistem grid urang jeung utilitas spasi urang.
- Ditambahkeun kelas talang anyar ( .g-*,, .gx-*jeung .gy-*) pikeun ngadalikeun talang horizontal/vertikal, talang horizontal, jeung talang vertikal.
- MeupeuskeunDiganti ngaran .no-gutterspikeun .g-0cocog utilitas talang anyar.
Kolom henteu deui position: relativedilarapkeun, janten anjeun kedah nambihan .position-relativesababaraha elemen pikeun mulangkeun kabiasaan éta.
MeupeuskeunTurun sababaraha .order-*kelas anu sering henteu dianggo. Urang ayeuna ngan nyadiakeun .order-1keur .order-5out of the box.
MeupeuskeunTurunkeun .mediakomponén sabab tiasa gampang ditiru sareng utilitas. Tingali #28265 sareng halaman utiliti fleksibel pikeun conto .
Meupeuskeun bootstrap-grid.cssayeuna ngan manglaku box-sizing: border-boxka kolom tinimbang ngareset global box-sizing. Ku cara ieu, gaya grid urang tiasa dianggo di langkung seueur tempat tanpa gangguan.
$enable-grid-classeseuweuh disables generasi kelas wadahna deui. Tempo #29146.
Ngamutahirkeun mixin make-colka standar kana kolom anu sami tanpa ukuran anu ditangtukeun.

Eusi, Reboot, jsb

RFS ayeuna diaktipkeun sacara standar. Judul anu nganggofont-size()mixin bakal otomatis nyaluyukeunfont-sizekana skala sareng viewport. Fitur ieu sateuacana milih sareng v4.
MeupeuskeunNgarobih tipografi tampilan kami pikeun ngagentos $display-*variabel kami sareng $display-font-sizespeta Sass. Ogé dipiceun $display-*-weightvariabel individu pikeun s tunggal $display-font-weightjeung disaluyukeun font-size.
Ditambahkeun dua .display-*ukuran judul anyar, .display-5jeung .display-6.
Tumbu digariskeun sacara standar (henteu ngan ukur dina hover), kecuali aranjeunna bagian tina komponén khusus.
Tabel anu didesain ulang pikeun nyegerkeun gaya sareng ngawangun deui nganggo variabel CSS pikeun langkung seueur kontrol dina gaya.
Meupeuskeuntabél Nested teu inherit gaya deui.
Meupeuskeun .thead-lightsarta .thead-darkturun di ni'mat kelas varian nu .table-*bisa dipaké pikeun sakabéh elemen tabel ( thead,,,,, jeung ) .tbodytfoottrthtd
MeupeuskeunMixin table-row-variant()diganti ngaranna table-variant()jeung narima ukur 2 parameter: $color(ngaran warna) jeung $value(kode warna). Warna wates jeung warna aksen otomatis diitung dumasar kana variabel faktor tabel.
Méja pamisah sél padding variabel kana -yna -x.
MeupeuskeunKelas turun .pre-scrollable. Tempo #29135
Meupeuskeun .text-*Utiliti henteu nambihan kaayaan hover sareng fokus kana tautan deui. .link-*kelas nulungan bisa dipaké gantina. Tempo #29267
MeupeuskeunKelas turun .text-justify. Tempo #29793
Meupeuskeun ~~<hr>elemen ayeuna make heighttinimbang borderkana hadé ngarojong sizeatribut. Ieu ogé ngamungkinkeun pamakéan utilitas padding pikeun nyieun dividers kandel (misalna, <hr class="py-1">).~~
Reset standar horisontal padding-lefton <ul>na <ol>elemen ti browser standar 40pxka 2rem.
Ditambahkeun $enable-smooth-scroll, nu lumaku scroll-behavior: smoothsacara global-iwal pamaké nanya pikeun ngurangan gerak ngaliwatan prefers-reduced-motionpamundut média. Tempo #31877

RTL

Variabel spésifik arah horisontal, utilitas, sareng mixin sadayana parantos diganti namina nganggo sipat logis sapertos anu aya dina perenah flexbox-contona, startsareng endgaganti leftsareng right.

Bentuk

Ditambahkeun bentuk ngambang anyar! Kami parantos ngamajukeun conto labél Ngambang kana komponén formulir anu dirojong sapinuhna. Tempo kaca labél Ngambang anyar.
Meupeuskeun Ngahijikeun unsur bentuk asli sareng adat. Kotak centang, radio, pilihan, sareng input sanésna anu ngagaduhan kelas asli sareng khusus dina v4 parantos dihijikeun. Ayeuna ampir kabéh elemen formulir urang sagemblengna custom, paling tanpa merlukeun HTML custom.
- .custom-control.custom-checkboxayeuna .form-check.
- .custom-control.custom-custom-radioayeuna .form-check.
- .custom-control.custom-switchayeuna .form-check.form-switch.
- .custom-selectayeuna .form-select.
- .custom-filesarta .form-filegeus diganti ku gaya custom on luhureun .form-control.
- .custom-rangeayeuna .form-range.
- Diturunkeun asli .form-control-filena .form-control-range.
MeupeuskeunDiturunkeun .input-group-appendjeung .input-group-prepend. Anjeun ayeuna tiasa nambihan tombol sareng .input-group-textsalaku murangkalih langsung tina grup input.
Radius wates Leungit anu parantos lami dina grup input sareng bug eupan balik validasi tungtungna dibenerkeun ku nambihan kelas tambahan .has-validationkana grup input kalayan validasi.
Meupeuskeun Turunkeun kelas perenah khusus bentuk pikeun sistem grid kami. Anggo grid sareng utilitas kami tibatan .form-group, .form-row, atanapi .form-inline.
MeupeuskeunFormulir labél ayeuna merlukeun .form-label.
Meupeuskeun .form-texteuweuh set display, ngidinan Anjeun pikeun nyieun inline atawa blok pitulung téks sakumaha dipikahoyongna ngan ku ngarobah unsur HTML.
Kadali formulir henteu deui dianggo tetep heightupami mungkin, tapi ditunda min-heightpikeun ningkatkeun kustomisasi sareng kasaluyuan sareng komponén anu sanés.
Ikon validasi henteu deui dilarapkeun ka <select>s kalawan multiple.
Disusun deui file Sass sumber dina scss/forms/, kaasup gaya grup input.

Komponén

Nilai paddingngahiji pikeun panggeuing, breadcrumbs, kartu, dropdowns, grup daptar, modals, popovers, sarta tooltips dumasar kana $spacervariabel urang. Tempo #30564 .

Akordion

Ditambahkeun komponén akordion anyar .

Siaga

Tanda ayeuna gaduh conto sareng ikon .
Dipiceun gaya custom pikeun <hr>s dina unggal ngageter saprak maranéhna geus ngagunakeun currentColor.

Lencana

MeupeuskeunTurunkeun sadaya .badge-*kelas warna pikeun utilitas latar (contona, dianggo .bg-primarytibatan .badge-primary).
MeupeuskeunDiturunkeun .badge-pill— nganggo .rounded-pillutilitas tibatan.
MeupeuskeunDipiceun hover jeung gaya fokus pikeun <a>jeung <button>elemen.
Ngaronjat padding standar pikeun badges ti .25em/ .5emka .35em/ .65em.

Breadcrumbs

Nyederhanakeun tampilan standar tina breadcrumbs ku nyoplokkeun padding, background-color, jeung border-radius.
Nambahkeun sipat khusus CSS anyar --bs-breadcrumb-dividerpikeun kustomisasi gampang tanpa kedah recompile CSS.

Kancing

Meupeuskeun Toggle tombol , kalawan kotak centang atawa radio, euweuh merlukeun JavaScript sarta boga markup anyar. Urang euweuh merlukeun unsur wrapping, tambahkeun.btn-checkka<input>, sarta masangkeun eta kalawan sagala.btnkelas on<label>. Tempo #30650 . Dokumén pikeun ieu parantos ngalih tina halaman Kancing kami ka bagian Bentuk anyar.
Meupeuskeun Diturunkeun .btn-blockpikeun utilitas. Gantina ngagunakeun .btn-blockdina .btn, mungkus tombol Anjeun .d-gridsareng .gap-*utilitas pikeun spasi aranjeunna sakumaha diperlukeun. Pindah ka kelas responsif pikeun kontrol malah leuwih aranjeunna. Baca docs pikeun sababaraha conto.
Diropéa kami button-variant()sareng button-outline-variant()mixins pikeun ngadukung parameter tambahan.
Tombol anu diropéa pikeun mastikeun kontras anu ningkat dina kaayaan hover sareng aktip.
Tombol ditumpurkeun ayeuna gaduh pointer-events: none;.

Kartu

MeupeuskeunTurun .card-deckdina kahadean grid kami. Bungkus kartu anjeun dina kelas kolom jeung tambahkeun .row-cols-*wadahna indungna pikeun nyieun deui dek kartu (tapi kalawan kontrol leuwih alignment responsif).
MeupeuskeunTurun .card-columnsdina kahadean Masonry. Tempo #28922 .
MeupeuskeunNgaganti .cardakordion dumasar kana komponén Akordion anyar .

Carousel

Nambahkeun .carousel-darkvarian anyar pikeun téks poék, kontrol, sareng indikator (saé kanggo latar anu langkung hampang).
Ngaganti ikon chevron pikeun kadali carousel kalawan SVGs anyar tina Bootstrap Ikon .

Tombol tutup

MeupeuskeunDiganti ngaran .closejadi .btn-closekeur ngaran kirang generik.
Tutup tombol ayeuna make a background-image(embedded SVG) tinimbang a ×dina HTML, sahingga pikeun kustomisasi gampang tanpa kudu noél markup Anjeun.
Nambahkeun .btn-close-whitevarian anyar anu dianggo filter: invert(1)pikeun ngaktifkeun kontras anu langkung luhur pikeun ngaleungitkeun ikon ngalawan latar anu langkung poék.

Rubuh

Dipiceun ngagugulung anchoring pikeun akordion.

Dropdowns

Nambahkeun .dropdown-menu-darkvarian anyar sareng variabel anu aya hubunganana pikeun dropdown poék dina paménta.
Ditambahkeun variabel anyar pikeun $dropdown-padding-x.
Poékkeun pamisah lungsur pikeun ningkatkeun kontras.
MeupeuskeunSadaya kajadian pikeun dropdown ayeuna dipicu dina tombol toggle dropdown lajeng bubbled nepi ka elemen indungna.
Menu dropdown ayeuna gaduh data-bs-popper="static"set atribut nalika posisi dropdown statik, atanapi dropdown aya dina navbar. Ieu ditambahkeun ku JavaScript urang tur mantuan kami ngagunakeun gaya posisi custom tanpa interfering jeung posisi Popper urang.
MeupeuskeunPilihan turun flippikeun plugin dropdown pikeun konfigurasi Popper asli. Anjeun ayeuna tiasa nganonaktipkeun paripolah flipping ku ngalangkungan array kosong pikeun fallbackPlacementspilihan dina modifier flip .
Menu dropdown ayeuna tiasa diklik sareng autoClosepilihan énggal pikeun nanganan paripolah nutup otomatis . Anjeun tiasa nganggo pilihan ieu pikeun nampi klik di jero atanapi di luar menu dropdown pikeun ngajantenkeun interaktif.
Dropdowns ayeuna ngarojong .dropdown-items dibungkus dina <li>s.

Jumbotron

MeupeuskeunDropped komponén jumbotron sakumaha eta bisa replicated kalawan Utiliti. Tempo conto Jumbotron anyar kami pikeun demo.

Daptar grup

Ditambahkeun .list-group-numberedmodifier anyar pikeun daptar grup.

Navs jeung tab

Ditambahkeun nullvariabel anyar pikeun font-size, font-weight, color, jeung :hover colorka .nav-linkkelas.

Navbars

MeupeuskeunNavbars ayeuna merlukeun wadahna dina (pikeun nyederhanakeun drastis syarat spasi na CSS diperlukeun).
Meupeuskeunkelas nu .activebisa euweuh dilarapkeun ka .nav-items, eta kudu dilarapkeun langsung dina .nav-links.

Offcanvas

Nambahkeun komponén offcanvas anyar .

Pagination

Tumbu pagination kiwari geus customizable margin-leftnu dinamis rounded on sakabeh juru lamun dipisahkeun tina hiji lianna.
Ditambahkeun transitions kana tumbu pagination.

Popovers

MeupeuskeunDiganti ngaran .arrowjadi .popover-arrowdina template popover standar urang.
Ngaganti ngaran whiteListpilihan jadi allowList.

Spinners

Spinners ayeuna ngahargaan prefers-reduced-motion: reduceku ngalambatkeun animasi. Tempo #31882 .
Ningkatkeun alignment nangtung spinner.

Roti bakar

Roti bakar ayeuna tiasa diposisikan dina .toast-containerkalayan bantosan utilitas posisi .
Robah durasi roti bakar standar jadi 5 detik.
Dipiceun overflow: hiddenroti bakar jeung diganti ku border-radiuss ditangtoskeun jeung calc()fungsi.

Tooltips

MeupeuskeunDiganti ngaran .arrowjadi .tooltip-arrowdina template tooltip standar urang.
MeupeuskeunNilai standar pikeun fallbackPlacementsdirobah jadi ['top', 'right', 'bottom', 'left']pikeun panempatan hadé tina elemen popper.
MeupeuskeunNgaganti ngaran whiteListpilihan jadi allowList.

Utiliti

MeupeuskeunNgaganti ngaran sababaraha utilitas pikeun ngagunakeun ngaran sipat logis tinimbang ngaran arah kalawan tambahan rojongan RTL:
- Diganti ngaran .left-*jeung .right-*ka .start-*jeung .end-*.
- Diganti ngaran .float-leftjeung .float-rightka .float-startjeung .float-end.
- Diganti ngaran .border-leftjeung .border-rightka .border-startjeung .border-end.
- Diganti ngaran .rounded-leftjeung .rounded-rightka .rounded-startjeung .rounded-end.
- Diganti ngaran .ml-*jeung .mr-*ka .ms-*jeung .me-*.
- Diganti ngaran .pl-*jeung .pr-*ka .ps-*jeung .pe-*.
- Diganti ngaran .text-leftjeung .text-rightka .text-startjeung .text-end.
MeupeuskeunMargin négatip ditumpurkeun sacara standar.
Ditambahkeun .bg-bodykelas anyar pikeun gancang nyetel <body>'s tukang ka elemen tambahan.
Ditambahkeun Utiliti posisi anyar pikeun top, right, bottom, jeung left. Nilai ngawengku 0, 50%, sarta 100%pikeun tiap sipat.
Ditambahkeun anyar .translate-middle-x& .translate-middle-yUtiliti pikeun horisontal atanapi vertikal puseur mutlak / tetep elemen diposisikan.
Ditambahkeun border-widthutiliti anyar .
MeupeuskeunDiganti ngaran .text-monospacejadi .font-monospace.
MeupeuskeunDihapus .text-hidesabab éta metode kuno pikeun nyumputkeun téks anu henteu kedah dianggo deui.
Utiliti ditambahkeun .fs-*pikeun font-sizeUtiliti (kalawan RFS diaktipkeun). Ieu nganggo skala anu sami sareng judul standar HTML (1-6, ageung dugi ka alit), sareng tiasa dirobih ngalangkungan peta Sass.
MeupeuskeunDiganti ngaran .font-weight-*utiliti sakumaha .fw-*brevity jeung konsistensi.
MeupeuskeunDiganti ngaran .font-style-*utiliti sakumaha .fst-*brevity jeung konsistensi.
Ditambahkeun .d-gridpikeun tampilan Utiliti sarta gapUtiliti anyar ( .gap) pikeun CSS Grid na flexbox layouts.
MeupeuskeunDipiceun .rounded-smna rounded-lg, sarta diwanohkeun skala anyar kelas, .rounded-0ka .rounded-3. Tempo #31687 .
Ditambahkeun line-heightutiliti anyar: .lh-1, .lh-sm, .lh-basejeung .lh-lg. Tingali di dieu .
Mindahkeun .d-noneutilitas dina CSS kami pikeun masihan langkung beurat tibatan utilitas tampilan anu sanés.
Ngalegaan .visually-hidden-focusablehelper pikeun ogé dianggo dina wadahna, ngagunakeun :focus-within.

Pembantu

Meupeuskeun Helpers embed responsif geus diganti jadi helpers rasio kalawan ngaran kelas anyar jeung kabiasaan ningkat, kitu ogé variabel CSS mantuan.
- Kelas geus diganti ngaranna jadi robah byjadi xdina rasio aspék. Contona, .ratio-16by9ayeuna .ratio-16x9.
- Kami parantos ngaleungitkeun .embed-responsive-itempamilih grup unsur sareng pamilih anu langkung saderhana .ratio > *. Teu aya deui kelas anu diperyogikeun, sareng pembantu rasio ayeuna tiasa dianggo sareng unsur HTML.
- Peta $embed-responsive-aspect-ratiosSass geus diganti jadi $aspect-ratiossarta nilai na geus disederhanakeun ngawengku ngaran kelas jeung persentase salaku key: valuepasangan.
- variabel CSS ayeuna dihasilkeun sarta kaasup pikeun tiap nilai dina peta Sass. Robah --bs-aspect-ratiovariabel dina .ratiopikeun nyieun sagala rasio aspék custom .
Meupeuskeun Kelas "maca layar" ayeuna kelas "disumputkeun sacara visual" .
- Ngarobah file Sass ti scss/helpers/_screenreaders.scsskascss/helpers/_visually-hidden.scss
- Diganti ngaran .sr-onlyjeung .sr-only-focusableka .visually-hiddenjeung.visually-hidden-focusable
- Diganti ngaran sr-only()na sr-only-focusable()mixins ka visually-hidden()na visually-hidden-focusable().
bootstrap-utilities.cssayeuna oge kaasup pembantu urang. Pembantu henteu kedah diimpor dina ngawangun khusus deui.

JavaScript

Turunkeun kagumantungan jQuery sareng rewrote plugins janten dina JavaScript biasa.
MeupeuskeunAtribut data pikeun sakabéh plugins JavaScript ayeuna namespaced pikeun mantuan ngabedakeun fungsionalitas Bootstrap ti pihak katilu jeung kode anjeun sorangan. Contona, urang nganggo data-bs-toggletinimbang data-toggle.
Sadaya plugins ayeuna tiasa nampi pamilih CSS salaku argumen anu munggaran. Anjeun tiasa ngalangkungan unsur DOM atanapi pamilih CSS anu sah pikeun nyiptakeun conto plugin énggal:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigbisa diliwatan salaku fungsi nu narima Bootstrap urang standar Popper config salaku argumen, ku kituna anjeun bisa ngagabungkeun konfigurasi standar ieu di jalan Anjeun. Manglaku ka dropdowns, popovers, sarta tooltips.
Nilai standar pikeun fallbackPlacementsdirobah jadi ['top', 'right', 'bottom', 'left']pikeun panempatan hadé tina elemen Popper. Manglaku ka dropdowns, popovers, sarta tooltips.
Dihapus underscore tina métode statik umum kawas _getInstance()→ getInstance().