Migrasi menyang v5

Lacak lan deleng owah-owahan menyang file sumber Bootstrap, dokumentasi, lan komponen kanggo mbantu sampeyan pindhah saka v4 menyang v5.

Ing kaca iki

v5.2.0

Desain sing dianyari

Bootstrap v5.2.0 fitur nganyari desain subtle kanggo sawetara komponen lan sifat ing project, utamané liwat border-radiusnilai olahan ing tombol lan kontrol wangun . Dokumentasi kita uga wis dianyari karo homepage anyar, tata letak dokumen sing luwih prasaja sing ora ngrusak bagean sidebar, lan conto Ikon Bootstrap sing luwih penting .

Variabel CSS liyane

Kita wis nganyari kabeh komponen kanggo nggunakake variabel CSS. Nalika Sass isih ndhukung kabeh, saben komponèn wis dianyari kanggo nyakup variabel CSS ing kelas basis komponen (contone, .btn), ngidini kanggo kustomisasi luwih nyata saka Bootstrap. Ing rilis sabanjure, kita bakal terus nggedhekake panggunaan variabel CSS menyang tata letak, formulir, pembantu, lan utilitas. Waca liyane babagan variabel CSS ing saben komponen ing kaca dokumentasi dhewe-dhewe.

Panggunaan variabel CSS kita bakal rada ora lengkap nganti Bootstrap 6. Nalika kita seneng ngleksanakake iki ing kabeh papan, mula ana risiko nyebabake owah-owahan. Contone, setelan $alert-border-width: var(--bs-border-width)ing kode sumber kita ngilangi potensial Sass ing kode sampeyan dhewe yen sampeyan nindakake $alert-border-width * 2kanthi alesan.

Dadi, ing ngendi wae, kita bakal terus maju menyang luwih akeh variabel CSS, nanging ngerti manawa implementasine bisa uga diwatesi ing v5.

Anyar`_maps.scss`

Bootstrap v5.2.0 ngenalake file Sass anyar kanthi _maps.scss. Iki narik sawetara peta Sass _variables.scsskanggo ndandani masalah nalika nganyari peta asli ora ditrapake ing peta sekunder sing ngluwihi. Contone, nganyari $theme-colorsora ditrapake ing peta tema liyane sing ngandelake $theme-colors, ngrusak alur kerja kustomisasi kunci. Ing cendhak, Sass duwe watesan nalika variabel standar utawa peta wis digunakake , ora bisa dianyari. Ana kekurangan sing padha karo variabel CSS nalika digunakake kanggo nyipta variabel CSS liyane.

Mulane kustomisasi variabel ing Bootstrap kudu ditindakake sawise @import "functions", nanging sadurunge @import "variables"lan tumpukan impor liyane. Sing padha ditrapake kanggo peta Sass-sampeyan kudu ngilangi standar sadurunge digunakake. Peta ing ngisor iki wis dipindhah menyang anyar _maps.scss:

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

Nggawe Bootstrap CSS khusus sampeyan saiki kudu katon kaya iki kanthi impor peta sing kapisah.

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

font-weightUtilitas sing ditambahi kanggo kalebu .fw-semiboldkanggo font semibold.
border-radiuskeperluan ditambahi kanggo kalebu loro ukuran anyar, .rounded-4lan .rounded-5, kanggo opsi liyane.

owah-owahan tambahan

Ngenalke $enable-container-classesopsi anyar. — Saiki nalika milih menyang tata letak Grid CSS eksperimen, .container-*kelas isih bakal dikompilasi, kajaba pilihan iki disetel kanggo false. Wadhah uga saiki tetep nilai talang.
Komponen Offcanvas saiki duwe variasi responsif . Kelas asli .offcanvastetep ora diganti - ndhelikake konten ing kabeh viewport. Kanggo nggawe responsif, ganti .offcanvaskelas kasebut menyang .offcanvas-{sm|md|lg|xl|xxl}kelas apa wae.
Pembagi meja sing luwih kandel saiki dipilih. - Kita wis dibusak kenthel lan luwih angel override tapel wates antarane kelompok Tabel lan dipindhah menyang kelas pilihan sampeyan bisa aplikasi .table-group-divider,. Deleng docs tabel kanggo conto.
Scrollspy wis ditulis maneh kanggo nggunakake Intersection Observer API , kang tegese sampeyan ora perlu maneh wrappers tiyang sepah relatif, deprecatesoffsetconfig, lan liyane. Mangga madosi implementasine Scrollspy luwih akurat lan konsisten ing nav murup.
Popovers lan tooltips saiki nggunakake variabel CSS. Sawetara variabel CSS wis dianyari saka mitra Sass kanggo nyuda jumlah variabel. Akibaté, telung variabel wis ora digunakake ing release iki: $popover-arrow-color, $popover-arrow-outer-color, lan $tooltip-arrow-color.
.text-bg-{color}Nambah pembantu anyar . Tinimbang nyetel individu .text-*lan .bg-*keperluan, sampeyan saiki bisa nggunakake helpers kanggo nyetel karo latar ngarep.text-bg-*background-color kontras color.
.form-check-reverseModifier ditambahake kanggo ngowahi urutan label lan kothak centhang / radio sing gegandhengan.
Ditambahake kolom belang ndhukung kanggo tabel liwat .table-striped-columnskelas anyar.

Kanggo dhaptar lengkap owah-owahan, ndeleng proyek v5.2.0 ing GitHub .

v5.1.0

Ditambahake dhukungan eksperimen kanggo tata letak Grid CSS . - Iki karya ing proses, lan durung siap kanggo produksi nggunakake, nanging sampeyan bisa milih menyang fitur anyar liwat Sass. Kanggo ngaktifake, mateni kothak gawan, kanthi nyetel $enable-grid-classes: falselan aktifake Grid CSS kanthi nyetel $enable-cssgrid: true.
Navbar sing dianyari kanggo ndhukung offcanvas. - Tambah laci offcanvas ing sembarang navbar karo .navbar-expand-*kelas responsif lan sawetara markup offcanvas.
Nambahake komponen placeholder anyar . - Komponen paling anyar, cara kanggo nyedhiyakake pamblokiran sementara minangka ganti konten nyata kanggo mbantu nuduhake manawa ana sing isih dimuat ing situs utawa aplikasi sampeyan.
Plugin Collapse saiki ndhukung ambruk horisontal . - Tambah .collapse-horizontalmenyang .collapseambruk widthtinimbang height. Supaya browser repainting kanthi nyetel min-heightutawa height.
Nambahake tumpukan anyar lan pembantu aturan vertikal. - Aplikasi kanthi cepet macem-macem properti flexbox kanggo nggawe tata letak khusus kanthi tumpukan . Pilih saka tumpukan horisontal ( .hstack) lan vertikal ( ). .vstackTambah pemisah vertikal sing padha karo <hr>unsur karo pembantu anyar.vr .
:rootNambahake variabel CSS global anyar . - Nambahake sawetara variabel CSS anyar menyang :rootlevel kanggo ngontrol <body>gaya. Luwih akeh sing ditindakake, kalebu ing utilitas lan komponen, nanging saiki maca variabel CSS ing bagean Kustomisasi .
Utilitas warna lan latar mburi sing dirombak kanggo nggunakake variabel CSS, lan nambahake opacity teks anyar lan utilitas opacity latar mburi . — .text-* lan .bg-*utilitas saiki dibangun nganggo variabel CSS lan rgba()nilai warna, supaya sampeyan bisa ngatur kanthi gampang sarana apa wae nganggo utilitas opacity anyar.
Nambahake conto potongan anyar adhedhasar kanggo nuduhake carane ngatur komponen kita. — Tarik siap nggunakake komponen khusus lan pola desain umum liyane nganggo conto Cuplikan anyar . Kalebu footers , dropdowns , dhaftar grup , lan modals .
Mbusak gaya posisi sing ora digunakake saka popovers lan tooltips amarga iki mung ditangani dening Popper. $tooltip-marginwis deprecated lan disetel kanggo nulling proses.

Pengin informasi luwih lengkap? Waca kirim blog v5.1.0.

He kowe! Owah-owahan ing release utama pisanan Bootstrap 5, v5.0.0, didokumentasikan ing ngisor iki. Dheweke ora nggambarake owah-owahan tambahan sing dituduhake ing ndhuwur.

Ketergantungan

JQuery wis ilang.
Nganyarke saka Popper v1.x kanggo Popper v2.x.
Ngganti Libsass karo Dart Sass minangka kompiler Sass sing diwenehake Libsass ora digunakake.
Migrasi saka Jekyll menyang Hugo kanggo mbangun dokumentasi kita

Dhukungan browser

Internet Explorer 10 lan 11 wis ilang
Ninggalake Microsoft Edge <16 (Legacy Edge)
Firefox mudhun <60
Safari dropped < 12
iOS Safari ilang <12
Chrome mudhun <60

Dokumentasi owah-owahan

Homepage sing didesain ulang, tata letak docs, lan footer.
Nambahake pandhuan Parcel anyar .
Nambahake bagean Kustomisasi anyar , ngganti kaca Tema v4 , kanthi rincian anyar babagan Sass, opsi konfigurasi global, skema warna, variabel CSS, lan liya-liyane.
Ngatur maneh kabeh dokumentasi formulir dadi bagean Formulir anyar , misahake isi kasebut dadi kaca sing luwih fokus.
Kajaba iku, nganyari bagean Layout , supaya isi kothak luwih cetha.
Ganti jeneng kaca komponen "Navs" dadi "Navs & Tabs".
Ganti jeneng kaca "Mriksa" dadi "Mriksa & radio".
Ngrancang maneh navbar lan nambahake subnav anyar kanggo nggampangake njelajah situs lan versi dokumen kita.
Nambahake trabasan keyboard anyar kanggo kolom telusuran: Ctrl + /.

Sass

Kita wis ngilangi gabungan peta Sass standar supaya luwih gampang mbusak nilai sing keluwih. Elinga sampeyan saiki kudu nemtokake kabeh nilai ing peta Sass kaya $theme-colors. Priksa carane menehi hasil karo peta Sass .
PecahGanti jeneng color-yiq()fungsi lan variabel sing ana gandhengane color-contrast()amarga ora ana hubungane karo ruang warna YIQ. Waca #30168.
- $yiq-contrasted-thresholddiganti jeneng dadi $min-contrast-ratio.
- $yiq-text-darklan $yiq-text-lightmungguh diganti jeneng dadi $color-contrast-darklan $color-contrast-light.
PecahParameter mixin query media wis diganti kanggo pendekatan sing luwih logis.
- media-breakpoint-down()nggunakake breakpoint dhewe tinimbang breakpoint sabanjuré (contone, media-breakpoint-down(lg)tinimbang media-breakpoint-down(md)target viewports luwih cilik tinimbang lg).
- Kajaba iku, parameter kapindho ing media-breakpoint-between()uga nggunakake breakpoint dhewe tinimbang breakpoint sabanjuré (contone, media-between(sm, lg)tinimbang media-breakpoint-between(sm, md)target viewports antarane smlan lg).
PecahDibusak gaya print lan $enable-print-stylesvariabel. Kelas tampilan print isih ana. Waca #28339 .
PecahDropped color(), theme-color(), lan gray()fungsi kanggo variabel. Waca #29083 .
PecahFungsi sing diganti theme-color-level()dadi color-level()lan saiki nampa warna apa wae sing dikarepake tinimbang mung $theme-colorwarna. Waca # 29083 Watch out: color-level() iki mengko ing dropped ing v5.0.0-alpha3.
PecahGanti jeneng $enable-prefers-reduced-motion-media-querylan $enable-pointer-cursor-for-buttonskanggo $enable-reduced-motionlan $enable-button-pointerskanggo brevity.
PecahDibusak bg-gradient-variant()mixin. Gunakake .bg-gradientkelas kanggo nambah gradients kanggo unsur tinimbang .bg-gradient-*kelas kui.
Pecah Mbusak campuran sing wis ora digunakake sadurunge:
- hover, hover-focus, plain-hover-focus, lanhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(uga ngeculake kelas utilitas sing gegandhengan, .text-hide)
- visibility()
- form-control-focus()
PecahGanti jeneng scale-color()fungsi kanggo shift-color()supaya tabrakan karo Sass fungsi werna njongko dhewe.
box-shadowmixins saiki ngidini nullnilai lan nyelehake nonesaka macem-macem argumen. Waca #30394 .
Mixin border-radius()saiki duwe nilai standar.

Sistem warna

Sistem warna sing bisa digunakake color-level()lan $theme-color-intervaldicopot kanggo milih sistem warna anyar. Kabeh lighten()lan darken()fungsi ing basis kode kita diganti dening tint-color()lan shade-color(). Fungsi kasebut bakal nyampur warna karo putih utawa ireng tinimbang ngganti cahya kanthi jumlah sing tetep. Werna shift-color()warna utawa warna gumantung saka parameter bobote positif utawa negatif. Waca #30622 kanggo rincian liyane.
Nambahake tints anyar lan mbandingake kanggo saben werna, nyediakake sangang werna kapisah kanggo saben werna basa, minangka variabel Sass anyar.
Kontras warna sing luwih apik. Rasio kontras warna bumped saka 3:1 nganti 4.5:1 lan warna biru, ijo, cyan, lan jambon dianyari kanggo njamin kontras WCAG 2.1 AA. Uga ngganti warna kontras warna saka $gray-900dadi $black.
Kanggo ndhukung sistem warna, kita wis nambah adat tint-color()lan shade-color()fungsi anyar kanggo nyampur warna kanthi tepat.

nganyari Grid

Breakpoint anyar! Added xxlbreakpoint anyar kanggo 1400pxlan munggah. Ora ana owah-owahan ing kabeh breakpoints liyane.
Apik talang. Gutters saiki disetel ing rem, lan luwih sempit tinimbang v4 ( 1.5rem, utawa kira-kira 24px, mudhun saka 30px). Iki nyelarasake talang sistem grid kita karo utilitas jarak.
- Nambahake kelas talang anyar ( .g-*, .gx-*, lan .gy-*) kanggo ngontrol talang horisontal/vertikal, talang horisontal, lan talang vertikal.
- PecahDiganti jeneng .no-guttersdadi .g-0cocog karo keperluan talang anyar.
Kolom wis ora position: relativeditrapake maneh, mula sampeyan kudu nambah .position-relativesawetara unsur kanggo mulihake prilaku kasebut.
PecahNinggalake sawetara .order-*kelas sing asring ora digunakake. Saiki kita mung nyedhiyakake .order-1metu .order-5saka kothak.
PecahDrop .mediakomponen amarga bisa gampang ditiru karo keperluan. Deleng #28265 lan kaca utilitas fleksibel kanggo conto .
Pecah bootstrap-grid.csssaiki mung ditrapake box-sizing: border-boxkanggo kolom tinimbang ngreset ukuran kothak global. Kanthi cara iki, gaya kothak kita bisa digunakake ing papan liyane tanpa gangguan.
$enable-grid-classesora maneh disables generasi kelas wadhah maneh. Waca #29146.
Nganyari make-colmixin dadi standar menyang kolom sing padha tanpa ukuran sing ditemtokake.

Konten, Urip maneh, lsp

RFS saiki diaktifake kanthi gawan. Heading nggunakakefont-size()mixin bakal kanthi otomatis nyetelfont-sizeukurane karo viewport. Fitur iki sadurunge milih karo v4.
PecahNdandani tipografi tampilan kita kanggo ngganti $display-*variabel kita lan nganggo $display-font-sizespeta Sass. $display-*-weightUga dibusak variabel individu kanggo siji $display-font-weightlan diatur font-sizes.
Nambahake rong .display-*ukuran judhul anyar, .display-5lan .display-6.
Link digarisake kanthi standar (ora mung ing hover), kajaba minangka bagean saka komponen tartamtu.
Tabel sing didesain ulang kanggo nyegerake gaya lan mbangun maneh karo variabel CSS kanggo kontrol luwih akeh babagan gaya.
PecahTabel nested ora warisan gaya maneh.
Pecah .thead-lightlan .thead-darkdropped ing sih saka .table-*kelas varian kang bisa digunakake kanggo kabeh unsur Tabel ( thead,,,, lan ) .tbodytfoottrthtd
PecahMixin table-row-variant()diganti jeneng table-variant()lan mung nampa 2 paramèter: $color(jeneng werna) lan $value(kode werna). Werna wates lan werna aksen diwilang kanthi otomatis adhedhasar variabel faktor tabel.
Pisah variabel padding sel tabel menyang -ylan -x.
Pecah.pre-scrollableKelas mudhun . Waca #29135
Pecah .text-*keperluan ora nambah hover lan fokus negara kanggo pranala maneh. .link-*kelas helper bisa digunakake tinimbang. Waca #29267
Pecah.text-justifyKelas mudhun . Waca #29793
Pecah <hr>unsur saiki digunakake heighttinimbang borderkanggo ndhukung sizeatribut. Iki uga ngidini panggunaan utilitas bantalan kanggo nggawe pamisah sing luwih kandel (contone, <hr class="py-1">).
padding-leftReset standar horisontal <ul>lan <ol>unsur saka standar browser 40pxmenyang 2rem.
Ditambahake $enable-smooth-scroll, sing ditrapake scroll-behavior: smoothsacara global-kajaba pangguna sing njaluk gerakan suda liwat prefers-reduced-motionpitakon media. Waca #31877

RTL

Variabel tartamtu, utilitas, lan mixin arah horisontal kabeh wis diganti jeneng kanggo nggunakake sifat logis kaya sing ditemokake ing tata letak flexbox-contone, startlan minangka endpengganti leftlan right.

Formulir

Nambah formulir ngambang anyar! Kita wis promosi conto Floating label kanggo komponen formulir sing didhukung kanthi lengkap. Deleng kaca label Floating anyar.
Pecah Unsur wangun asli lan adat gabungan. Kothak centhang, radio, pilihan, lan input liyane sing duwe kelas asli lan khusus ing v4 wis digabung. Saiki meh kabeh unsur wangun kita kabeh khusus, paling tanpa perlu HTML khusus.
- .custom-control.custom-checkboxsaiki .form-check.
- .custom-control.custom-custom-radiosaiki .form-check.
- .custom-control.custom-switchsaiki .form-check.form-switch.
- .custom-selectsaiki .form-select.
- .custom-filelan .form-filewis diganti dening gaya adat ing ndhuwur .form-control.
- .custom-rangesaiki .form-range.
- Dropped native .form-control-filelan .form-control-range.
PecahDiturunake .input-group-appendlan .input-group-prepend. Sampeyan saiki mung bisa nambah tombol lan .input-group-textminangka anak langsung saka grup input.
Radius wates Missing sing wis suwe ing grup input kanthi bug umpan balik validasi.has-validation pungkasane didandani kanthi nambahake kelas tambahan menyang grup input kanthi validasi.
Pecah Kelas tata letak khusus formulir kanggo sistem kothak kita. Gunakake kothak lan utilitas tinimbang .form-group, .form-row, utawa .form-inline.
PecahLabel formulir saiki mbutuhake .form-label.
Pecah .form-textno longer sets display, ngijini sampeyan nggawe inline utawa mblokir teks bantuan sing dikarepake mung kanthi ngganti unsur HTML.
Kontrol formulir ora digunakake maneh heightyen bisa, nanging nundha min-heightkanggo nambah kustomisasi lan kompatibilitas karo komponen liyane.
Lambang validasi ora ditrapake maneh kanggo <select>s karo multiple.
File Sass sumber sing disusun maneh ing scss/forms/, kalebu gaya grup input.

Komponen

Nilai terpadu paddingkanggo tandha, remah roti, kertu, dropdown, grup dhaptar, modal, popover, lan tooltip adhedhasar $spacervariabel kita. Waca #30564 .

Akordion

Nambahake komponen akordion anyar .

Tandha

Tandha saiki duwe conto karo lambang .
Dibusak gaya adat kanggo <hr>s ing saben tandha wiwit padha wis digunakake currentColor.

Lencana

PecahMudhun kabeh .badge-*kelas werna kanggo keperluan latar mburi (contone, nggunakake .bg-primarytinimbang .badge-primary).
PecahDropped .badge-pill- gunakake .rounded-pillsarana kasebut.
PecahDibusak hover lan fokus gaya kanggo <a>lan <button>unsur.
Tambah bantalan standar kanggo lencana saka .25em/ .5emmenyang .35em/ .65em.

Breadcrumbs

Nyederhanakake tampilan standar saka breadcrumbs kanthi mbusak padding, background-color, lan border-radius.
Nambahake properti khusus CSS anyar --bs-breadcrumb-dividerkanggo kustomisasi sing gampang tanpa perlu nggawe ulang CSS.

Tombol

Pecah Tombol ganti , kanthi kothak centhang utawa radio, ora mbutuhake JavaScript maneh lan duwe markup anyar. Kita ora mbutuhake unsur bungkus maneh, nambah.btn-checkmenyang<input>, lan masangake karo sembarang.btnkelas ing<label>. Waca #30650 . Dokumen kanggo iki wis dipindhah saka kaca Tombol menyang bagean Formulir anyar.
Pecah Dropped .btn-blockkanggo keperluan. Tinimbang nggunakake .btn-blocking .btn, bungkus tombol karo .d-gridlan .gap-*sarana kanggo spasi yen perlu. Ngalih menyang kelas responsif kanggo kontrol sing luwih akeh. Waca docs kanggo sawetara conto.
Dianyari kita button-variant()lan button-outline-variant()mixins kanggo ndhukung paramèter tambahan.
Tombol sing dianyari kanggo mesthekake tambah kontras ing hover lan status aktif.
Tombol dipatèni saiki wis pointer-events: none;.

kertu

PecahDropped .card-decking sih kita grid. Bungkus kertu ing kelas kolom lan tambahake .row-cols-*wadhah induk kanggo nggawe geladhak kertu (nanging kanthi kontrol luwih responsif).
PecahDropped .card-columnsing sih saka Masonry. Waca #28922 .
PecahNgganti .cardakordeon adhedhasar karo komponen Accordion anyar .

Carousel

.carousel-darkNambahake varian anyar kanggo teks, kontrol, lan indikator sing peteng (apik kanggo latar mburi sing luwih entheng).
Ngganti lambang chevron kanggo kontrol carousel karo SVG anyar saka Bootstrap Ikon .

Tombol tutup

PecahDiganti jeneng .closedadi .btn-closejeneng sing kurang umum.
Tombol tutup saiki nggunakake background-image(SVG sing ditempelake) tinimbang ×ing HTML, ngidini kustomisasi luwih gampang tanpa kudu ndemek markup sampeyan.
.btn-close-whiteNambahake varian anyar sing digunakake filter: invert(1)kanggo ngaktifake kontras sing luwih dhuwur kanggo ngilangi lambang ing latar mburi sing luwih peteng.

ambruk

Dibusak gulung anchoring kanggo akordion.

Dropdowns

Nambahake varian anyar .dropdown-menu-darklan variabel sing ana gandhengane kanggo dropdown peteng sing dikarepake.
Nambahake variabel anyar kanggo $dropdown-padding-x.
Peteng divider gulung mudhun kanggo kontras apik.
PecahKabeh acara kanggo gulung mudhun saiki dipicu ing tombol pilihan gulung mudhun banjur gelembung menyang unsur induk.
Menu dropdown saiki duwe data-bs-popper="static"atribut sing disetel nalika posisi dropdown statis, utawa dropdown ana ing navbar. Iki ditambahake dening JavaScript kita lan mbantu kita nggunakake gaya posisi khusus tanpa ngganggu posisi Popper.
PecahOpsi dropped flipkanggo plugin gulung mudhun kanggo konfigurasi Popper asli. Sampeyan saiki bisa mateni prilaku flipping kanthi ngliwati array kosong kanggo fallbackPlacementsopsi ing modifier flip .
Menu dropdown saiki bisa diklik kanthi autoClosepilihan anyar kanggo nangani prilaku nutup otomatis . Sampeyan bisa nggunakake pilihan iki kanggo nampa klik ing njero utawa njaba menu gulung mudhun supaya interaktif.
Dropdowns saiki ndhukung .dropdown-items kebungkus ing <li>s.

Jumbotron

PecahDropped komponen jumbotron amarga bisa ditiru karo keperluan. Deleng conto Jumbotron anyar kanggo demo.

Dhaptar klompok

.list-group-numberedNambahake modifier anyar kanggo dhaptar grup.

Navs lan tab

nullNambahake variabel anyar kanggo font-size, font-weight, color, lan :hover colormenyang .nav-linkkelas.

Navbars

PecahNavbars saiki mbutuhake wadhah ing (kanggo drastis nyederhanakake syarat spasi lan CSS dibutuhake).
PecahKelas .activeora bisa ditrapake maneh .nav-iteming s, kudu ditrapake langsung ing .nav-links.

Offcanvas

Nambahake komponen offcanvas anyar .

Pagination

Tautan pagination saiki wis bisa disesuaikan margin-leftsing dibunderake kanthi dinamis ing kabeh pojok nalika dipisahake saka siji liyane.
Ditambahake transitions kanggo pranala pagination.

Popovers

PecahGanti jeneng .arrowdadi .popover-arrowing template popover standar kita.
whiteListOpsi ganti jeneng dadi allowList.

Spinner

Spinners saiki ngurmati prefers-reduced-motion: reducekanthi alon-alon animasi. Waca #31882 .
Peningkatan vertikal spinner.

Toasts

Toasts saiki bisa dipanggonke ing a .toast-containerkanthi bantuan utilitas posisi .
Durasi roti panggang standar diganti dadi 5 detik.
Dibusak overflow: hiddensaka toasts lan diganti karo border-radiuss tepat karo calc()fungsi.

Tooltips

PecahGanti jeneng .arrowdadi .tooltip-arrowing cithakan tooltip standar kita.
PecahNilai standar kanggo fallbackPlacementsdiganti dadi kanggo panggonan sing ['top', 'right', 'bottom', 'left']luwih apik saka unsur popper.
PecahwhiteListOpsi ganti jeneng dadi allowList.

Utilitas

PecahGanti jeneng sawetara keperluan kanggo nggunakake jeneng properti logis tinimbang jeneng arah kanthi tambahan dhukungan RTL:
- Ganti jeneng .left-*lan .right-*kanggo .start-*lan .end-*.
- Ganti jeneng .float-leftlan .float-rightkanggo .float-startlan .float-end.
- Ganti jeneng .border-leftlan .border-rightkanggo .border-startlan .border-end.
- Ganti jeneng .rounded-leftlan .rounded-rightkanggo .rounded-startlan .rounded-end.
- Ganti jeneng .ml-*lan .mr-*kanggo .ms-*lan .me-*.
- Ganti jeneng .pl-*lan .pr-*kanggo .ps-*lan .pe-*.
- Ganti jeneng .text-leftlan .text-rightkanggo .text-startlan .text-end.
PecahMargin negatif dipateni kanthi gawan.
Added .bg-bodykelas anyar kanggo cepet nyetel <body>'s latar mburi kanggo unsur tambahan.
Nambahake utilitas posisi anyar kanggo top, right, bottom, lan left. Nilai kalebu 0, 50%, lan 100%kanggo saben properti.
Ditambahake anyar .translate-middle-x& .translate-middle-ykeperluan kanggo horisontal utawa vertikal tengah unsur posisi absolut / tetep.
border-widthNambahake utilitas anyar .
PecahGanti jeneng .text-monospacedadi .font-monospace.
PecahDibusak .text-hideamarga iku cara kuno kanggo ndhelikake teks sing ora kudu digunakake maneh.
Added .fs-*utilitas kanggo font-sizekeperluan (karo RFS aktif). Iki nggunakake skala sing padha karo judhul standar HTML (1-6, gedhe nganti cilik), lan bisa diowahi liwat peta Sass.
PecahGanti .font-weight-*jeneng utilitas minangka .fw-*ringkesan lan konsistensi.
PecahGanti .font-style-*jeneng utilitas minangka .fst-*ringkesan lan konsistensi.
Ditambahake .d-gridkanggo nampilake utilitas lan gaputilitas anyar ( .gap) kanggo tata letak CSS Grid lan flexbox.
PecahDibusak .rounded-smlan rounded-lg, lan ngenalaken ukuran anyar saka kelas, .rounded-0kanggo .rounded-3. Waca #31687 .
line-heightNambahake keperluan anyar : .lh-1, .lh-sm, .lh-baselan .lh-lg. Delengen kene .
Pindhah .d-nonesarana ing CSS kita kanggo menehi bobot luwih saka keperluan tampilan liyane.
Extended .visually-hidden-focusablehelper uga bisa ing kontaner, nggunakake :focus-within.

Pembantu

Pecah Pembantu embed responsif wis diganti jeneng dadi pembantu rasio kanthi jeneng kelas anyar lan prilaku sing luwih apik, uga variabel CSS sing mbiyantu.
- Kelas wis diganti jeneng kanggo ngganti bymenyang xing rasio aspek. Contone, .ratio-16by9saiki .ratio-16x9.
- Kita wis ngeculake .embed-responsive-itempamilih klompok unsur lan milih pilihan sing luwih gampang .ratio > *. Ora ana kelas maneh sing dibutuhake, lan pembantu rasio saiki bisa digunakake karo unsur HTML apa wae.
- Peta $embed-responsive-aspect-ratiosSass wis diganti $aspect-ratiosjeneng lan nilai wis simplified kanggo kalebu jeneng kelas lan persentasi minangka key: valuepasangan.
- Variabel CSS saiki digawe lan kalebu kanggo saben nilai ing peta Sass. Ngowahi --bs-aspect-ratiovariabel ing .ratiokanggo nggawe rasio aspek khusus .
Pecah Kelas "maca layar" saiki dadi kelas "didhelikake sacara visual" .
- Ngganti file Sass saka scss/helpers/_screenreaders.scssmenyangscss/helpers/_visually-hidden.scss
- Ganti jeneng .sr-onlylan .sr-only-focusablekanggo .visually-hiddenlan.visually-hidden-focusable
- Ganti jeneng sr-only()lan sr-only-focusable()mixins kanggo visually-hidden()lan visually-hidden-focusable().
bootstrap-utilities.csssaiki uga kalebu pembantu kita. Pembantu ora perlu diimpor ing bangunan khusus maneh.

JavaScript

Ketergantungan jQuery lan rewrote plugins dadi ing JavaScript biasa.
PecahAtribut data kanggo kabeh plugin JavaScript saiki diwenehi spasi kanggo mbedakake fungsi Bootstrap saka pihak katelu lan kode sampeyan dhewe. Contone, kita nggunakake data-bs-toggletinimbang data-toggle.
Kabeh plugin saiki bisa nampa pamilih CSS minangka argumen pisanan. Sampeyan bisa ngliwati unsur DOM utawa pamilih CSS sing bener kanggo nggawe conto anyar saka plugin:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigbisa liwati minangka fungsi sing nampa config Popper standar Bootstrap minangka bantahan, supaya sampeyan bisa nggabung konfigurasi gawan iki ing dalan. Ditrapake kanggo dropdown, popovers, lan tooltips.
Nilai standar kanggo fallbackPlacementsdiganti kanggo ['top', 'right', 'bottom', 'left']panggonan seko luwih saka unsur Popper. Ditrapake kanggo dropdown, popovers, lan tooltips.
Dibusak garis ngisor saka cara statis umum kaya _getInstance()→ getInstance().