Ithuthela ku-v4
I-Bootstrap 4 iwukubhala kabusha okukhulu kwayo yonke iphrojekthi. Izinguquko eziphawuleka kakhulu zifingqiwe ngezansi, zilandelwa izinguquko eziqondile ezingxenyeni ezifanele.
Izinguquko ezinzile
Ukusuka ku-Beta 3 kuya ekukhishweni kwethu okuzinzile kwe-v4.x, azikho izinguquko eziphukayo, kodwa kukhona izinguquko eziphawulekayo.
Ukuphrinta
-
Izinsiza zokuphrinta eziphukile ezilungisiwe. Ngaphambilini, ukusebenzisa
.d-print-*
ikilasi kwakuzoqeda ngokungalindelekile esinye.d-*
isigaba. Manje, afanisa nezinye izinsiza zethu zokubonisa futhi asebenza kuleyo midiya kuphela (@media print
). -
Kunwetshwe izinsiza zokubonisa zokuphrinta ezitholakalayo ukuze zifane nezinye izinsiza. I-Beta 3 nangaphezulu babenayo kuphela
block
,inline-block
,inline
, kanyenone
. I- v4 ezinzile yengeziweflex
,inline-flex
,table
,table-row
, kanyetable-cell
. -
Ukunikezwa kokuhlola kuqala kokuphrinta kuzo zonke iziphequluli ezinezitayela zokuphrinta ezintsha ezicacisa
@page
size
.
I-Beta 3 iyashintsha
Ngenkathi i-Beta 2 ibone inqwaba yezinguquko zethu eziphukayo ngesikhathi sesigaba se-beta, kodwa sisenokumbalwa obekudingeka kukhulunywe ngakho ekukhishweni kwe-Beta 3. Lezi zinguquko zisebenza uma uthuthukela ku-Beta 3 usuka ku-Beta 2 nanoma iyiphi inguqulo endala ye-Bootstrap.
Okunhlobonhlobo
- Kukhishwe
$thumbnail-transition
okuguquguqukayo okungasetshenzisiwe. Besingashintshi lutho, ngakho bekuyikhodi eyengeziwe. - Iphakheji ye-npm ayisafaki noma yimaphi amafayela ngaphandle kwamafayela ethu omthombo kanye ne-dist; uma ubuthembele kuzo futhi ubusebenzisa izikripthi zethu
node_modules
ngefolda, kufanele uvumelanise ukuhamba kwakho komsebenzi.
Amafomu
-
Bhala kabusha kokubili amabhokisi okuhlola angokwezifiso nazenzakalelayo kanye nemisakazo. Manje, bobabili banesakhiwo se-HTML esifanayo (ingaphandle
<div>
nezelamani<input>
kanye<label>
) kanye nezitayela zesakhiwo esifanayo (okuzenzakalelayo okustakiwe, okuhambisana nekilasi lesilungisi). Lokhu kusivumela ukuthi senze ilebula ngesitayela ngokusekelwe esimweni sokufakwayo, ukwenza lula ukusekelwadisabled
kwesibaluli (ngaphambilini obekudinga isigaba sabazali) futhi sikusekele kangcono ukuqinisekiswa kwefomu lethu.Njengengxenye yalokhu, sishintshe i-CSS yokuphatha ama-multiples
background-image
kumabhokisi okuhlola amafomu angokwezifiso namarediyo. Ngaphambilini, into manje ekhishiwe.custom-control-indicator
yayinombala wangemuva, i-gradient, nesithonjana se-SVG. Ukwenza ngendlela oyifisayo i-gradient yangemuva kwakusho ukumiselela zonke lezo ngaso sonke isikhathi lapho udinga ukushintsha okukodwa. Manje,.custom-control-label::before
sinokugcwalisa kanye negradient futhi.custom-control-label::after
siphatha isithonjana.Ukuze wenze ukuhlola kwangokwezifiso emgqeni, engeza
.custom-control-inline
. -
Isikhethi esibuyekeziwe samaqembu ezinkinobho ezisuselwe kokokufaka. Esikhundleni
[data-toggle="buttons"] { }
sesitayela nokuziphatha, sisebenzisadata
isibaluli ekuziphatheni kwe-JS kuphela futhi sithembele.btn-group-toggle
ekilasini elisha ukwenza isitayela. -
Kukhishwe
.col-form-legend
kuvumela okuthuthukisiwe kancane.col-form-label
. Le ndlela.col-form-label-sm
futhi.col-form-label-lg
ingasetshenziswa ezintweni<legend>
kalula. -
Okokufaka kwamafayela ngokwezifiso kuthole ushintsho
$custom-file-text
kokuhluka kwawo kwe-Sass. Ayiseyona imephu ye-Sass efakwe esidlekeni futhi manje inika amandla iyunithi yezinhlamvu eyodwa kuphela—Browse
inkinobho njengoba manje sekuwukuphela kwento-mbumbulu ekhiqizwe ku-Sass yethu. UmbhaloChoose file
manje uvela ku-.custom-file-label
.
Amaqembu okokufaka
-
Ama-addon eqembu lokokufaka manje aqondene nokubekwa kwawo ngokuhlobene nokokufaka. Sehlile
.input-group-addon
futhi.input-group-btn
emakilasini amabili amasha,.input-group-prepend
futhi.input-group-append
. Kufanele usebenzise isithasiselo ngokusobala noma ulungiselele manje, wenze ingxenye enkulu ye-CSS yethu ibe lula. Ngaphakathi kwe-append noma lungiselela, beka izinkinobho zakho njengoba zingaba khona kwenye indawo, kodwa goqa umbhalo ngo-.input-group-text
. -
Izitayela zokuqinisekisa manje ziyasekelwa, njengoba kunjalo nokokufaka okuningi (yize ungaqinisekisa okokufaka okukodwa kuphela eqenjini ngalinye).
-
Amakilasi okulinganisa kufanele abe kumzali
.input-group
hhayi kuma-elementi efomu ngalinye.
I-Beta 2 iyashintsha
Ngenkathi siku-beta, sihlose ukungabi nezinguquko eziphukayo. Nokho, izinto azihambi njengoba bekuhleliwe. Ngezansi izinguquko ezihamba phambili okufanele uzikhumbule lapho usuka ku-Beta 1 uye ku-Beta 2.
Ukuphuka
- Okuguquguqukayo okususiwe
$badge-color
kanye nokusetshenziswa kwayo ku-.badge
. Sisebenzisa umsebenzi wokugqama kombala ukuze sikhethecolor
okusekelwe kokuthibackground-color
, ngakho okuhlukile akudingekile. grayscale()
Umsebenzi oqanjwe kabushagray()
ukuze ugweme ukungqubuzanagrayscale
nesihlungi somdabu se-CSS.- Kuqanjwe kabusha
.table-inverse
,.thead-inverse
, futhi.thead-default
kuya.*-dark
futhi.*-light
, ukufanisa izikimu zethu zombala ezisetshenziswa kwenye indawo. - Amathebula aphendulayo manje akhiqiza amakilasi ephoyinti ngalinye legridi. Lokhu kwehlukana ku-Beta 1 ngoba
.table-responsive
obukade uyisebenzisa kufana kakhulu.table-responsive-md
. Manje ungasebenzisa.table-responsive
noma.table-responsive-{sm,md,lg,xl}
njengoba kudingeka. - Usekelo lwe-Bower eyehlisiwe njengoba umphathi wephakheji wehlisiwe kwezinye izinto (isb, Intambo noma i-npm). Bona i-bower/bower#2298 ukuze uthole imininingwane.
- I-Bootstrap isadinga i-jQuery 1.9.1 noma ngaphezulu, kodwa uyelulekwa ukuthi usebenzise inguqulo 3.x njengoba iziphequluli ezisekelwa yi-v3.x kuyizona ezisekelwa yi-Bootstrap futhi i-v3.x inokulungiswa okuthile kwezokuphepha.
.form-control-label
Kukhishwe ikilasi elingasetshenzisiwe . Uma uye wasebenzisa lesi sigaba, bekuyimpinda.col-form-label
yekilasi elimise maphakathi nendawo ngokuthi a<label>
nokokufaka okuhlotshaniswa naso kuzakhiwo zefomu elivundlile.- Kushintshwe i
color-yiq
-mixin esuka kumxube ohlanganisacolor
isakhiwo ukuze isebenze ebuyisela inani, okukuvumela ukuthi uyisebenzisele noma iyiphi impahla ye-CSS. Isibonelo, esikhundleni sokuthicolor-yiq(#000)
, ungabhalacolor: color-yiq(#000);
.
Amaphuzu avelele
- Kwethulwe
pointer-events
ukusetshenziswa okusha kumamodeli. Ingaphandle.modal-dialog
idlula emicimbinipointer-events: none
enokuphathwa kokuchofoza ngokwezifiso (okwenza ukwazi ukuvele ulalele.modal-backdrop
kunoma yikuphi ukuchofoza), bese iphikisana nalokho okwangempela.modal-content
nge-pointer-events: auto
.
Isifinyezo
Nazi izinto zamathikithi amakhulu ozofuna ukuzazi lapho usuka ku-v3 uye ku-v4.
Usekelo lwesiphequluli
- Kwehlisiwe usekelo lwe-IE8, IE9, ne-iOS 6. I-v4 manje isiyi-IE10+ ne-iOS 7+ kuphela. Kumasayithi adinga enye yalezo, sebenzisa i-v3.
- Kwengezwe usekelo olusemthethweni lwe-Android v5.0 Lollipop's Browser kanye neWebView. Izinguqulo zangaphambili zeSiphequluli se-Android ne-WebView zihlala zisekelwa ngokungekho emthethweni kuphela.
Izinguquko zomhlaba
- I-Flexbox inikwe amandla ngokuzenzakalelayo. Ngokuvamile lokhu kusho ukusuka ekuntanteni nokunye okwengeziwe kuzo zonke izingxenye zethu.
- Ushintshe ukusuka kokuthi Okuncane ukuya kwa - Sass ukuze uthole amafayela wethu we-CSS ongumthombo.
- Ishintshelwe ekubeni
px
iyunithirem
yethu eyinhloko ye-CSS, nakuba amaphikseli asasetshenziselwa imibuzo yemidiya nokuziphatha kwegridi njengoba izimbobo zokubuka zedivayisi zingathintwa usayizi wohlobo. - Usayizi wefonti womhlaba wonke ukhuphuke ukusuka
14px
ku-16px
. - Kubuyekezwe ama-grid tiers ukuze kwengezwe inketho yesihlanu (ikhuluma namadivayisi amancane
576px
ngaphansi nangaphansi) futhi yasusa i--xs
infix kulawo makilasi. Isibonelo:.col-6.col-sm-4.col-md-3
. - Kushintshwe itimu yokuzikhethela ehlukene ngezinketho ezilungisekayo ngokusebenzisa okuguquguqukayo kwe-SCSS (isb,
$enable-gradients: true
). - Yakha isistimu eshintshiwe ukuze usebenzise uchungechunge lwemibhalo ye-npm esikhundleni se-Grunt. Bona
package.json
yonke imibhalo, noma iphrojekthi yethu ifundelwe izidingo zokuthuthukiswa kwendawo. - Ukusetshenziswa okungaphenduli kwe-Bootstrap akusasekelwa.
- Kwehliswe i-Customizer eku-inthanethi ukuze ivune amadokhumenti okusetha abanzi kanye nezakhiwo ezenziwe ngokwezifiso.
- Kwengezwe inqwaba yamakilasi ensiza entsha yamapheya enani lempahla ye-CSS kanye nezinqamuleli zesikhala semajini/sokupheda.
Isistimu yegridi
- Ihanjiswe ku-flexbox.
- Kwengezwe usekelo lwe-flexbox kumamiksi egridi namakilasi achazwe ngaphambilini.
- Njengengxenye ye-flexbox, kufakwe usekelo lwamakilasi okuqondanisa aqondile navundlile.
- Kubuyekezwe amagama ekilasi legridi kanye nesigaba segridi esisha.
- Kwengezwe i-
sm
grid tier entsha ngezansi768px
ukuze uthole ukulawula kwe-granular okwengeziwe. Manje sinakhoxs
,sm
,md
,lg
, kanyexl
. Lokhu kusho futhi ukuthi wonke ama-tier akhushulelwe izinga elilodwa (ngakho.col-md-6
ku-v3 manje.col-lg-6
isiku-v4). xs
amakilasi egridi ashintshiwe ukuze angadingi i-infix ukuze imele ngokunembe kakhudlwana ukuthi aqala ukusebenzisa izitayelamin-width: 0
hhayi inani le-pixel elimisiwe. Esikhundleni sokuthi.col-xs-6
, manje.col-6
. Wonke amanye ama-grid tiers adinga i-infix (isb,sm
).
- Kwengezwe i-
- Kubuyekezwe osayizi begridi, imiksi, neziguquguqukayo.
- Ama-gutter egridi manje anemephu ye-Sass ukuze ukwazi ukucacisa ububanzi obuthile be-gutter endaweni ngayinye yokuhlukana.
- Kubuyekezwe imiksi yegridi ukuze kusetshenziswe
make-col-ready
imiksi yokulungiselela kanye nokusethamake-col
usayizi wekholomu ngayinye.flex
max-width
- Kushintshwe amaphoyinti okunqamula umbuzo wesistimu yegridi yemidiya nobubanzi besiqukathi ukuze kubhekelelwe isigaba segridi esisha futhi kuqinisekiswe ukuthi amakholomu ahlukaniswa ngokulinganayo
12
ngobubanzi bawo obukhulu. - Izindawo zokunqamuka kwegridi nobubanzi besiqukathi manje sesingathwa ngamamephu we-Sass (
$grid-breakpoints
kanye$container-max-widths
) esikhundleni sokumbalwa okuhlukile okuhlukile. Lezi zishintsha@screen-*
okuguquguqukayo ngokuphelele futhi zikuvumela ukuthi wenze ngokwezifiso ama-grid tiers. - Imibuzo yemidiya nayo ishintshile. Esikhundleni sokuphinda izimemezelo zemibuzo yethu yemidiya enenani elifanayo isikhathi ngasinye, manje sesine-
@include media-breakpoint-up/down/only
. Manje, esikhundleni sokubhala@media (min-width: @screen-sm-min) { ... }
, ungabhala@include media-breakpoint-up(sm) { ... }
.
Izingxenye
- Amaphaneli awisiwe, izithonjana, nemithombo yengxenye entsha ehlanganisa konke, amakhadi .
- Kwehliswe ifonti yesithonjana se-Glyphicons. Uma udinga izithonjana, ezinye izinketho yilezi:
- inguqulo ekhuphukayo ye- Glyphicons
- Izenzo
- Ifonti Awesome
- Bheka ikhasi elithi Nweba ukuze uthole uhlu lwezinye izindlela. Uneziphakamiso ezengeziwe? Sicela uvule udaba noma i-PR.
- Kwehliswe i-plugin ye-Affix jQuery.
- Sincoma ukuthi usebenzise
position: sticky
esikhundleni salokho. Bheka i-HTML5 Sicela ufake ukuze uthole imininingwane kanye nezincomo ezithile zokugcwalisa okuningi. Esinye isiphakamiso siwukusebenzisa@supports
umthetho wokuwusebenzisa (isb,@supports (position: sticky) { ... }
) - Uma ubusebenzisa i-Affix ukuze usebenzise izitayela ezengeziwe, okungezona
position
izitayela, ama-polyfill angase angasekeli icala lakho lokusebenzisa. Enye inketho yokusetshenziswa okunjalo umtapo wolwazi we -ScrollPos-Styler wenkampani yangaphandle .
- Sincoma ukuthi usebenzise
- Kwehliswe ingxenye ye-pager njengoba empeleni bekuyizinkinobho ezenziwe ngokwezifiso kancane.
- Kwenza kabusha cishe zonke izingxenye ukuze kusetshenziswe izikhethi zamakilasi ezingafakwanga esikhundleni sokukhetha izingane ezicaciswe kakhulu.
Ngengxenye
Lolu hlu lugqamisa izinguquko ezibalulekile ngengxenye phakathi kwe-v3.xx ne-v4.0.0.
Qalisa kabusha
Okusha ku-Bootstrap 4 Ukuqalisa Kabusha , ishidi lesitayela elisha elakhelwa kokuthi Normalise ngezitayela zethu zokusetha kabusha ezinemibono ethile. Izikhethi ezivela kuleli fayela zisebenzisa izici kuphela—awekho amakilasi lapha. Lokhu kuhlukanisa izitayela zethu zokusetha kabusha kuzitayela zengxenye yethu ukuze kusetshenziswe indlela ye-modular. Okunye ukusetha kabusha okubaluleke kakhulu lokhu okufaka phakathi box-sizing: border-box
ushintsho, ukusuka kumayunithi em
kuya rem
ezintweni eziningi, izitayela zesixhumanisi, nokusetha kabusha izinto eziningi zefomu.
Ukuthayipha
- Kuhanjiswe zonke
.text-
izinsiza_utilities.scss
kufayela. - Yehlisiwe
.page-header
njengoba izitayela zayo zingasetshenziswa ngezinsiza. .dl-horizontal
wehlisiwe. Esikhundleni salokho, sebenzisa.row
futhi<dl>
usebenzise amakilasi ekholomu yegridi (noma imiksi) kuyo<dt>
kanye<dd>
nezingane.- Ama-blockquotes adizayinwe kabusha, asusa izitayela zawo
<blockquote>
entweni aye esigabeni esisodwa,.blockquote
. Kwehliswe.blockquote-reverse
isilungisi sezinsiza zombhalo. .list-inline
manje idinga ukuthi izingane zayo zohlu lwezinto zibe nesigaba esisha.list-inline-item
esisetshenziswe kuzo.
Izithombe
- Iqanjwe kabusha
.img-responsive
kwaba.img-fluid
. - Iqanjwe kabusha
.img-rounded
kwaba.rounded
- Iqanjwe kabusha
.img-circle
kwaba.rounded-circle
Amathebula
- Cishe zonke izimo
>
zesikhethi zisusiwe, okusho ukuthi amathebula afakwe esidlekeni manje azothola ifa ngokuzenzakalela izitayela kubazali bawo. Lokhu kwenza kube lula kakhulu ukukhetha kwethu kanye nokwenza ngokwezifiso okungaba khona. - Iqanjwe kabusha
.table-condensed
kwaba.table-sm
ukuhambisana. - Kwengezwe
.table-inverse
inketho entsha. - Kwengezwe izilungisi zesihloko sethebula:
.thead-default
kanye.thead-inverse
. - Kuqanjwe kabusha amakilasi omongo ukuze abe
.table-
nesiqalo -. Ngakho.active
,.success
,.warning
,.danger
futhi , , , kanye ..info
_.table-active
.table-success
.table-warning
.table-danger
.table-info
Amafomu
- I-elementi ehanjisiwe isethwe kabusha
_reboot.scss
kufayela. - Iqanjwe kabusha
.control-label
kwaba.col-form-label
. - Kuqanjwe kabusha
.input-lg
futhi.input-sm
kuya.form-control-lg
futhi.form-control-sm
, ngokulandelana. - Amakilasi awehlisiwe
.form-group-*
ngenxa yokwenza lula. Sebenzisa.form-control-*
amakilasi esikhundleni manje. - Iwiswe
.help-block
futhi esikhundleni sayo kwafakwa.form-text
umbhalo wosizo weleveli yebhulokhi. Ngombhalo wosizo we-inline nezinye izinketho ezivumelana nezimo, sebenzisa amakilasi osizo afana.text-muted
. - Yehla
.radio-inline
futhi.checkbox-inline
. - Kuhlanganiswe
.checkbox
futhi.radio
kube kanye namakilasi.form-check
ahlukahlukene ..form-check-*
- Amafomu avundlile alungisiwe:
- Yehlisa
.form-horizontal
imfuneko yekilasi. .form-group
ayisasebenzi izitayela ezivela ku-.row
mixin, ngakho.row
-ke kuyadingeka manje ekuhlelweni kwegridi evundlile (isb,<div class="form-group row">
).- Kwengezwe
.col-form-label
ikilasi elisha kumalebula amaphakathi aqondile ano-.form-control
s. - Kwengezwe okusha
.form-row
kwezakhiwo zefomu elihlangene ngezigaba zegridi (shintshanisa eyakho.row
ukuze uthole u-a.form-row
bese uhamba).
- Yehlisa
- Ukwesekwa kwamafomu ngokwezifiso angeziwe (kumabhokisi okuhlola, imisakazo, okukhethiwe, nokokufaka kwefayela).
- Kufakwe esikhundleni
.has-error
,.has-warning
, kanye.has-success
namakilasi ngokuqinisekiswa kwefomu le-HTML5 kusetshenziswa ama-CSS:invalid
namakilasi:valid
-mbumbulu. - Iqanjwe kabusha
.form-control-static
kwaba.form-control-plaintext
.
Izinkinobho
- Iqanjwe kabusha
.btn-default
kwaba.btn-secondary
. - Ilahle
.btn-xs
ikilasi ngokuphelele njengoba.btn-sm
incane kakhulu kune-v3's. - Isici senkinobho ebabazekayo se-
button.js
plugin ye-jQuery silahliwe. Lokhu kuhlanganisa$().button(string)
nezindlela$().button('reset')
. Seluleka ukusebenzisa i-JavaScript encane yangokwezifiso esikhundleni salokho, ezoba nenzuzo yokuziphatha ngendlela ofisa ngayo.- Qaphela ukuthi ezinye izici ze-plugin (izinkinobho zokuhlola amabhokisi, izinkinobho zamarediyo, izinkinobho zokuguqula okukodwa) zigcinwe ku-v4.
- Shintsha izinkinobho'
[disabled]
zibe:disabled
njengoba i-IE9+ isekela:disabled
. Nokhofieldset[disabled]
kusadingeka ngenxa yokuthi ama-fieldsets omdabu akhubazekile aseyi-buggy ku-IE11 .
Iqembu lezinkinobho
- Bhala kabusha ingxenye nge-flexbox.
- Kususiwe
.btn-group-justified
. Njengokumiselela ungasebenzisa<div class="btn-group d-flex" role="group"></div>
njengesisonga ezizungeze izakhi nge-.w-100
. - Ulahle
.btn-group-xs
ikilasi ngokuphelele unikezwe ukususwa.btn-xs
. - Kukhishwe isikhala esisobala phakathi kwamaqembu ezinkinobho kumabha wamathuluzi enkinobho; sebenzisa izinsiza ze-margin manje.
- Amadokhumenti athuthukisiwe ukuze asetshenziswe nezinye izingxenye.
Okwehliswayo
- Kushintshwe kusukela kubakhethi babazali kuya kumakilasi ahlukene kuzo zonke izingxenye, izilungisi, njll.
- Izitayela zokudonsela phansi ezenziwe lula ukuze zingasahambisi ngemicibisholo ebheke phezulu noma eya phansi enamathiselwe kumenyu eyehlayo.
- Okwehliswayo kungakhiwa nge-
<div>
s noma<ul>
s manje. <a>
Yakha kabusha izitayela zokudonsela phansi kanye nemakhaphu ukuze unikeze usekelo olulula, olwakhelwe ngaphakathi<button>
lwezinto ezidonsela phansi nezisekelwe.- Iqanjwe kabusha
.divider
kwaba.dropdown-divider
. - Izinto ezidonsela phansi manje zidinga
.dropdown-item
. - Ukuguqula okwehlisayo akusadingi okubekela sobala
<span class="caret"></span>
; lokhu manje kunikezwa ngokuzenzakalelayo nge-CSS's::after
ku-.dropdown-toggle
.
Isistimu yegridi
- Kwengezwe i-breakpoint entsha
576px
yegridi njengokuthism
, okusho ukuthi manje sekunesamba sezigaba ezinhlanu (xs
,sm
,md
,lg
, kanyexl
). - Kuqanjwe kabusha amakilasi egridi ephendulayo ukusuka
.col-{breakpoint}-{modifier}-{size}
kuye kuye.{modifier}-{breakpoint}-{size}
kumakilasi egridi alula. - Amakilasi okuguqula nokudonsa kwehlisiwe amakilasi anamandla e -flexbox
order
. Isibonelo, esikhundleni sokuthi.col-8.push-4
futhi.col-4.pull-8
, ungasebenzisa.col-8.order-2
futhi.col-4.order-1
. - Kwengezwe amakilasi okusetshenziswa kwe-flexbox yesistimu yegridi nezingxenye.
Amaqembu ohlwini
- Bhala kabusha ingxenye nge-flexbox.
- Kuthathelwe
a.list-group-item
indawo ikilasi elisobala,.list-group-item-action
, lesixhumanisi sesitayela nezinguqulo zezinkinobho zezinto zeqembu. - Ikilasi
.list-group-flush
elingeziwe elizosetshenziswa namakhadi.
I-Modal
- Bhala kabusha ingxenye nge-flexbox.
- Uma kubhekwa ukuthuthela ku-flexbox, ukuqondanisa kwezithonjana zokucashisa kunhlokweni kungahle kwephuke njengoba singasasebenzisi okuntantayo. Okuqukethwe okuntantayo kuza kuqala, kodwa nge-flexbox akusenjalo. Buyekeza izithonjana zakho zokucashisa ukuthi zize ngemva kwezihloko ze-modal ukuze zilungiswe.
- Inketho
remote
(engase isetshenziselwe ukulayisha ngokuzenzakalela kanye nokujova okuqukethwe kwangaphandle kumodi) kanyeloaded.bs.modal
nomcimbi ohambisanayo ususiwe. Sincoma ukuthi usebenzise isifanekiso sohlangothi lweklayenti noma uhlaka olubophezela idatha, noma ushayele i-jQuery.load ngokwakho.
I-Navs
- Bhala kabusha ingxenye nge-flexbox.
- Kwehliswe cishe zonke
>
izikhethi ukuze kwenziwe isitayela kalula ngamakilasi angafakwanga. - Esikhundleni sezikhethi eziqondene ne-HTML ezifana
.nav > li > a
, sisebenzisa amakilasi ahlukene u-.nav
s,.nav-item
s, no-.nav-link
s. Lokhu kwenza i-HTML yakho ivumelane nezimo kakhulu ngenkathi kuletha ukwanda okungeziwe.
Ibha ye-Navbar
I-navbar ibhalwe kabusha ngokuphelele ku-flexbox ngokusekelwa okuthuthukisiwe kokuqondanisa, ukuphendula, nokwenza ngendlela oyifisayo.
- Impatho ephendulayo ye-navbar manje isisetshenziswa
.navbar
ekilasini ngendlela edingekayo.navbar-expand-{breakpoint}
lapho ukhetha ukuthi ugoqe kuphi ibha ye-navbar. Ngaphambilini lokhu bekuwukuguqulwa Okuncane okuguquguqukayo futhi kudinga ukubuyiselwa kabusha. .navbar-default
manje.navbar-light
, nakuba.navbar-dark
kusafana. Okukodwa kwalokhu kuyadingeka ku-navbar ngayinye. Nokho, lezi zigaba azisasethibackground-color
s; kunalokho zithinta kuphelacolor
.- Ama-Navbar manje adinga isimemezelo sangemuva sohlobo oluthile. Khetha ezinsizeni zethu zangemuva (
.bg-*
) noma usethe okwakho ngamakilasi akhanyayo/aphambene ngenhla ukuze wenze ngokwezifiso ubuhlanya . - Njengoba kunikezwe izitayela ze-flexbox, ama-navbar manje angasebenzisa izinsiza ze-flexbox ukuze uthole izinketho zokuqondanisa kalula.
.navbar-toggle
manje.navbar-toggler
futhi inezitayela ezahlukene kanye nemakhaphu yangaphakathi (akusekho amasekhondi amathathu<span>
).- Liyeke
.navbar-form
ikilasi ngokuphelele. Akusadingeki; esikhundleni salokho, vele usebenzise.form-inline
futhi usebenzise izinsiza ze-margin njengoba kudingeka. - Ama-Navbar awasafaki
margin-bottom
nomaborder-radius
ngokuzenzakalelayo. Sebenzisa izinsiza njengoba kudingeka. - Zonke izibonelo eziqukethe ama-navbar zibuyekeziwe ukuze zifake umaka omusha.
Amakhasi
- Bhala kabusha ingxenye nge-flexbox.
- Amakilasi acacile (
.page-item
,.page-link
) manje ayadingeka enzalweni ye-.pagination
s - Ishiye
.pager
ingxenye ngokuphelele njengoba ibingaphezu kancane kwezinkinobho zohlaka ezenziwe ngokwezifiso.
Iimvuthuluka zesinkwa
- Isigaba esicacile,
.breadcrumb-item
, manje siyadingeka enzalweni ye-.breadcrumb
s
Amalebula namabheji
- Kuhlanganiswe
.label
futhi.badge
kuhlukaniswe kusuka ku-<label>
elementi nokwenza lula izingxenye ezihlobene. - Kwengezwe
.badge-pill
njengesilungisi sokubukeka “kwephilisi” eliyindilinga. - Amabheji awasantanti ngokuzenzakalelayo emaqenjini ohlu nezinye izingxenye. Amakilasi ezinsiza manje ayadingeka kulokho.
.badge-default
Kwehlisiwe futhi.badge-secondary
kwengezwa kumakilasi okuguqula ingxenye asetshenziswa kwenye indawo.
Amaphaneli, izithonjana, nemithombo
Ilahliwe ngokuphelele engxenyeni yekhadi entsha.
Amaphaneli
.panel
kuya ku-.card
, manje yakhiwe nge-flexbox..panel-default
isusiwe futhi akukho okushintshwayo..panel-group
isusiwe futhi akukho okushintshwayo..card-group
akusikhona ukumiselela, kuhlukile..panel-heading
ku.card-header
.panel-title
ku.card-title
. Kuye ngokubukeka okufunayo, ungase futhi ufune ukusebenzisa izakhi zesihloko noma amakilasi (isb<h3>
,.h3
) noma izakhi ezigqamile noma amakilasi (isb<strong>
,<b>
,.font-weight-bold
). Qaphela ukuthi.card-title
, ngenkathi iqanjwe ngendlela efanayo, ikhiqiza ukubukeka okuhlukile kune-.panel-title
..panel-body
ku.card-body
.panel-footer
ku.card-footer
.panel-primary
,.panel-success
, ,.panel-info
,.panel-warning
, futhi.panel-danger
kwehlisiwe ku-.bg-
,.text-
, kanye.border
nezinsiza ezenziwe$theme-colors
kumephu yethu ye-Sass.
Inqubekelaphambili
- Kushintshwe
.progress-bar-*
amakilasi anomongo ngezinsiza.bg-*
. Ngokwesibonelo,class="progress-bar progress-bar-danger"
ibaclass="progress-bar bg-danger"
. - Kufakwe esikhundleni
.active
semishayo yenqubekelaphambili egqwayizayo ene-.progress-bar-animated
.
I-Carousel
- Kulungiswe kabusha yonke ingxenye ukuze kube lula ukuklama nokwenza isitayela. Sinezitayela ezimbalwa ongazibhala ngaphezulu, izinkomba ezintsha, nezithonjana ezintsha.
- Yonke i-CSS ayifakwanga isidleke futhi yaqanjwa kabusha, okuqinisekisa ukuthi ikilasi ngalinye linesiqalo esithi
.carousel-
.- Okwezinto ze-carousel,
.next
,.prev
,.left
, futhi.right
manje.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
, kanye.carousel-item-right
. .item
nayo manje.carousel-item
.- Ezilawulini ezandulele/ezilandelayo,
.carousel-control.right
futhi.carousel-control.left
manje.carousel-control-next
futhi.carousel-control-prev
, okusho ukuthi azisadingi isigaba sesisekelo esithile.
- Okwezinto ze-carousel,
- Isuse sonke isitayela esisabelayo, ihlehlisa izinsiza (isb, ukubonisa amagama-ncazo ezikhumulweni zokubuka ezithile) nezitayela zangokwezifiso njengoba kudingeka.
- Ukukhishwa kwesithombe okususiwe ezithombeni zezinto ze-carousel, kuhlehliselwa izinsiza.
- Kulungiswe isibonelo se-Carousel ukuze sifake umaka nezitayela ezintsha.
Amathebula
- Kususwe usekelo lwamatafula anesitayela esidleke. Zonke izitayela zethebula manje sezizuzwe njengefa ku-v4 kubakhethi abalula.
- Kwengezwe okuhlukile kwethebula eliphambene.
Izinsiza
- Bonisa, kufihliwe, nokuningi:
- Yenza izinsiza zokubonisa ziphendule (isb,
.d-none
kanyed-{sm,md,lg,xl}-none
). - Kwehliswe inqwaba yezinsiza zezinsiza zokubonisa
.hidden-*
ezintsha . Isibonelo, esikhundleni se- , sebenzisa . Kuqanjwe kabusha izinsiza ukuze kusetshenziswe isikimu sokuqamba isisetshenziswa esibonisiwe. Ulwazi olwengeziwe ngaphansi kwesigaba sezinsiza eziphendulayo saleli khasi..hidden-sm-up
.d-sm-none
.hidden-print
- Kungezwe
.float-{sm,md,lg,xl}-{left,right,none}
amakilasi okuntanta okuphendulayo futhi asusiwe.pull-left
futhi.pull-right
njengoba awasafuneki.float-left
futhi.float-right
.
- Yenza izinsiza zokubonisa ziphendule (isb,
- Uhlobo:
- Kwengezwe ukuhlukahluka okusabelayo kumakilasi ethu okuqondanisa umbhalo
.text-{sm,md,lg,xl}-{left,center,right}
.
- Kwengezwe ukuhlukahluka okusabelayo kumakilasi ethu okuqondanisa umbhalo
- Ukuqondanisa nesikhala:
- Kwengezwe imajini esabelayo emisha nezinsiza zokunamathisela kuzo zonke izinhlangothi, kanye nama-shorthand aqondile navundlile.
- Ukulayisha kwesikebhe okungeziwe kwezinsiza ze- flexbox .
- Yehliselwe ekilasini
.center-block
elisha.mx-auto
.
- I-Clearfix ibuyekeziwe ukuze ilahle usekelo lwezinguqulo zesiphequluli ezindala.
Imiksi yesiqalo somthengisi
Amamiksi esiqalo somthengisi we-Bootstrap 3 , aye ahoxiswa ku-v3.2.0, akhishiwe ku-Bootstrap 4. Njengoba sisebenzisa i -Autoprefixer , ayisadingeki.
Kukhishwe izingxube ezilandelayo : animation
, animation-delay
, animation-direction
, animation-duration
, animation-fill-mode
, animation-iteration-count
, animation-name
, animation-timing-function
, backface-visibility
, box-sizing
, content-columns
, hyphens
, opacity
, perspective
, perspective-origin
, rotate
, rotateX
, rotateY
, scale
, scaleX
, scaleY
, skew
, transform-origin
, transition-delay
, transition-duration
, transition-property
, transition-timing-function
, transition-transform
, translate
,translate3d
user-select
Amadokhumenti
Amadokhumenti ethu athole ukuthuthukiswa kulo lonke elasebhodini. Nakhu okuphansi phansi:
- Sisasebenzisa i-Jekyll, kodwa sinama-plugin kumxube:
bugify.rb
isetshenziselwa ukwenza kuhlu ngempumelelo okufakiwe ekhasini lesiphazamisi sesiphequluli .example.rb
iyimfoloko yangokwezifiso ye-highlight.rb
plugin ezenzakalelayo, evumela ukuphatha ikhodi yesibonelo kalula.callout.rb
iyimfoloko yangokwezifiso efanayo yalokho, kodwa yakhelwe ama-callouts ethu akhethekile amadokhumenti.- i-jekyll-toc isetshenziselwa ukukhiqiza ithebula lethu lokuqukethwe.
- Konke okuqukethwe kwamadokhumenti kubhalwe kabusha ku-Markdown (esikhundleni se-HTML) ukuze kube lula ukuhlela.
- Amakhasi aphinde ahlelwa ukuze kube nokuqukethwe okulula kanye nesigaba sesigaba esingeneka kakhudlwana.
- Sisuke ku-CSS evamile saya ku-SCSS ukuze sisebenzise ngokugcwele okuguquguqukayo kwe-Bootstrap, imiksi, nokuningi.
Izinsiza ezisabelayo
Konke @screen-
okuguquguqukayo kususiwe ku-v4.0.0. Sebenzisa i- media-breakpoint-up()
, media-breakpoint-down()
, noma media-breakpoint-only()
imiksi ye-Sass noma $grid-breakpoints
imephu ye-Sass esikhundleni salokho.
Izigaba zethu zezinsiza ezisabelayo zisusiwe kakhulu ngokuvuna display
izinsiza ezisobala.
- Amakilasi
.hidden
kanye.show
namakilasi asusiwe ngoba aphikisana ne-jQuery$(...).hide()
kanye$(...).show()
nezindlela. Kunalokho, zama ukuguqula[hidden]
isibaluli noma usebenzise izitayela ezisemgqeni ezifanastyle="display: none;"
nokuthistyle="display: block;"
. - Wonke
.hidden-
amakilasi asusiwe, londoloza izinsiza zokuphrinta eziqanjwe kabusha.- Kususiwe ku-v3:
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.visible-xs-block
.visible-xs-inline
.visible-xs-inline-block
.visible-sm-block
.visible-sm-inline
.visible-sm-inline-block
.visible-md-block
.visible-md-inline
.visible-md-inline-block
.visible-lg-block
.visible-lg-inline
.visible-lg-inline-block
- Kususiwe kuma-alpha e-v4:
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
- Kususiwe ku-v3:
- Izinsiza zokuphrinta azisaqali ngokuthi
.hidden-
noma.visible-
, kodwa nge-.d-print-
.- Amagama amadala:
.visible-print-block
,.visible-print-inline
,.visible-print-inline-block
,.hidden-print
- Amakilasi amasha:
.d-print-block
,.d-print-inline
,.d-print-inline-block
,.d-print-none
- Amagama amadala:
Kunokuba usebenzise .visible-*
amakilasi asobala, wenza into ibonakale ngokungafihli kulowo sayizi wesikrini. Ungahlanganisa .d-*-none
ikilasi elilodwa nekilasi elilodwa .d-*-block
ukuze ubonise into ethile kuphela ngesikhawu esinikeziwe samasayizi wesikrini (isb .d-none.d-md-block.d-xl-none
. kubonisa isici kuphela kumadivayisi aphakathi nendawo namakhulu).
Qaphela ukuthi izinguquko kuma-breakpoints egridi ku-v4 zisho ukuthi uzodinga ukuya endaweni eyodwa enkulu ukuze uzuze imiphumela efanayo. Amakilasi ensiza esabelayo amasha awazami ukwamukela izimo ezingajwayelekile lapho ukubonakala kwesici kungakwazi ukuvezwa njengobubanzi obubodwa obuhambisanayo bosayizi bembobo yokubuka; uzodinga ukusebenzisa i-CSS yangokwezifiso ezimweni ezinjalo.