Lumpat menyang isi utama Lumpat menyang pandhu arah docs
in English

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

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 supaya luwih gampang 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-checksaiki .form-check.
    • .custom-check.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.

  • 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

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.

  • 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 .

Tombol tutup

  • PecahDiganti jeneng .closedadi .btn-closejeneng sing kurang umum.

  • Tombol tutup saiki nggunakake background-image(SVG sing ditempelake) tinimbang &times;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.

  • 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 lan data-bs-popper="none"nalika 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

Dhaptar klompok

  • nullNambahake variabel anyar kanggo font-size, font-weight, color, lan :hover colormenyang .nav-linkkelas.
  • PecahNavbars saiki mbutuhake wadhah ing (kanggo drastis nyederhanakake syarat spasi lan CSS dibutuhake).

Offcanvas

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 gawan kanggo fallbackPlacementsdiganti 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.

  • Pecah Removed .rounded-sm and rounded-lg, and introduced a new scale of classes, .rounded-0 to .rounded-3. See #31687.

  • Added new line-height utilities: .lh-1, .lh-sm, .lh-base and .lh-lg. See here.

  • Moved the .d-none utility in our CSS to give it more weight over other display utilities.

  • Extended the .visually-hidden-focusable helper to also work on containers, using :focus-within.

Helpers

  • Breaking Responsive embed helpers have been renamed to ratio helpers with new class names and improved behaviors, as well as a helpful CSS variable.

    • Classes have been renamed to change by to x in the aspect ratio. For example, .ratio-16by9 is now .ratio-16x9.
    • We’ve dropped the .embed-responsive-item and element group selector in favor of a simpler .ratio > * selector. No more class is needed, and the ratio helper now works with any HTML element.
    • The $embed-responsive-aspect-ratios Sass map has been renamed to $aspect-ratios and its values have been simplified to include the class name and the percentage as the key: value pair.
    • CSS variables are now generated and included for each value in the Sass map. Modify the --bs-aspect-ratio variable on the .ratio to create any custom aspect ratio.

  • Breaking “Screen reader” classes are now “visually hidden” classes.

    • Changed the Sass file from scss/helpers/_screenreaders.scss to scss/helpers/_visually-hidden.scss
    • Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable
    • Renamed sr-only() and sr-only-focusable() mixins to visually-hidden() and visually-hidden-focusable().

  • bootstrap-utilities.css now also includes our helpers. Helpers don’t need to be imported in custom builds anymore.

JavaScript

  • Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.

  • Breaking Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.

  • All plugins can now accept a CSS selector as the first argument. You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:

    var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfig can be passed as a function that accepts the Bootstrap’s default Popper config as an argument, so that you can merge this default configuration in your way. Applies to dropdowns, popovers, and tooltips.

  • The default value for the fallbackPlacements is changed to ['top', 'right', 'bottom', 'left'] for better placement of Popper elements. Applies to dropdowns, popovers, and tooltips.

  • Dibusak garis ngisor saka cara statis umum kaya _getInstance()→ getInstance().