Migrate amin'ny v5
Araho sy avereno jerena ny fanovana ny rakitra loharano Bootstrap, ny antontan-taratasy ary ny singa hanampy anao hifindra monina manomboka amin'ny v4 mankany v5.
v5.2.0
Famolavolana nohavaozina
Bootstrap v5.2.0 dia manasongadina fanavaozana endrika an-kolaka ho an'ny singa sy fananana vitsivitsy manerana ny tetikasa, indrindra amin'ny alàlan'ny border-radius
soatoavina voadio amin'ny bokotra sy ny fanaraha-maso ny endrika . Nohavaozina ihany koa ny antontan-taratasinay miaraka amin'ny pejin-tranonkala vaovao, fandrafetana antontan-taratasy tsotra kokoa izay tsy manapotika intsony ny ampahany amin'ny sisiny, ary ohatra misongadina kokoa amin'ny kisary Bootstrap .
Variana CSS bebe kokoa
Nohavaozinay ny singa rehetra hampiasainay ny fari-piadidiana CSS. Na dia mbola manohana ny zava-drehetra aza i Sass, dia nohavaozina ny singa tsirairay mba hampidirana ny fari-piainan'ny CSS amin'ny kilasin'ny singa fototra (ohatra, .btn
), ahafahana manamboatra Bootstrap amin'ny fotoana tena izy. Amin'ny famoahana manaraka dia hanohy hanitarana ny fampiasanay ny fari-piainan'ny CSS izahay amin'ny endrika, endrika, mpanampy ary fitaovana. Vakio bebe kokoa momba ny fari-piainan'ny CSS ao amin'ny singa tsirairay ao amin'ny pejin'ny antontan-taratasiny.
Somary tsy feno ny fampiasanay ny CSS raha tsy amin'ny Bootstrap 6. Na dia tianay aza ny hampihatra azy ireo amin'ny ankapobeny, dia atahorana hiteraka fiovana izy ireo. Ohatra, ny fametrahana $alert-border-width: var(--bs-border-width)
ao amin'ny kaody loharanontsika dia manapaka ny mety ho Sass ao amin'ny kaody anao manokana raha toa ka $alert-border-width * 2
noho ny antony iray no nanaovanao izany.
Noho izany, na aiza na aiza azo atao, dia hanohy hanosika ny fari-piadidiana CSS bebe kokoa izahay, saingy azafady mba fantaro fa mety ho voafetra kely ny fampiharana anay amin'ny v5.
Vaovao_maps.scss
Bootstrap v5.2.0 dia nampiditra rakitra Sass vaovao misy _maps.scss
. Misintona sarintany Sass maromaro izy io _variables.scss
mba hamahana olana iray izay tsy nampiharina tamin'ny sari-tany faharoa ny fanavaozana ny sari-tany tany am-boalohany. Ohatra, $theme-colors
tsy nampiharina tamin'ny sari-tany lohahevitra hafa niantehitra tamin'ny $theme-colors
, manapaka ny rindranasan'asa fanamboarana fototra. Raha fintinina, ny Sass dia manana fetra izay tsy azo havaozina raha vantany vao ampiasaina ny fari-piadidiana na sarintany . Misy lesoka mitovy amin'izany amin'ny fari-piainan'ny CSS rehefa ampiasaina amin'ny fandrafetana ny fari-pahaizan'ny CSS hafa.
Izany no mahatonga ny fanovana miovaova ao amin'ny Bootstrap tsy maintsy ho avy aorian'ny @import "functions"
, fa alohan'ny @import "variables"
sy ny ambiny fanafarana entana. Toy izany koa no mihatra amin'ny sari-tany Sass—tsy maintsy asianao ny default alohan'ny hampiasana azy. Nafindra tany amin'ny vaovao ireto sari-tany manaraka ireto _maps.scss
:
$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters
Ny fananganana Bootstrap CSS mahazatra anao dia tokony ho tahaka izao miaraka amin'ny fanafarana sarintany misaraka.
// 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 vaovao
font-weight
Fitaovana nitarina mba hampidirana.fw-semibold
ireo endritsoratra semibold .- Fitaovana
border-radius
nitarina mba hampidirana habe roa vaovao,.rounded-4
ary.rounded-5
, ho an'ny safidy bebe kokoa.
Fanovana fanampiny
-
Nampiditra
$enable-container-classes
safidy vaovao. — Amin'izao fotoana izao rehefa misafidy ny fisehon'ny CSS Grid andrana,.container-*
dia mbola hangonina ihany ny kilasy, raha tsy apetraka amin'nyfalse
. Ny kaontenera koa izao dia mitazona ny sandan'ny tatatra. -
Ny singa Offcanvas dia manana fiovaovana mamaly izao . Ny
.offcanvas
kilasy tany am-boalohany dia tsy miova — manafina votoaty amin'ny sehatra fijerena rehetra. Mba hahatonga azy ho mamaly dia ovay ho.offcanvas
kilasy iray.offcanvas-{sm|md|lg|xl|xxl}
io kilasy io. -
Ireo mpizara latabatra matevina dia mirotsaka amin'izao fotoana izao. — Nesorinay ny sisin-tany matevina kokoa sy sarotra kokoa hanilihana eo anelanelan'ny vondrona latabatra ary nafindranay ho any amin'ny kilasy tsy voatery azonao ampiharina,
.table-group-divider
. Jereo ny tabilao tabilao ho ohatra. -
Scrollspy dia naverina nosoratana mba hampiasana ny Intersection Observer API , izay midika fa tsy mila fonosin'ny ray aman-dreny havanana intsony ianao, manafoana ny
offset
config, sy ny maro hafa. Tadiavo ny fampiharana Scrollspy anao mba ho marina kokoa sy tsy miovaova amin'ny fanasongadinana nav azy. -
Popovers sy tooltips izao dia mampiasa fari-piadidiana CSS. Nohavaozina avy amin'ny mpiara-miasa aminy Sass ny fari-pahaizan'ny CSS sasany mba hampihenana ny isan'ny miovaova. Vokatr'izany dia misy karazany telo tsy ampiasaina amin'ity famoahana ity:
$popover-arrow-color
,$popover-arrow-outer-color
, ary$tooltip-arrow-color
. -
Nampiana
.text-bg-{color}
mpanampy vaovao. Raha tokony hametraka ny tsirairay.text-*
sy ny.bg-*
fitaovana ampiasaina ianao, dia azonao atao izao ny mampiasa ny.text-bg-*
mpanampy mba hametraka amin'ny lafinybackground-color
anoloana mifanohitracolor
. -
Nampiana
.form-check-reverse
modifier hamadika ny filaharan'ny etikety sy ny boaty/radio mifandraika amin'izany. -
Nampiana tsanganana miolakolaka amin'ny tabilao amin'ny alalan'ny
.table-striped-columns
kilasy vaovao.
Raha mila lisitra feno ny fanovana, jereo ny tetikasa v5.2.0 ao amin'ny GitHub .
v5.1.0
-
Fanampiana andrana natao ho an'ny lamina CSS Grid . — Asa an-dalam-pandrosoana ity, ary mbola tsy vonona amin'ny fampiasana famokarana, fa afaka misafidy amin'ny endri-javatra vaovao amin'ny alàlan'ny Sass ianao. Mba hahafahan'izy io, esory ny grid default, amin'ny alàlan'ny fametrahana
$enable-grid-classes: false
ary avelao ny CSS Grid amin'ny alàlan'ny fametrahana$enable-cssgrid: true
. -
Navbar nohavaozina hanohanana ny offcanvas. - Manampia drawer offcanvas amin'ny navbar rehetra miaraka amin'ireo
.navbar-expand-*
kilasy mamaly sy marika offcanvas sasany. -
Nampiana singa mpihazona toerana vaovao . — Ny singanay vaovao indrindra, fomba iray hanomezana sakana vonjimaika ho solon'ny votoaty tena izy mba hanamafisana fa mbola misy zavatra mipetaka ao amin'ny tranokalanao na ny fampiharana.
-
Collapse plugin izao dia manohana ny firodana marindrano . — Ampidiro
.collapse-horizontal
ao amin'ny anao ny.collapse
handrava nywidth
fa tsy nyheight
. Fadio ny fandokoana indray ny navigateur amin'ny fametrahana amin-height
orheight
. -
Nampiana stack vaovao sy mpanampy fitsipika mitsangana. - Ampiharo haingana ny fananana flexbox marobe mba hamoronana drafitra manokana miaraka amin'ny stacks . Misafidiana avy amin'ny mitsivalana (
.hstack
) sy mitsangana (.vstack
). Manampia mpizara mitsangana mitovy amin'ny<hr>
singa miaraka amin'ireo mpanampy vaovao.vr
. -
Nampiana
:root
varimbazaha CSS eran-tany vaovao. - Nanampy varimbazaha CSS vaovao maromaro ho amin'ny:root
ambaratonga mifehy ny<body>
fomba. Bebe kokoa no ao anatin'ny asa, ao anatin'izany ny kojakoja sy singa rehetra, fa vakio izao ny fari-piadidiana CSS ao amin'ny fizarana Customize . -
Fampiasana loko sy fiaviana nohavaozina mba hampiasana ny fari-piainan'ny CSS, ary nampiana fampiasa amin'ny opacity lahatsoratra vaovao sy ny fampahalalam- baovao. -
.text-*
ary ny.bg-*
fitaovana ampiasaina amin'izao fotoana izao dia natsangana miaraka amin'ny fari-piainan'ny CSS syrgba()
ny sandan'ny loko, ahafahanao mampifanaraka mora foana ny fitaovana rehetra miaraka amin'ny fitaovana opacity vaovao. -
Nampiana ohatra snippet vaovao mifototra amin'ny fampisehoana ny fomba fanamboarana ny singantsika. - Misintona vonona hampiasa singa namboarina sy endrika hafa mahazatra miaraka amin'ireo ohatra Snippets vaovao . Ahitana footers , dropdowns , list group , ary modals .
-
Nesorina tao amin'ny popovers sy ny toro-làlana ny fomba fametrahana toerana tsy ampiasaina satria Popper irery ihany no misahana izany.
$tooltip-margin
efa nolavina ary napetrakanull
ao anatin'ny dingana.
Mila fanazavana fanampiny? Vakio ny lahatsoratra bilaogy v5.1.0.
miankina
- Nidina jQuery.
- Nohavaozina avy amin'ny Popper v1.x ho Popper v2.x.
- Nosoloana an'i Libsass tamin'ny Dart Sass satria tsy nampiasaina intsony ny compiler Sass nomena an'i Libsass.
- Nifindra tany Jekyll nankany Hugo noho ny fananganana ny antontan-taratasinay
Fanohanana navigateur
- Nidina ny Internet Explorer 10 sy 11
- Nidina ny Microsoft Edge <16 (Legacy Edge)
- Nidina ny Firefox <60
- Nidina Safari <12
- Nidina iOS Safari <12
- Nidina Chrome <60
Fanovana ny antontan-taratasy
- Pejin-trano nohavaozina, filaharan'ny docs ary footer.
- Nampiana torolàlana Parcel vaovao .
- Nampiana fizarana Customize vaovao , manolo ny pejy Theming an'ny v4 , miaraka amin'ny antsipiriany vaovao momba ny Sass, safidy fanamafisam-peo maneran-tany, rafitra loko, varimbazaha CSS, sy ny maro hafa.
- Namboarina ny antontan-taratasin'ny endrika rehetra ho fizarana Forms vaovao , mizara ny atiny ho pejy mifantoka kokoa.
- Toy izany koa, nohavaozina ny fizarana Layout , mba hamolavolana ny votoatin'ny grid mazava kokoa.
- Novana anarana hoe "Navs" ho "Navs & Tabs".
- Novana anarana hoe “Checks” ho “Checks & radios” ny pejy.
- Namboarina ny navbar ary nanampy subnav vaovao hanamora ny fandehanana manodidina ny tranokalanay sy ny dikan-doka.
- Nampiana hitsin-dàlana fitendry vaovao ho an'ny saha karoka: Ctrl + /.
Sass
-
Nafoinay ny fitambaran'ny sari-tany Sass default mba hanamora ny fanesorana ny sanda miverimberina. Ataovy ao an-tsaina fa tsy maintsy mamaritra ny soatoavina rehetra ao amin'ny sarintany Sass ianao izao
$theme-colors
. Jereo ny fomba hiatrehana ny sarintany Sass . -
MafanaNy asa novana anarana
color-yiq()
sy ny fari-piainana mifandraika amin'nycolor-contrast()
hoe tsy mifandraika amin'ny habaka loko YIQ intsony. Jereo ny #30168.$yiq-contrasted-threshold
dia novana anarana ho$min-contrast-ratio
.$yiq-text-dark
ary$yiq-text-light
samy nomena anarana hoe$color-contrast-dark
and$color-contrast-light
.
-
MafanaNiova ho amin'ny fomba lojika kokoa ny mari-pamantarana mixins query media.
media-breakpoint-down()
dia mampiasa ny toerana fiatoana ho solon'ny toerana fiatoana manaraka (oh,media-breakpoint-down(lg)
raha tokony homedia-breakpoint-down(md)
lasibatra kely kokoa noho nylg
).- Toy izany koa, ny masontsivana faharoa ao amin'ny
media-breakpoint-between()
dia mampiasa ny toerana fiatoana ihany koa fa tsy ny teboka manaraka (oh,media-between(sm, lg)
fa tsymedia-breakpoint-between(sm, md)
mikendry ny toerana fijerena eo anelanelan'nysm
sylg
).
-
MafanaNesorina ny fomba fanontam-pirinty sy
$enable-print-styles
miovaova. Mbola misy ny kilasy fampisehoana printy. Jereo ny #28339 . -
MafanaNilatsaka
color()
,theme-color()
, arygray()
miasa ho an'ny variables. Jereo ny #29083 . -
MafanaFampiasa novana anarana ary manaiky izay loko tianao fa tsy loko
theme-color-level()
fotsiny . Jereo ny #29083 Tandremo: nalatsaka tao aoriana .color-level()
$theme-color
color-level()
v5.0.0-alpha3
-
MafanaNovana anarana
$enable-prefers-reduced-motion-media-query
sy$enable-pointer-cursor-for-buttons
ho$enable-reduced-motion
ary$enable-button-pointers
ho fohifohy. -
MafanaNesorina ny
bg-gradient-variant()
mixin. Ampiasao ny.bg-gradient
kilasy mba hanampiana gradients amin'ny singa fa tsy ny.bg-gradient-*
kilasy novokarina. -
Mafana Nesorina ny mixins efa lany teo aloha:
hover
,hover-focus
,plain-hover-focus
, aryhover-focus-active
float()
form-control-mixin()
nav-divider()
retina-img()
text-hide()
(nandao ihany koa ny kilasin'ny fitaovana mifandraika amin'izany,.text-hide
)visibility()
form-control-focus()
-
MafanaFampiasa novana anarana
scale-color()
mbashift-color()
hialana amin'ny fifandonana amin'ny fiasan'ny fanamafisam-peo an'i Sass manokana. -
box-shadow
mixins izao dia mamelanull
ny soatoavina ary mialanone
amin'ny tohan-kevitra maro. Jereo ny #30394 . -
Ny
border-radius()
mixin izao dia manana sanda default.
Rafitra loko
-
Ny rafitra loko izay niasa
color-level()
sy$theme-color-interval
nesorina noho ny rafitra loko vaovao. Nosoloinalighten()
sy . _ _ Ireo fiasa ireo dia hampifangaro ny loko amin'ny fotsy na mainty fa tsy manova ny fahamaivanany amin'ny vola raikitra. Ny loko na ny aloky ny loko dia miankina amin'ny hoe tsara na ratsy ny mari-pamantarana lanja. Jereo ny #30622 raha mila fanazavana fanampiny.darken()
tint-color()
shade-color()
shift-color()
-
Nampiana loko sy loko vaovao ho an'ny loko tsirairay, manome loko sivy misaraka ho an'ny loko fototra tsirairay, ho variana Sass vaovao.
-
Nohatsaraina ny fifanoherana loko. Nifanohitra tamin'ny loko 3:1 ka hatramin'ny 4.5:1 ary nohavaozina ny loko manga, maitso, cyan ary mavokely mba hiantohana ny fifanoherana WCAG 2.1 AA. Nanova ihany koa ny loko mifanohitra amin'ny loko avy
$gray-900
amin'ny$black
. -
Mba hanohanana ny rafitra fandokoanay, dia nampiana fomba amam-panao
tint-color()
syshade-color()
fiasa vaovao mba hampifangaroana ny lokonay araka ny tokony ho izy.
Grid fanavaozana
-
Fiatoana vaovao! Niampy teboka fiatoana vaovao
xxl
ho an'ny1400px
sy ambony. Tsy misy fiovana amin'ny toerana fiatoana hafa rehetra. -
Nohatsaraina tatatra. Ny tatatra dia napetraka amin'ny rem, ary tery kokoa noho ny v4 (
1.5rem
, na manodidina ny24px
, midina avy amin'ny30px
). Izany dia mampifanaraka ny tatatra amin'ny rafitry ny grid miaraka amin'ny fitaovana fanasarahanay.- Nampiana kilasy tatatra vaovao (
.g-*
,.gx-*
, ary.gy-*
) hifehy ny tatatra marindrano/mitsangana, tatatra marindrano ary tatatra mitsangana. - MafanaNovana anarana
.no-gutters
mba.g-0
hifanaraka amin'ny fitaovana tatatra vaovao.
- Nampiana kilasy tatatra vaovao (
-
Tsy nampiharina intsony ny tsanganana
position: relative
, ka mety tsy maintsy manampy.position-relative
singa sasany ianao hamerenana io fihetsika io. -
Mafana
.order-*
Nandatsaka kilasy maromaro izay matetika tsy nampiasaina. Ny out of the box ihany no omenay.order-1
izao ..order-5
-
MafanaNidina ny
.media
singa satria azo averina mora foana amin'ny fitaovana. Jereo ny #28265 sy ny pejin'ny flex utility ho ohatra . -
Mafana
bootstrap-grid.css
mihatrabox-sizing: border-box
amin'ny tsanganana fotsiny izao fa tsy mamerina ny fatran'ny boaty manerantany. Amin'izany fomba izany dia azo ampiasaina any amin'ny toerana maro tsy misy fanelingelenana ny fomba fiasantsika. -
$enable-grid-classes
tsy manafoana intsony ny famokarana kilasy container intsony. Jereo ny #29146. -
Nohavaozina ny
make-col
mixin ho default amin'ny tsanganana mitovy tsy misy habe voafaritra.
Content, Reboot, sns
-
RFS dia alefa amin'ny alàlan'ny default. Ny lohateny mampiasa ny
font-size()
mixin dia hanitsy ho azyfont-size
ny haavony miaraka amin'ny seranan-tsambo. Ity endri-javatra ity dia nifidy tamin'ny v4. -
MafanaNamboarina ny typography asehonay mba hanoloana ny
$display-*
fari-piainanay sy ny$display-font-sizes
sarintany Sass. Nesorina ihany koa ny$display-*-weight
fari-piainan'ny tsirairay ho an'ny s tokana$display-font-weight
ary namboarinafont-size
. -
Nanampy
.display-*
habe vaovao roa,.display-5
ary.display-6
. -
Ny rohy dia tsipihina amin'ny alàlan'ny default (fa tsy eo amin'ny hover fotsiny), raha tsy hoe anisan'ny singa manokana.
-
Tabilao novolavolaina mba hamelombelona ny fomban-dry zareo ary hanorina azy ireo indray miaraka amin'ny fari-piainan'ny CSS mba hifehezana bebe kokoa ny fanaingoana.
-
MafanaTsy mandova fomba intsony ny latabatra misy akany.
-
Mafana
.thead-light
ary.thead-dark
alatsaka ho an'ny.table-*
kilasy variana izay azo ampiasaina amin'ny singa latabatra rehetra (thead
,tbody
,tfoot
,tr
,th
arytd
). -
MafanaNy
table-row-variant()
mixin dia novana anaranatable-variant()
ary tsy manaiky afa-tsy 2 parameter:$color
(anarana loko) sy$value
(kaody loko). Ny loko sisin-tany sy ny loko lantom-peo dia kajy ho azy mifototra amin'ny fari-piainan'ny latabatra. -
Zarao ho
-y
sy-x
. -
MafanaNiala
.pre-scrollable
kilasy. Jereo ny #29135 -
Mafana
.text-*
tsy manampy fanjakana hover sy fifantohana amin'ny rohy intsony ny utility..link-*
azo ampiasaina kosa ny kilasy mpanampy. Jereo ny #29267 -
MafanaNiala
.text-justify
kilasy. Jereo ny #29793 -
Mafana
<hr>
ampiasaina ankehitriny ny singaheight
fa tsyborder
hanohanana tsara kokoa nysize
toetra. Izany koa dia mamela ny fampiasana fitaovana padding mba hamoronana fisarahana matevina kokoa (oh,<hr class="py-1">
). -
Avereno amboarina
padding-left
ho .<ul>
_ _<ol>
40px
2rem
-
Nampiana
$enable-smooth-scroll
, izay mihatrascroll-behavior: smooth
maneran-tany—afa-tsy ho an'ireo mpampiasa mangataka ny fampihenana ny hetsika amin'ny alalan'nyprefers-reduced-motion
fangatahan'ny media. Jereo ny #31877
RTL
- Ny fari-pitsipika marindrano voafaritra, ny fitaovana ary ny mixins dia novana anarana mba hampiasana toetra lojika toy ny hita ao amin'ny fandrindrana flexbox—oh,
start
aryend
ho solon'nyleft
syright
.
teny
-
Nampiana endrika mitsingevana vaovao! Nampiroborobo ny ohatra etikety mitsingevana izahay ho singa endrika tohana tanteraka. Jereo ny pejy etikety mitsingevana vaovao.
-
Mafana Singa endrika teratany sy fanao mahazatra. Natambatra ny boaty, radio, voafantina, ary ny fampidirana hafa izay nanana kilasy teratany sy mahazatra ao amin'ny v4. Ankehitriny dia saika ny singa rehetra amin'ny endrika dia efa mahazatra tanteraka, ny ankamaroany dia tsy mila HTML manokana.
.custom-control.custom-checkbox
dia izao.form-check
..custom-control.custom-custom-radio
dia izao.form-check
..custom-control.custom-switch
dia izao.form-check.form-switch
..custom-select
dia izao.form-select
..custom-file
ary.form-file
nosoloina fomba fanao eo ambonin'ny.form-control
..custom-range
dia izao.form-range
.- Nandatsaka teratany
.form-control-file
ary.form-control-range
.
-
MafanaNilatsaka
.input-group-append
ary.input-group-prepend
. Afaka manampy bokotra fotsiny ianao izao ary.input-group-text
ho zanaka mivantana amin'ny vondrona fampidirana. -
Ny sisin-tany tsy hita efa ela amin'ny vondrona fampidirana miaraka amin'ny tsikombakomba amin'ny valin'ny fanamarinana dia raikitra ihany amin'ny alàlan'ny fampidirana
.has-validation
kilasy fanampiny amin'ny vondrona fampidirana misy fanamarinana. -
Mafana Nandatsaka kilasy fandrindrana manokana ho an'ny rafitra grid-tsika. Ampiasao ny tambajotra sy ny fitaovana ampiasainay fa tsy ny
.form-group
,.form-row
, na.form-inline
. -
MafanaMila
.form-label
. -
Mafana
.form-text
no sets intsonydisplay
, mamela anao hamorona inline na hanakana lahatsoratra fanampiana araka izay irinao amin'ny fanovana ny singa HTML. -
Ny fanaraha-maso ny endrika dia tsy ampiasaina raikitra intsony
height
raha azo atao, fa manemotra nymin-height
fanatsarana ny fanamboarana sy ny fampifanarahana amin'ny singa hafa. -
Tsy mihatra amin'ny
<select>
s miaraka amin'nymultiple
. -
Ny rakitra Sass loharano narindra indray eo ambanin'ny
scss/forms/
, ao anatin'izany ny fomba vondrona fampidirana.
singa
- Sanda mitambatra ho an'ny fanairana, mofo, karatra, fidinana ambany, vondrona lisitra, modals
padding
, popover, ary toro-hevitra mifototra amin'ny$spacer
fari-piainantsika. Jereo ny #30564 .
angorodao
- Nampiana singa accordion vaovao .
fanairana
-
Misy ohatra misy kisary izao ny fanairana .
-
Nesorina ny fomba fanao ho an'ny
<hr>
s isaky ny fanairana satria efa mampiasacurrentColor
.
Badges
-
MafanaNandao ny
.badge-*
kilasy loko rehetra ho an'ny fitaovana afara (ohatra, fampiasana.bg-primary
fa tsy.badge-primary
). -
MafanaNilatsaka
.badge-pill
- ampiasao ny.rounded-pill
fitaovana fa tsy. -
MafanaNesorina ny fomba fantson-drivotra sy fifantohana ho an'ny
<a>
singa<button>
. -
Nitombo padding default ho an'ny badge avy amin'ny
.25em
/.5em
mankany.35em
/.65em
.
Mofo
-
Nanatsotra ny endriky ny mofon-mofo mahazatra amin'ny alàlan'ny fanesorana
padding
,background-color
, aryborder-radius
. -
Nampiana fananana mahazatra CSS vaovao
--bs-breadcrumb-divider
ho an'ny fanamboarana mora nefa tsy mila mamerina ny CSS.
bokotra
-
Mafana Ny bokotra toggle , miaraka amin'ny boaty na radio, dia tsy mila JavaScript intsony ary manana marika vaovao. Tsy mila singa famonosana intsony izahay, ampio
.btn-check
amin'ny<input>
, ary ampifandraiso amin'ny.btn
kilasy rehetra ao amin'ny<label>
. Jereo ny #30650 . Ny antontan-taratasy momba izany dia nifindra avy amin'ny pejin'ny Buttons mankany amin'ny fizarana Forms vaovao. -
Mafana Hiverina
.btn-block
any amin'ny utilities. Raha tokony hampiasaina.btn-block
amin'ny.btn
, fonosy amin'ny bokotra.d-grid
ary.gap-*
fitaovana iray hanalana azy ireo araka izay ilaina. Miverena any amin'ny kilasy mandray andraikitra mba hifehezana bebe kokoa azy ireo. Vakio ny doka ho an'ny ohatra sasany. -
Nohavaozina ny anay
button-variant()
sy nybutton-outline-variant()
mixins hanohanana masontsivana fanampiny. -
Bokotra nohavaozina mba hiantohana ny fitomboan'ny fifanoherana amin'ny hover sy ny fanjakana mavitrika.
-
Ny bokotra kilemaina izao dia manana
pointer-events: none;
.
KARATRA ARA-BAIBOLY
-
MafanaNidina
.card-deck
ho an'ny grid-nay. Afangaro amin'ny kilasin'ny tsanganana ny karatrao ary ampio.row-cols-*
fitoeran'entana ho an'ny ray aman-dreny hamerenana ny tokotanin'ny karatra (saingy manana fifehezana bebe kokoa amin'ny fampifanarahana mamaly). -
MafanaNidina
.card-columns
ho an'ny Masonry. Jereo ny #28922 . -
MafanaNosoloina singa
.card
akorandriaka vaovao ny akorandriaka mifototra .
Carousel
-
Nampiana
.carousel-dark
karazany vaovao ho an'ny lahatsoratra maizina, fanaraha-maso ary tondro (tsara ho an'ny fiaviana maivana kokoa). -
Nosoloina kisary chevron ho an'ny fanaraha-maso carousel miaraka amin'ny SVG vaovao avy amin'ny kisary Bootstrap .
bokotra akaiky
-
MafanaNovana anarana
.close
ho.btn-close
anarana tsy dia mahazatra. -
Ny bokotra akaiky izao dia mampiasa
background-image
(SVG mipetaka) fa tsy×
ao amin'ny HTML, mamela ny fanamboarana mora kokoa tsy mila hikasika ny marikao. -
Nampiana
.btn-close-white
variana vaovao izay ampiasainafilter: invert(1)
ahafahana mampifanohitra kokoa ny kisary amin'ny fiaviana maizina kokoa.
firodanan'ny
- Nesorina ny scroll anchorion ho an'ny accordions.
Dropdowns
-
Nampiana
.dropdown-menu-dark
karazany vaovao sy ny fari-piainana mifandraika amin'ny fanidiana maizimaizina amin'ny fangatahana. -
Nampiana variable vaovao ho an'ny
$dropdown-padding-x
. -
Nohamaizinina ny mpizara midina mba hanatsara ny fifanoherana.
-
MafanaNy hetsika rehetra ho an'ny fampidinana dia atomboka amin'ny bokotra toggle midina ary avy eo miboiboika mankany amin'ny singa ray.
-
Ny menus dropdown izao dia manana
data-bs-popper="static"
toetra napetraka rehefa static ny toerana misy ny dropdown, na ao amin'ny navbar ny fidinana. Nampidirin'ny JavaScript-nay izany ary manampy anay hampiasa fomba fanao mahazatra nefa tsy manelingelina ny toeran'i Popper. -
MafanaSafidy
flip
nilatsaka ho an'ny plugin dropdown ho an'ny konfigurasi Popper teratany. Azonao atao izao ny manafoana ny fihetsika mivadika amin'ny alàlan'ny fandefasana array tsy misy na inona na inona ho an'nyfallbackPlacements
safidy amin'ny modifier flip . -
Ny menio midina dia azo kitihina miaraka amin'ny
autoClose
safidy vaovao hifehezana ny fitondran-tena manakaiky ny fiara . Azonao atao ny mampiasa ity safidy ity hanaiky ny kitiho ao anatiny na ivelan'ny menio midina mba hahatonga azy hifampiraharaha. -
Ny dropdowns izao dia manohana
.dropdown-item
s voafono<li>
s.
Jumbotron
- MafanaNidina ny singa jumbotron satria azo averina amin'ny fitaovana. Jereo ny ohatra Jumbotron vaovao ho an'ny demo.
Vondrona lisitra
- Nampiana
.list-group-numbered
mpanova vaovao amin'ny lisitra vondrona.
Navs sy tabs
- Nampiana
null
variables vaovao ho an'nyfont-size
,font-weight
,color
, ary:hover
color
ny.nav-link
kilasy.
Navbars
- MafanaNy Navbars izao dia mitaky kaontenera ao anatiny (mba hanatsorana ny fepetra takian'ny elanelana sy CSS ilaina).
- MafanaTsy
.active
azo ampiharina amin'ny.nav-item
s intsony ny kilasy, tsy maintsy ampiharina mivantana amin'ny.nav-link
s.
Offcanvas
- Nampiana ny singa offcanvas vaovao .
Pagination
-
Ny rohin'ny fanoharana izao dia efa azo namboarina
margin-left
izay mihodinkodina mavitrika amin'ny zoro rehetra rehefa misaraka. -
Nampiana
transition
s amin'ny rohy pagination.
Popovers
-
Mafana
.arrow
Novana anarana ho ao amin'ny maodely popover.popover-arrow
default. -
whiteList
Safidy novana anarana hoallowList
.
Spinners
-
Manome voninahitra izao ny Spinners
prefers-reduced-motion: reduce
amin'ny fanalefahana ny animation. Jereo ny #31882 . -
Nohatsaraina ny fampifanarahana mitsangana spinner.
Toasts
-
Ny toast izao dia azo apetraka ao amin'ny a
.toast-container
miaraka amin'ny fanampian'ny fitaovana fametrahana toerana . -
Nanova ny faharetan'ny toast ho 5 segondra.
-
Nesorina
overflow: hidden
tamin'ny toast ary nosoloinaborder-radius
s mety misycalc()
fiasa.
Tooltips
-
MafanaNovana anarana
.arrow
ho.tooltip-arrow
ao amin'ny maodelin'ny toro-lalana mahazatra. -
MafanaNy sandan'ny default ho an'ny
fallbackPlacements
dia novaina mba['top', 'right', 'bottom', 'left']
hametrahana singa popper tsara kokoa. -
Mafana
whiteList
Safidy novana anarana hoallowList
.
Asa vaventy
-
MafanaNanova anarana fitaovana maromaro mba hampiasana anarana lojika fa tsy anarana tari-dalana miaraka amin'ny fanampiana RTL:
- Novana anarana
.left-*
sy.right-*
ho.start-*
ary.end-*
. - Novana anarana
.float-left
sy.float-right
ho.float-start
ary.float-end
. - Novana anarana
.border-left
sy.border-right
ho.border-start
ary.border-end
. - Novana anarana
.rounded-left
sy.rounded-right
ho.rounded-start
ary.rounded-end
. - Novana anarana
.ml-*
sy.mr-*
ho.ms-*
ary.me-*
. - Novana anarana
.pl-*
sy.pr-*
ho.ps-*
ary.pe-*
. - Novana anarana
.text-left
sy.text-right
ho.text-start
ary.text-end
.
- Novana anarana
-
MafanaDisables négatif by default.
-
Nampiana
.bg-body
kilasy vaovao ho an'ny fametrahana haingana ny<body>
'background' ho singa fanampiny. -
Nampiana fampiasa toerana vaovao ho an'ny
top
,right
,bottom
, aryleft
. Ny sanda dia misy0
,50%
, ary100%
ho an'ny fananana tsirairay. -
Nampiana vaovao
.translate-middle-x
&.translate-middle-y
kojakoja ho an'ny singa mitsivalana na mitsangana afovoany / raikitra. -
Nampiana
border-width
fitaovana vaovao . -
MafanaNovana anarana
.text-monospace
ho.font-monospace
. -
MafanaNesorina
.text-hide
satria fomba efa tranainy amin'ny fanafenana lahatsoratra tsy tokony hampiasaina intsony. -
Fitaovana fanampiny
.fs-*
ho an'nyfont-size
kojakoja (miaraka amin'ny RFS afaka). Ireo dia mampiasa mitovy amin'ny lohatenin'ny HTML (1-6, lehibe ka hatramin'ny kely), ary azo ovaina amin'ny alàlan'ny sarintany Sass. -
MafanaUtilities
.font-weight-*
novana anarana.fw-*
ho fohy sy tsy miovaova. -
MafanaUtilities
.font-style-*
novana anarana.fst-*
ho fohy sy tsy miovaova. -
Nampiana
.d-grid
mba hampisehoana kojakoja sy kojakoja vaovaogap
(.gap
) ho an'ny CSS Grid sy flexbox layout. -
MafanaNesorina
.rounded-sm
syrounded-lg
, ary nampiditra ambaratonga vaovao amin'ny kilasy,.rounded-0
ho.rounded-3
. Jereo ny #31687 . -
Nampiana
line-height
fitaovana vaovao:.lh-1
,.lh-sm
,.lh-base
ary.lh-lg
. Jereo eto . -
Nafindra ny
.d-none
fitaovana ao amin'ny CSS mba hanome lanja bebe kokoa noho ny fampiratiana hafa. -
Nanitatra ny
.visually-hidden-focusable
mpanampy mba hiasa amin'ny kaontenera, mampiasa:focus-within
.
mpanampy
-
Mafana Ny mpanampy embed mandray andraikitra dia novana ho mpanampy amin'ny ratio miaraka amin'ny anaran'ny kilasy vaovao sy fitondran-tena nohatsaraina, ary koa ny fari-piadidiana CSS manampy.
- Ny kilasy dia novana anarana mba hiova
by
amin'nyx
lafiny lafiny. Ohatra,.ratio-16by9
izao.ratio-16x9
. - Nafoinay ny
.embed-responsive-item
mpifidy vondrona sy singa ho solon'ny.ratio > *
mpifidy tsotra kokoa. Tsy mila kilasy intsony, ary ny mpanampy ratio dia miasa amin'ny singa HTML rehetra. - Ny
$embed-responsive-aspect-ratios
sarintany Sass dia novana anarana$aspect-ratios
ary nohamafisina ny sandany mba hampidirana ny anaran'ny kilasy sy ny isan-jato hokey: value
mpivady. - Ny varimbazaha CSS dia novolavolaina ary ampidirina ho an'ny sanda tsirairay ao amin'ny sarintany Sass. Ovay ny
--bs-aspect-ratio
fari-pitsipika eo amin'ny.ratio
mba hamoronana aspect ratio manokana .
- Ny kilasy dia novana anarana mba hiova
-
Mafana Ny kilasy "mpamaky efijery" dia kilasy "miafina hita maso" ankehitriny .
- Nanova ny rakitra Sass avy
scss/helpers/_screenreaders.scss
amin'nyscss/helpers/_visually-hidden.scss
- Novana anarana
.sr-only
ary.sr-only-focusable
ho.visually-hidden
ary.visually-hidden-focusable
- Novana anarana
sr-only()
sysr-only-focusable()
mixins hovisually-hidden()
aryvisually-hidden-focusable()
.
- Nanova ny rakitra Sass avy
-
bootstrap-utilities.css
izao koa dia ahitana ny mpanampy anay. Tsy mila ampidirina amin'ny fanamboarana manokana intsony ny mpanampy.
JavaScript
-
Nandao ny fiankinan-doha amin'ny jQuery ary namerina nanoratra plugins mba ho ao amin'ny JavaScript mahazatra.
-
MafanaNy toetran'ny data ho an'ny plugin JavaScript rehetra dia nomena anarana mba hanavahana ny fiasa Bootstrap amin'ny antoko fahatelo sy ny kaody anao manokana. Ohatra, mampiasa isika
data-bs-toggle
fa tsydata-toggle
. -
Ny plugins rehetra izao dia afaka manaiky mpifidy CSS ho hevitra voalohany. Azonao atao ny mandefa singa DOM na mpifidy CSS manan-kery mba hamoronana ohatra vaovao momba ny plugin:
const modal = new bootstrap.Modal('#myModal') const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-
popperConfig
azo ampitaina ho toy ny fiasa izay manaiky ny config Popper default an'ny Bootstrap ho toy ny tohan-kevitra, mba hahafahanao manambatra an'io config default io amin'ny lalanao. Mihatra amin'ny dropdowns, popovers, ary tooltips. -
Ny sandan'ny default ho an'ny
fallbackPlacements
dia novaina['top', 'right', 'bottom', 'left']
ho fametrahana tsara kokoa ny singa Popper. Mihatra amin'ny dropdowns, popovers, ary tooltips. -
Nesorina tamin'ny fomba static ho an'ny daholobe toy ny
_getInstance()
→getInstance()
.