Migrasi menyang v5
Lacak lan deleng owah-owahan menyang file sumber Bootstrap, dokumentasi, lan komponen kanggo mbantu sampeyan pindhah saka v4 menyang v5.
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 gandhenganecolor-contrast()
amarga ora ana hubungane karo ruang warna YIQ. Waca #30168.$yiq-contrasted-threshold
diganti jeneng dadi$min-contrast-ratio
.$yiq-text-dark
lan$yiq-text-light
mungguh diganti jeneng dadi$color-contrast-dark
lan$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)
tinimbangmedia-breakpoint-down(md)
target viewports luwih cilik tinimbanglg
).- Kajaba iku, parameter kapindho ing
media-breakpoint-between()
uga nggunakake breakpoint dhewe tinimbang breakpoint sabanjuré (contone,media-between(sm, lg)
tinimbangmedia-breakpoint-between(sm, md)
target viewports antaranesm
lanlg
).
-
PecahDibusak gaya print lan
$enable-print-styles
variabel. Kelas tampilan print isih ana. Waca #28339 . -
PecahDropped
color()
,theme-color()
, langray()
fungsi kanggo variabel. Waca #29083 . -
PecahFungsi sing diganti
theme-color-level()
dadicolor-level()
lan saiki nampa warna apa wae sing dikarepake tinimbang mung$theme-color
warna. Waca # 29083 Watch out:color-level()
iki mengko ing dropped ingv5.0.0-alpha3
. -
PecahGanti jeneng
$enable-prefers-reduced-motion-media-query
lan$enable-pointer-cursor-for-buttons
kanggo$enable-reduced-motion
lan$enable-button-pointers
kanggo brevity. -
PecahDibusak
bg-gradient-variant()
mixin. Gunakake.bg-gradient
kelas 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 kanggoshift-color()
supaya tabrakan karo Sass fungsi werna njongko dhewe. -
box-shadow
mixins saiki ngidininull
nilai lan nyelehakenone
saka macem-macem argumen. Waca #30394 . -
Mixin
border-radius()
saiki duwe nilai standar.
Sistem warna
-
Sistem warna sing bisa digunakake
color-level()
lan$theme-color-interval
dicopot kanggo milih sistem warna anyar. Kabehlighten()
landarken()
fungsi ing basis kode kita diganti deningtint-color()
lanshade-color()
. Fungsi kasebut bakal nyampur warna karo putih utawa ireng tinimbang ngganti cahya kanthi jumlah sing tetep. Wernashift-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-900
dadi$black
. -
Kanggo ndhukung sistem warna, kita wis nambah adat
tint-color()
lanshade-color()
fungsi anyar kanggo nyampur warna kanthi tepat.
nganyari Grid
-
Breakpoint anyar! Added
xxl
breakpoint anyar kanggo1400px
lan 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-kira24px
, mudhun saka30px
). 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-gutters
dadi.g-0
cocog karo keperluan talang anyar.
- Nambahake kelas talang anyar (
-
Kolom wis ora
position: relative
ditrapake maneh, mula sampeyan kudu nambah.position-relative
sawetara unsur kanggo mulihake prilaku kasebut. -
PecahNinggalake sawetara
.order-*
kelas sing asring ora digunakake. Saiki kita mung nyedhiyakake.order-1
metu.order-5
saka kothak. -
PecahDrop
.media
komponen amarga bisa gampang ditiru karo keperluan. Deleng #28265 lan kaca utilitas fleksibel kanggo conto . -
Pecah
bootstrap-grid.css
saiki mung ditrapakebox-sizing: border-box
kanggo kolom tinimbang ngreset ukuran kothak global. Kanthi cara iki, gaya kothak kita bisa digunakake ing papan liyane tanpa gangguan. -
$enable-grid-classes
ora maneh disables generasi kelas wadhah maneh. Waca #29146. -
Nganyari
make-col
mixin dadi standar menyang kolom sing padha tanpa ukuran sing ditemtokake.
Konten, Urip maneh, lsp
-
RFS saiki diaktifake kanthi gawan. Heading nggunakake
font-size()
mixin bakal kanthi otomatis nyetelfont-size
ukurane karo viewport. Fitur iki sadurunge milih karo v4. -
PecahNdandani tipografi tampilan kita kanggo ngganti
$display-*
variabel kita lan nganggo$display-font-sizes
peta Sass.$display-*-weight
Uga dibusak variabel individu kanggo siji$display-font-weight
lan diaturfont-size
s. -
Nambahake rong
.display-*
ukuran judhul anyar,.display-5
lan.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-light
lan.thead-dark
dropped ing sih saka.table-*
kelas varian kang bisa digunakake kanggo kabeh unsur Tabel (thead
,,,, lan ) .tbody
tfoot
tr
th
td
-
PecahMixin
table-row-variant()
diganti jenengtable-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
-y
lan-x
. -
Pecah
.pre-scrollable
Kelas 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-justify
Kelas mudhun . Waca #29793 -
padding-left
Reset standar horisontal<ul>
lan<ol>
unsur saka standar browser40px
menyang2rem
. -
Ditambahake
$enable-smooth-scroll
, sing ditrapakescroll-behavior: smooth
sacara global-kajaba pangguna sing njaluk gerakan suda liwatprefers-reduced-motion
pitakon 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,
start
lan minangkaend
penggantileft
lanright
.
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-check
saiki.form-check
..custom-check.custom-switch
saiki.form-check.form-switch
..custom-select
saiki.form-select
..custom-file
lan.form-file
wis diganti dening gaya adat ing ndhuwur.form-control
..custom-range
saiki.form-range
.- Dropped native
.form-control-file
lan.form-control-range
.
-
PecahDiturunake
.input-group-append
lan.input-group-prepend
. Sampeyan saiki mung bisa nambah tombol lan.input-group-text
minangka 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-text
no longer setsdisplay
, ngijini sampeyan nggawe inline utawa mblokir teks bantuan sing dikarepake mung kanthi ngganti unsur HTML. -
Lambang validasi ora ditrapake maneh kanggo
<select>
s karomultiple
. -
File Sass sumber sing disusun maneh ing
scss/forms/
, kalebu gaya grup input.
Komponen
- Nilai terpadu
padding
kanggo tandha, remah roti, kertu, dropdown, grup dhaptar, modal, popover, lan tooltip adhedhasar$spacer
variabel 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 digunakakecurrentColor
.
Lencana
-
PecahMudhun kabeh
.badge-*
kelas werna kanggo keperluan latar mburi (contone, nggunakake.bg-primary
tinimbang.badge-primary
). -
PecahDropped
.badge-pill
- gunakake.rounded-pill
sarana kasebut. -
PecahDibusak hover lan fokus gaya kanggo
<a>
lan<button>
unsur. -
Tambah bantalan standar kanggo lencana saka
.25em
/.5em
menyang.35em
/.65em
.
Breadcrumbs
-
Nyederhanakake tampilan standar saka breadcrumbs kanthi mbusak
padding
,background-color
, lanborder-radius
. -
Nambahake properti khusus CSS anyar
--bs-breadcrumb-divider
kanggo 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-check
menyang<input>
, lan masangake karo sembarang.btn
kelas ing<label>
. Waca #30650 . Dokumen kanggo iki wis dipindhah saka kaca Tombol menyang bagean Formulir anyar. -
Pecah Dropped
.btn-block
kanggo keperluan. Tinimbang nggunakake.btn-block
ing.btn
, bungkus tombol karo.d-grid
lan.gap-*
sarana kanggo spasi yen perlu. Ngalih menyang kelas responsif kanggo kontrol sing luwih akeh. Waca docs kanggo sawetara conto. -
Dianyari kita
button-variant()
lanbutton-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-deck
ing 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-columns
ing sih saka Masonry. Waca #28922 . -
PecahNgganti
.card
akordeon adhedhasar karo komponen Accordion anyar .
Carousel
-
.carousel-dark
Nambahake 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
.close
dadi.btn-close
jeneng 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-white
Nambahake varian anyar sing digunakakefilter: 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-dark
lan 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 landata-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
flip
kanggo plugin gulung mudhun kanggo konfigurasi Popper asli. Sampeyan saiki bisa mateni prilaku flipping kanthi ngliwati array kosong kanggofallbackPlacements
opsi ing modifier flip . -
Menu dropdown saiki bisa diklik kanthi
autoClose
pilihan 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-item
s kebungkus ing<li>
s.
Jumbotron
- PecahDropped komponen jumbotron amarga bisa ditiru karo keperluan. Deleng conto Jumbotron anyar kanggo demo.
Dhaptar klompok
.list-group-numbered
Nambahake modifier anyar kanggo dhaptar grup.
Navs lan tab
null
Nambahake variabel anyar kanggofont-size
,font-weight
,color
, lan:hover
color
menyang.nav-link
kelas.
Navbars
- PecahNavbars saiki mbutuhake wadhah ing (kanggo drastis nyederhanakake syarat spasi lan CSS dibutuhake).
Offcanvas
- Nambahake komponen offcanvas anyar .
Pagination
-
Tautan pagination saiki wis bisa disesuaikan
margin-left
sing dibunderake kanthi dinamis ing kabeh pojok nalika dipisahake saka siji liyane. -
Ditambahake
transition
s kanggo pranala pagination.
Popovers
-
PecahGanti jeneng
.arrow
dadi.popover-arrow
ing template popover standar kita. -
whiteList
Opsi ganti jeneng dadiallowList
.
Spinner
-
Spinners saiki ngurmati
prefers-reduced-motion: reduce
kanthi alon-alon animasi. Waca #31882 . -
Peningkatan vertikal spinner.
Toasts
-
Toasts saiki bisa dipanggonke ing a
.toast-container
kanthi bantuan utilitas posisi . -
Durasi roti panggang standar diganti dadi 5 detik.
-
Dibusak
overflow: hidden
saka toasts lan diganti karoborder-radius
s tepat karocalc()
fungsi.
Tooltips
-
PecahGanti jeneng
.arrow
dadi.tooltip-arrow
ing cithakan tooltip standar kita. -
PecahNilai gawan kanggo
fallbackPlacements
diganti kanggo panggonan sing['top', 'right', 'bottom', 'left']
luwih apik saka unsur popper. -
Pecah
whiteList
Opsi ganti jeneng dadiallowList
.
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-left
lan.float-right
kanggo.float-start
lan.float-end
. - Ganti jeneng
.border-left
lan.border-right
kanggo.border-start
lan.border-end
. - Ganti jeneng
.rounded-left
lan.rounded-right
kanggo.rounded-start
lan.rounded-end
. - Ganti jeneng
.ml-*
lan.mr-*
kanggo.ms-*
lan.me-*
. - Ganti jeneng
.pl-*
lan.pr-*
kanggo.ps-*
lan.pe-*
. - Ganti jeneng
.text-left
lan.text-right
kanggo.text-start
lan.text-end
.
- Ganti jeneng
-
PecahMargin negatif dipateni kanthi gawan.
-
Added
.bg-body
kelas anyar kanggo cepet nyetel<body>
's latar mburi kanggo unsur tambahan. -
Nambahake utilitas posisi anyar kanggo
top
,right
,bottom
, lanleft
. Nilai kalebu0
,50%
, lan100%
kanggo saben properti. -
Ditambahake anyar
.translate-middle-x
&.translate-middle-y
keperluan kanggo horisontal utawa vertikal tengah unsur posisi absolut / tetep. -
border-width
Nambahake utilitas anyar . -
PecahGanti jeneng
.text-monospace
dadi.font-monospace
. -
PecahDibusak
.text-hide
amarga iku cara kuno kanggo ndhelikake teks sing ora kudu digunakake maneh. -
Added
.fs-*
utilitas kanggofont-size
keperluan (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-grid
kanggo nampilake utilitas langap
utilitas anyar (.gap
) kanggo tata letak CSS Grid lan flexbox. -
PecahDibusak
.rounded-sm
lanrounded-lg
, lan ngenalaken ukuran anyar saka kelas,.rounded-0
kanggo.rounded-3
. Waca #31687 . -
line-height
Nambahake keperluan anyar :.lh-1
,.lh-sm
,.lh-base
lan.lh-lg
. Delengen kene . -
Pindhah
.d-none
sarana ing CSS kita kanggo menehi bobot luwih saka keperluan tampilan liyane. -
Extended
.visually-hidden-focusable
helper 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
by
menyangx
ing rasio aspek. Contone,.ratio-16by9
saiki.ratio-16x9
. - Kita wis ngeculake
.embed-responsive-item
pamilih 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-ratios
Sass wis diganti$aspect-ratios
jeneng lan nilai wis simplified kanggo kalebu jeneng kelas lan persentasi minangkakey: value
pasangan. - Variabel CSS saiki digawe lan kalebu kanggo saben nilai ing peta Sass. Ngowahi
--bs-aspect-ratio
variabel ing.ratio
kanggo nggawe rasio aspek khusus .
- Kelas wis diganti jeneng kanggo ngganti
-
Pecah Kelas "maca layar" saiki dadi kelas "didhelikake sacara visual" .
- Ngganti file Sass saka
scss/helpers/_screenreaders.scss
menyangscss/helpers/_visually-hidden.scss
- Ganti jeneng
.sr-only
lan.sr-only-focusable
kanggo.visually-hidden
lan.visually-hidden-focusable
- Ganti jeneng
sr-only()
lansr-only-focusable()
mixins kanggovisually-hidden()
lanvisually-hidden-focusable()
.
- Ngganti file Sass saka
-
bootstrap-utilities.css
saiki 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-toggle
tinimbangdata-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:
var modal = new bootstrap.Modal('#myModal') var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-
popperConfig
bisa 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
fallbackPlacements
diganti 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()
.