Ukufudukela kwi-v4
I-Bootstrap 4 yinto enkulu yokuphinda ibhale yonke iprojekthi. Olona tshintsho luphawulekayo lushwankathelwa ngezantsi, lulandelwa lutshintsho oluthe ngqo kumacandelo afanelekileyo.
Ukuhamba ukusuka kwi-Beta 3 ukuya kwi-v4.0 yethu ezinzileyo, akukho tshintsho oluqhekezayo, kodwa kukho utshintsho oluphawulekayo.
-
Zilungisiwe izixhobo zoshicilelo ezaphukileyo. Ngaphambili, ukusebenzisa
.d-print-*
iklasi kuya kulawula ngokungalindelekanga naluphi na olunye.d-*
udidi. Ngoku, zihambelana nezinye izixhobo zethu zokubonisa kwaye zisebenza kuphela kumajelo eendaba (@media print
). -
Ukwandiswa kwezinto ezifumanekayo zokubonisa ushicilelo ukungqamanisa nezinye izinto eziluncedo. Beta 3 nangaphezulu babenayo kuphela
block
,inline-block
,inline
, kunyenone
. I-v4 ezinzileyo yongezweflex
,inline-flex
,table
,table-row
, kunyetable-cell
. -
Unikezelo olulungisiweyo loshicilelo kuzo zonke izikhangeli ezineendlela zoshicilelo ezitsha ezichaza
@page
size
.
Ngelixa i-Beta yesi-2 yabona ubuninzi botshintsho lwethu ngexesha lesigaba se-beta, kodwa sisenazo ezimbalwa ezifuna ukulungiswa kukhupho lwe-Beta 3. Olu tshintsho lusebenza ukuba uhlaziya kwiBeta 3 ukusuka kwiBeta 2 okanye naluphi na uhlobo oludala lweBootstrap.
- Kususwe umahluko ongasetyenziswanga
$thumbnail-transition
. Besingatshintshi nto, ngoko ibiyikhowudi eyongezelelweyo. - Iphakheji ye-npm ayisabandakanyi naziphi na iifayile ngaphandle komthombo wethu kunye neefayile ze-dist; Ukuba ubuthembele kuzo kwaye ubusebenzisa izikripthi zethu ngefolda
node_modules
, kuya kufuneka uhlengahlengise ukuhamba kwakho komsebenzi.
-
Phinda ubhale zombini iibhokisi zokujonga kunye nezihlala zikhona kunye nonomathotholo. Ngoku, zombini zinesakhiwo esihambelanayo se-HTML (yangaphandle
<div>
kunye nomntakwenu<input>
kunye<label>
) kunye nezimbo zoyilo ezifanayo (ezipakishweyo ezingagqibekanga, ngaphakathi ngodidi lwesilungisi). Oku kusivumela ukuba senze isitayile seleyibhile ngokusekwe kwimeko yegalelo, ukwenza lula inkxasodisabled
yophawu loyelelwano (olufudula lufuna udidi lwabazali) kunye nokuxhasa ngcono ukuqinisekiswa kwefomu yethu.Njengenxalenye yoku, siyitshintshile i-CSS yokulawula ezininzi
background-image
kwiibhokisi zokujonga iifom kunye nonomathotholo. Ngaphambili, into esusiweyo ngoku.custom-control-indicator
yayinombala ongasemva, i-gradient, kunye ne-SVG icon. Ukwenza ngokwezifiso igradient yangasemva kuthetha ukubuyisela zonke ezo ngalo lonke ixesha ufuna ukutshintsha ibe nye. Ngoku,.custom-control-label::before
sinokuzalisa kunye negradient kunye.custom-control-label::after
nokuphatha i icon.Ukwenza isiko lokukhangela emgceni, yongeza
.custom-control-inline
. -
Umkhethi ohlaziyiweyo wamaqela amaqhosha asekwe kwigalelo. Endaweni
[data-toggle="buttons"] { }
yesitayile kunye nokuziphatha, sisebenzisadata
uphawu nje kwiindlela zokuziphatha ze-JS kwaye sithembele.btn-group-toggle
kudidi olutsha lwesitayile. -
Isuswe
.col-form-legend
ngokuthanda ukuphuculwa kancinane.col-form-label
. Le ndlela.col-form-label-sm
kwaye.col-form-label-lg
inokusetyenziswa<legend>
kwizinto ngokulula. -
Igalelo lefayile yesiko lifumene utshintsho kutshintsho lwabo
$custom-file-text
lweSass. Ayiseyiyo imephu ye-Sass ebekwe kwindlwane kwaye ngoku inika amandla umtya omnye kuphela-Browse
iqhosha njengoko ngoku kuphela kwe-pseudo-element eveliswe kwi-Sass yethu. IsicatshulwaChoose file
ngoku sivela kwi.custom-file-label
.
-
Ii-addon zeqela leengeniso zithe ngqo ekubekweni kwazo ngokunxulumene negalelo. Sehlile
.input-group-addon
kwaye.input-group-btn
kwiiklasi ezimbini ezintsha,.input-group-prepend
kwaye.input-group-append
. Kuya kufuneka usebenzise ngokucacileyo isihlomelo okanye i-prepend ngoku, usenza lula uninzi lweCSS yethu. Ngaphakathi kwi-append okanye prepend, beka amaqhosha akho njengoko enokubakho naphi na kwenye indawo, kodwa usonge okubhaliweyo kwi.input-group-text
. -
Izimbo zokuqinisekisa ziyaxhaswa ngoku, njengamagalelo amaninzi (nangona unokuqinisekisa kuphela igalelo elinye kwiqela ngalinye).
-
Iiklasi zokulinganisa mazibe kumzali
.input-group
kwaye kungabi kuluhlu lwefomu yomntu ngamnye.
Ngelixa sikwi-beta, sijonge ukuba kungabikho tshintsho lwaphulwayo. Nangona kunjalo, izinto azisoloko zihamba njengoko bekucwangcisiwe. Apha ngezantsi kukho utshintsho olwaphulayo ekufuneka ulukhumbule xa usuka kwiBeta yoku-1 ukuya kwi-Beta yesi-2.
- Uguqulo olususiweyo
$badge-color
kunye nokusetyenziswa kwayo kwi.badge
. Sisebenzisa umsebenzi womahluko wombala ukukhethacolor
okusekwe kwibackground-color
, ngoko ke uguqulo aluyomfuneko. grayscale()
Umsebenzi othiywegray()
ngokutsha ukunqanda ukruthakruthwano kunye nesihluzo semveli se-CSSgrayscale
.- Inikwe igama elitsha
.table-inverse
_.thead-inverse
_.thead-default
_.*-dark
.*-light
- Iitheyibhile eziphendulayo ngoku zivelisa iiklasi kwindawo nganye yoqhawulo lwegridi. Oku kuqhawuka kwiBeta 1 kuba
.table-responsive
ubuyisebenzisa ifana kakhulu.table-responsive-md
. Ngoku unokusebenzisa.table-responsive
okanye.table-responsive-{sm,md,lg,xl}
njengoko kufuneka. - Inkxaso yeBower eyehlisiwe njengoko umphathi wepakethe uyekisiwe kwezinye iindlela (umz., Umsonto okanye npm). Bona i-bower/bower#2298 ngeenkcukacha.
- I-Bootstrap isafuna i-jQuery 1.9.1 okanye ngaphezulu, kodwa uyacetyiswa ukuba usebenzise uguqulelo 3.x kuba iibhrawuza ezixhaswayo ze-v3.x zizo ezixhaswa yiBootstrap kunye ne-v3.x inolungiso lokhuseleko.
- Ikhutshiwe
.form-control-label
iklasi engasetyenziswanga. Ukuba uye wasebenzisa olu didi, ibiyimpinda.col-form-label
yodidi ebekwe ngokuthe nkqo embindini we<label>
-a kunye negalelo elinxulunyaniswayo kwiziko lefomu ethe tye. - Utshintshise
color-yiq
umxube oqukacolor
ipropati kumsebenzi obuyisela ixabiso, ikuvumela ukuba uyisebenzisele nayiphi na ipropati yeCSS. Umzekelo, endaweni yokubacolor-yiq(#000)
, ungabhalacolor: color-yiq(#000);
.
- Yaziswa ngokusetyenziswa okutsha
pointer-events
kwiimodyuli. Umphandle.modal-dialog
udlula kwimisithopointer-events: none
ngokucofa isiko lokuphatha (ikwenza kube lula ukumamela nje kwi.modal-backdrop
nakuphi na unqakrazo), kwaye ke iyichase kokwenyani.modal-content
ngepointer-events: auto
.
Nazi izinto zetikiti ezinkulu oza kufuna ukuzazi xa usuka kwi-v3 ukuya kwi-v4.
- Iwisiwe i-IE8, IE9, kunye nenkxaso ye-iOS 6. v4 ngoku kuphela IE10+ kunye iOS 7+. Kwiindawo ezifuna enye kwezo, sebenzisa i-v3.
- Inkxaso esemthethweni yongezwa kwi-Android v5.0 Lollipop's Browser kunye neWebView. Iinguqulelo zangaphambili zeSikhangeli se-Android kunye neWebView zihlala zixhaswa ngokungekho mthethweni.
- I-Flexbox yenziwe ngokungagqibekanga. Ngokubanzi oku kuthetha ukushenxa kwizinto ezidadayo nangaphezulu kumacandelo ethu.
- Tshintshela kwi- Less ukuya kwi- Sass kumthombo wethu weefayile ze-CSS.
- Itshintshelwe ukusuka
px
kwiyunithirem
yethu yokuqala ye-CSS, nangona ii-pixels zisasetyenziselwa imibuzo yemidiya kunye nokuziphatha kwegridi njengoko izixhobo zokujonga izixhobo zingachatshazelwa bubungakanani bohlobo. - Ubungakanani befonti yehlabathi bunyukile ukusuka
14px
kwi16px
. - Kuhlaziywe amanqanaba egridi ukongeza ukhetho lwesihlanu (ukujongana nezixhobo ezincinci apha
576px
nangaphantsi) kwaye wasusa i--xs
infix kwezo klasi. Umzekelo:.col-6.col-sm-4.col-md-3
. - Kutshintshwe umxholo owahlukileyo ozikhethelayo ngeenketho eziqwalaselweyo nge SCSS variables (umzekelo,
$enable-gradients: true
). - Yakha isixokelelwano siqwalaselwe ngokutsha ukuze kusetyenziswe uthotho lwezikripthi ze-npm endaweni yeGrunt. Bona
package.json
zonke izikripthi, okanye iprojekthi yethu ifundelwe iimfuno zophuhliso lwasekhaya. - Usetyenziso olungaphenduliyo lweBootstrap alusaxhaswa.
- Ilahle i-Customizer ye-intanethi ithanda amaxwebhu okuseta abanzi kunye nolwakhiwo olulungelelanisiweyo.
- Kongezwe amashumi eeklasi eziluncedo ezintsha zexabiso lepropathi ye-CSS ngazibini kunye nomda/iindlela ezimfutshane zokupakisha isithuba.
- Isiwe kwi-flexbox.
- Inkxaso eyongeziweyo ye-flexbox kwimixube yegridi kunye neeklasi ezichazwe kwangaphambili.
- Njengenxalenye ye-flexbox, iquka inkxaso yeeklasi zokulungelelanisa ngokuthe nkqo kunye nezithe tye.
- Amagama eklasi yegridi ehlaziyiweyo kunye nenqanaba legridi entsha.
- Yongezwe inqanaba
sm
legridi entsha ngezantsi768px
kulawulo lwegranular ngakumbi. Ngoku sinazoxs
,sm
,md
,lg
kunyexl
. Oku kukwathetha ukuba lonke inqanaba liye ladityaniswa kwinqanaba elinye (ke.col-md-6
i-v3 ngoku ikwi.col-lg-6
-v4). xs
Iiklasi zegridi zilungisiwe ukuze zingafuni i-infix ukubonisa ngokuchanekileyo ngakumbi ukuba ziqala ukusebenzisa izimbomin-width: 0
kwaye hayi ixabiso le-pixel elimiselweyo. Endaweni yokuba.col-xs-6
, ngoku.col-6
. Zonke ezinye iziqwenga zegridi zifuna i-infix (umz.,sm
).
- Yongezwe inqanaba
- Ubungakanani begridi ehlaziyiweyo, imixube, kunye nezinto eziguquguqukayo.
- Iigatha zegridi ngoku zinemephu ye-Sass ukuze ukwazi ukukhankanya ububanzi begutter ethile kwindawo nganye yoqhawulo.
- Kuhlaziywe imixube yegridi ukuze kusetyenziswe i-
make-col-ready
prep mixin kunye ne-make-col
a ukusetaflex
kunyemax-width
nokulinganisa ikholamu nganye. - Indlela yegridi etshintshiweyo yombuzo wemithombo yeendaba zoqhawulo kunye nobubanzi besikhongozeli ukuze kunikwe ingxelo ngenqanaba legridi entsha kunye nokuqinisekisa ukuba iikholamu zahlulwa ngokulinganayo
12
ngobubanzi bazo obukhulu. - Iindawo zokuqhawula igridi kunye nobubanzi besikhongozeli ngoku ziphathwa kusetyenziswa iimephu ze-Sass (
$grid-breakpoints
kunye$container-max-widths
) endaweni yeqela leenguqu ezahlukeneyo. Ezi zithatha indawo@screen-*
yeenguqu ngokupheleleyo kwaye zikuvumela ukuba wenze ngokwezifiso imigangatho yegridi. - Imibuzo yemidiya nayo itshintshile. Endaweni yokuphinda imibuzo yethu yeendaba ngexabiso elifanayo ngexesha ngalinye, ngoku sine
@include media-breakpoint-up/down/only
. Ngoku, endaweni yokubhala@media (min-width: @screen-sm-min) { ... }
, ungabhala@include media-breakpoint-up(sm) { ... }
.
- Iiphaneli eziwisiweyo, i-thumbnails, kunye nemithombo yecandelo elitsha elibandakanya konke, amakhadi .
- Ilahle ifonti ye icon yeGlyphicons. Ukuba ufuna ii-icon, ezinye iinketho zezi:
- inguqulelo ephezulu yeGlyphicons
- Ii-Octicons
- Ifonti Eyoyikekayo
- Jonga i Ukwandiswa kwephepha uluhlu lwezinye iindlela. Ngaba unamacebiso angakumbi? Nceda uvule umba okanye i-PR.
- Kulahlwe iplagi ye-Affix jQuery.
- Sincoma ukusebenzisa
position: sticky
endaweni yoko. Jonga i-HTML5 Nceda ungene ngeenkcukacha kunye nezindululo ezithile zokugcwaliswa kwepolyfill. Enye ingcebiso kukusebenzisa@supports
umgaqo wokuwuphumeza (umzekelo,@supports (position: sticky) { ... }
)/ - Ukuba ubusebenzisa i-Affix ukufaka ezongezelelweyo, ezingezizo
position
izimbo, i-polyfill ayinakuxhasa imeko yakho yosetyenziso. Olunye ukhetho kusetyenziso olunjalo lithala leencwadi le -ScrollPos-Styler yomntu wesithathu .
- Sincoma ukusebenzisa
- Ilahliwe icandelo le-pager njengoko yayingamaqhosha enziwe ngokwezifiso kancinci.
- Kulungiswe phantse onke amacandelo ukuze kusetyenziswe abakhethi beklasi abangafakwanga kwindlwane endaweni yokukhetha abantwana abakhethekileyo.
Olu luhlu lubonisa utshintsho oluphambili ngecandelo phakathi kwe-v3.xx kunye ne-v4.0.0.
Intsha kwiBootstrap 4 yiReboot , icwecwe lesimbo elitsha elakha kuQeqesho kunye nezimbo zethu zokuseta kwakhona izimvo. Abakhethi abavela kule fayile basebenzisa izinto kuphela-akukho ziklasi apha. Oku kwahlula izitayile zethu zokuseta ngokutsha kwizitayile zethu zecandelo lendlela yemodyuli ngakumbi. Ezinye zezona zibalulekileyo zokuseta kwakhona oku kubandakanya box-sizing: border-box
lutshintsho, ukusuka em
ukuya rem
kwiyunithi kwizinto ezininzi, izimbo zekhonkco, kunye nokusetha kwakhona kwesiqalelo sefom ezininzi.
- Zishenxise zonke
.text-
izinto eziluncedo_utilities.scss
kwifayile. - Ilahliwe
.page-header
, ngaphandle komda, zonke izitayile zayo zinokusetyenziswa ngezinto eziluncedo. .dl-horizontal
iwisiwe. Endaweni yoko, sebenzisa kwaye.row
usebenzise<dl>
iiklasi zekholamu yegridi (okanye imixube) kuyo<dt>
kunye<dd>
nabantwana.- Isimbo
<blockquote>
sesiko sifudukele kwiiklasi-.blockquote
kunye nesilungisi.blockquote-reverse
. .list-inline
ngoku ifuna ukuba izinto zoluhlu lwabantwana bayo.list-inline-item
iklasi entsha isetyenziswe kubo.
- Inikwe igama ngokutsha
.img-responsive
ibe.img-fluid
. - Inikwe elinye igama
.img-rounded
ku.rounded
- Inikwe elinye igama
.img-circle
ku.rounded-circle
- Phantse zonke iimeko
>
zomkhethi zisusiwe, okuthetha ukuba iitafile ezibekwe kwindlwane ngoku ziya kuzidla ilifa izitayile kubazali bazo. Oku kwenza lula kakhulu abakhethi bethu kunye nokwenza ngokwezifiso okunokwenzeka. - Iitafile eziphendulayo azisafuni nto yokusonga. Endaweni yoko, beka nje
.table-responsive
ilungelo kwi-<table>
. - Ithiywe ngokutsha
.table-condensed
ukuze.table-sm
ingqinelane. - Kongezwe
.table-inverse
ukhetho olutsha. - Izilungisi zeheader zetafile ezongeziweyo:
.thead-default
kunye.thead-inverse
. - Iiklasi zomxholo zithiywe ngokutsha ukuze zibe
.table-
nesimaphambili -. Ngenxa yoko.active
,.success
, kwaye , , kunye ..warning
_ _.danger
.info
.table-active
.table-success
.table-warning
.table-danger
.table-info
- Isiqalelo esisusiweyo siseta kwakhona
_reboot.scss
kwifayile. - Inikwe igama ngokutsha
.control-label
ibe.col-form-label
. - Ithiywe ngokutsha
.input-lg
kunye.input-sm
nokuya.form-control-lg
kunye.form-control-sm
, ngokulandelelanayo. - Iiklasi eziyehliweyo
.form-group-*
ngenxa yokulula. Sebenzisa.form-control-*
iiklasi endaweni ngoku. - Iwisiwe
.help-block
kwaye kwafakwa endaweni.form-text
yombhalo woncedo wenqanaba lebhloko. Kumbhalo woncedo ongaphakathi kunye nolunye ukhetho olubhetyebhetye, sebenzisa iiklasi eziluncedo ezifana.text-muted
. - Yehla
.radio-inline
kwaye.checkbox-inline
. - Zidityanisiwe
.checkbox
kwaye.radio
zibe kwiiklasi.form-check
ezahlukeneyo.form-check-*
. - Iifom ezithe tyaba zilungisiwe:
- Ilahle
.form-horizontal
imfuneko yeklasi. .form-group
azisasebenzi izimbo ezisuka.row
kwimixin, ngoko.row
ke ngoku iyafuneka kuyilo lwegridi ethe tye (umzekelo,<div class="form-group row">
).- Kongezwe
.col-form-label
iklasi entsha kwiilebhile ezithe nkqo embindini ezino-.form-control
s. - Kongezwe olutsha
.form-row
kuyilo lwefom ehlangeneyo kunye neeklasi zegridi (tshintshanisa eyakho.row
kwaye.form-row
uhambe).
- Ilahle
- Inkxaso eyongeziweyo yeefomu zesiko (kwibhokisi yokukhangela, iirediyo, ukhetho, kunye namagalelo efayile).
- Kutshintshwe
.has-error
,.has-warning
, kunye.has-success
neeklasi ezinefomu yeHTML5 yokuqinisekisa ngeCSS's:invalid
kunye:valid
neeklasi zobuxoki. - Inikwe igama ngokutsha
.form-control-static
ibe.form-control-plaintext
.
- Inikwe igama ngokutsha
.btn-default
ibe.btn-secondary
. - Ilahle
.btn-xs
iklasi ngokupheleleyo njengoko.btn-sm
ngokomlinganiselo incinci kune-v3's. - Iqhosha elibambekayo leplagi ye-
button.js
jQuery lilahliwe. Oku kubandakanya$().button(string)
kunye$().button('reset')
neendlela. Sicebisa ukuba sisebenzise isuntswana leJavaScript yesiko endaweni yoko, eya kuba luncedo lokuziphatha kanye ngale ndlela ufuna yenze ngayo.- Qaphela ukuba ezinye iimpawu zeplagin (iqhosha lokujonga iibhokisi, iqhosha lerediyo, amaqhosha okuguqula elinye) zigciniwe kwi-v4.
- Guqula amaqhosha '
[disabled]
abe:disabled
njenge IE9+ ixhasa:disabled
. Nangona kunjalofieldset[disabled]
kuseyimfuneko kuba iiseti zasekhaya ezikhubazekileyo zisasebenza kwi-IE11 .
- Bhala kwakhona icandelo nge flexbox.
- Isusiwe
.btn-group-justified
. Njengotshintsho ungasebenzisa<div class="btn-group d-flex" role="group"></div>
njengesisongelo esijikeleze izinto nge.w-100
. - Yalahlwa
.btn-group-xs
iklasi ngokupheleleyo ngenxa yokususwa.btn-xs
. - Kususwe izithuba ezicacileyo phakathi kwamaqela amaqhosha kwiibar zesixhobo seqhosha; sebenzisa izixhobo zomda ngoku.
- Amaxwebhu aphuculweyo ukuze asetyenziswe namanye amacandelo.
- Utshintshwe ukusuka kubakhethi babazali ukuya kwiiklasi zesinye kuwo onke amacandelo, izilungisi, njl.
- Izitayile zokwehla ezilula ukuba zingaphindi zithunyelwe ngeentolo ezijonge phezulu okanye ezijonge ezantsi ezincanyathiselwe kwimenyu eyehlayo.
- Ukwehla kunokwakhiwa nge
<div>
s okanye<ul>
s ngoku. - Yakha kwakhona izitayile zokuhla kunye nemarkup ukubonelela ngenkxaso elula, eyakhelwe-ngaphakathi
<a>
kunye nezinto<button>
ezisekwe phantsi. - Inikwe igama ngokutsha
.divider
ibe.dropdown-divider
. - Izinto zokwehla ngoku zifuna
.dropdown-item
. - Iithogi zokuwisa azisafuni ngcaciso ecacileyo
<span class="caret"></span>
; oku kunikezelwa ngoku ngokuzenzekelayo nge CSS's::after
kwi.dropdown-toggle
.
- Yongezwe indawo entsha
576px
yokuqhawula igridi njengesm
, okuthetha ukuba ngoku kukho imigangatho emihlanu iyonke (xs
,sm
,md
,lg
, kunyexl
). - Ithiywe ngokutsha iiklasi zesilungisi segridi ephendulayo ukusuka
.col-{breakpoint}-{modifier}-{size}
ukuya.{modifier}-{breakpoint}-{size}
kwiiklasi zegridi ezilula. - Iiklasi eziyehliweyo zokutyhiliza kunye nokutsalwa kwesilungisi kwiiklasi ezintsha ezine-flexbox-powered
order
. Umzekelo, endaweni ye.col-8.push-4
kwaye.col-4.pull-8
, ungasebenzisa.col-8.order-2
kwaye.col-4.order-1
. - Kongezwe iiklasi eziluncedo ze-flexbox zenkqubo yegridi kunye namalungu.
- Bhala kwakhona icandelo nge flexbox.
- Kutshintshwe
a.list-group-item
ngeklasi ecacileyo,.list-group-item-action
, kwikhonkco lesimbo kunye neenguqulelo zeqhosha lezinto zeqela loluhlu. - Iklasi eyongeziweyo
.list-group-flush
yokusetyenziswa ngamakhadi.
- Bhala kwakhona icandelo nge flexbox.
- Ngokunikezelwa kwi-flexbox, ulungelelwaniso lwee-icon zokugxotha kwi-header lunokwaphuka njengoko singasasebenzisi izinto ezidadayo. Umxholo odadayo uza kuqala, kodwa nge-flexbox ayisenjalo. Hlaziya ii-icon zakho zokugxotha ukuba zize emva kwezihloko zemodal ukulungisa.
- Inketho
remote
(enokuthi isetyenziswe ukulayisha ngokuzenzekelayo kunye nokufaka umxholo wangaphandle kwi-modal) kunyeloaded.bs.modal
nesiganeko esihambelanayo sisusiwe. Sicebisa endaweni yoko sisebenzise itemplate yecala lomxhasi okanye isakhelo sokubophelela idatha, okanye ufowunele i-jQuery.load ngokwakho.
- Bhala kwakhona icandelo nge flexbox.
- Silahlile phantse bonke
>
abakhethi besitayile esilula ngeeklasi ezingafakwanga. - Endaweni yabakhethi abathile be-HTML njenge
.nav > li > a
, sisebenzisa iiklasi ezahlukeneyo zika-.nav
s,.nav-item
s, kunye no-.nav-link
s. Oku kwenza iHTML yakho ibe bhetyebhetye ngakumbi ngelixa uzisa ukwanda okwandisiweyo.
I-navbar ibhalwe ngokutsha ngokupheleleyo kwi-flexbox ngenkxaso ephuculweyo yokulungelelaniswa, ukuphendula, kunye nokwenza ngokwezifiso.
- Iindlela zokuziphatha eziphendulayo ngoku zisetyenziswa
.navbar
eklasini ngendlela efunwayo.navbar-expand-{breakpoint}
apho ukhetha khona ukudiliza ibar ye-navbar. Ngaphambili olu yayilutshintsho oluNcinci kwaye lufuna ukuphinda kuhlawulwe. .navbar-default
ngoku.navbar-light
, nangona.navbar-dark
ihlala ifana. Enye yezi iyafuneka kwi-navbar nganye. Nangona kunjalo, ezi klasi azisasetibackground-color
s; endaweni yoko zichaphazela kuphelacolor
.- IiNavbar ngoku zifuna isibhengezo sangasemva sohlobo oluthile. Khetha kwimvelaphi yethu eluncedo (
.bg-*
) okanye usete eyakho ngokukhanya/iiklasi eziguquliweyo ngasentla ukwenza okuphambeneyo . - Ukunikezelwa kwezitayile ze-flexbox, ii-navbar ngoku zinokusebenzisa izinto ze-flexbox zokhetho olulula lolungelelwaniso.
.navbar-toggle
ngoku.navbar-toggler
kwaye inezimbo ezahlukeneyo kunye nophawu lwangaphakathi (akusekho sthathu<span>
).- Yayeka
.navbar-form
iklasi ngokupheleleyo. Akusekho mfuneko; endaweni yoko, sebenzisa.form-inline
kwaye usebenzise izixhobo zomda njengoko kuyimfuneko. - Navbar azisaquki
margin-bottom
okanyeborder-radius
ngokungagqibekanga. Sebenzisa izinto eziluncedo njengoko kuyimfuneko. - Yonke imizekelo ene-navbar ihlaziyiwe ukuze ibandakanye uphawu olutsha.
- Bhala kwakhona icandelo nge flexbox.
- Iiklasi ezicacileyo (
.page-item
,.page-link
) ngoku ziyafuneka kwinzala ye-.pagination
s - Ilahliwe
.pager
icandelo ngokupheleleyo njengoko ibingaphezulu kancinane kunamaqhosha olwandlalo enzelwe wena.
- Iklasi ecacileyo,
.breadcrumb-item
, ngoku iyafuneka kwinzala.breadcrumb
yes
- Kutshaywe igama
.label
ku.badge
-disambiguate ukusuka<label>
kwinto. - Ilahliwe
.badge
icandelo njengoko laliphantse lafana neelebhile. Sebenzisa.badge-pill
isilungisi kunye necandelo leleyibhile endaweni yoko kujongwa okungqukuva. - Iibheji azisahanjiswa ngokuzenzekelayo kuluhlu lwamaqela kunye namanye amacandelo. Iiklasi eziluncedo ngoku ziyafuneka kuloo nto.
.badge-default
Ilahliwe kwaye.badge-secondary
yongezwa kwiiklasi zesilungisi secandelo elisetyenziswa kwenye indawo.
Ilahlwe ngokupheleleyo ngenxa yecandelo elitsha lekhadi.
.panel
ukuya.card
, ngoku yakhiwe nge flexbox..panel-default
isusiwe kwaye akukho kutshintshwa..panel-group
isusiwe kwaye akukho kutshintshwa..card-group
ayilotshintsho, yahlukile..panel-heading
ukuya.card-header
.panel-title
ukuya.card-title
. Kuxhomekeka kwinkangeleko oyifunayo, usenokufuna ukusebenzisa izakhi zesihloko okanye iiklasi (umz.<h3>
).h3
okanye iziqalelo ezingqindilili okanye iiklasi (umz.<strong>
,<b>
,.font-weight-bold
). Qaphela ukuba.card-title
, ngelixa libizwa ngokufanayo, livelisa inkangeleko eyahlukileyo kune.panel-title
..panel-body
ukuya.card-body
.panel-footer
ukuya.card-footer
.panel-primary
,.panel-success
,.panel-info
,.panel-warning
, kwaye.panel-danger
ziye zalahlwa.bg-
,.text-
, kunye.border
nezinto eziluncedo ezenziwe$theme-colors
kwimephu yethu ye-Sass.
- Kutshintshwe
.progress-bar-*
iiklasi zomxholo ngezinto.bg-*
eziluncedo. Ngokomzekelo,class="progress-bar progress-bar-danger"
ibaclass="progress-bar bg-danger"
. - Kutshintshwe
.active
imivalo yenkqubela phambili ene-.progress-bar-animated
.
- Uhlengahlengiso lwalo lonke icandelo ukwenza lula uyilo kunye nesimbo. Sineendlela ezimbalwa onokuthi uzibhale ngaphezulu, izikhombisi ezitsha, kunye neempawu ezintsha.
- Yonke i-CSS ayifakwanga kwindlwane yaza yanikwa elinye igama, kuqinisekiswa ukuba iklasi nganye inesimaphambili se
.carousel-
.- Izinto ze-carousel,
.next
,.prev
,.left
kwaye.right
ngoku.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
, kunye.carousel-item-right
. .item
nayo ngoku.carousel-item
.- Kulawulo lwangaphambili/olulandelayo,
.carousel-control.right
kwaye.carousel-control.left
ngoku.carousel-control-next
kunye.carousel-control-prev
, okuthetha ukuba alusafuni udidi lwesiseko oluthile.
- Izinto ze-carousel,
- Isuse zonke izitayile eziphendulayo, ukubuyisela kwizinto eziluncedo (umzekelo, ukubonisa iintloko kwiizibuko ezithile zokujonga) kunye nezimbo zesiko njengoko zifuneka.
- Ukukhutshwa kwemifanekiso egqithisiweyo kwimifanekiso kwizinto ze-carousel, ibuyisela kwizinto eziluncedo.
- Ulungelelanise umzekelo weCarousel ukubandakanya uphawu olutsha kunye nezimbo.
- Isusiwe inkxaso yeetafile ezinesitayile ezibekwe kwindlwane. Zonke izimbo zetafile ngoku zizuzwe njengelifa kwi-v4 kubakhethi abalula.
- Kongezwe umahluko wetheyibhile.
- Bonisa, ifihliwe, kunye nokunye:
- Wenze umboniso oluncedo ukuba uphendule (umzekelo,
.d-none
kunyed-{sm,md,lg,xl}-none
). - Kulahlwe ubuninzi bezinto
.hidden-*
eziluncedo zokubonisa izinto ezintsha . Umzekelo, endaweni yokuba.hidden-sm-up
, sebenzisa.d-sm-none
. Ithiywe ngokutsha.hidden-print
izinto eziluncedo ukuze kusetyenziswe inkqubo esebenzayo yokubonisa amagama. Ulwazi oluthe kratya phantsi kwecandelo lezixhobo eziphendulayo kweli phepha. - Iiklasi ezongeziweyo
.float-{sm,md,lg,xl}-{left,right,none}
zokudada okuphendulayo kwaye zisuswe.pull-left
kwaye.pull-right
kuba azifuneki.float-left
kwaye.float-right
.
- Wenze umboniso oluncedo ukuba uphendule (umzekelo,
- Uhlobo:
- Kongezwe iinguqulelo eziphendulayo kwiiklasi zethu zolungelelwaniso lombhalo
.text-{sm,md,lg,xl}-{left,center,right}
.
- Kongezwe iinguqulelo eziphendulayo kwiiklasi zethu zolungelelwaniso lombhalo
- Ulungelelwaniso kunye nezithuba:
- Kongezwe umjikelo omtsha osabelayo kunye nezinto eziluncedo zokupakisha kuwo onke macala, kunye nezifutshane ezithe nkqo nezithe tye.
- Okongeziweyo kwisikhephe sezinto eziluncedo ze- flexbox .
- Silahliwe kwiklasi
.center-block
entsha.mx-auto
.
- I-Clearfix ihlaziywe ukulahla inkxaso kwiinguqulelo zebrawuza endala.
I-Bootstrap 3 yomthengisi we-prefix mixins, eyayekisiweyo kwi-v3.2.0, isusiwe kwi-Bootstrap 4. Ekubeni sisebenzisa i -Autoprefixer , ayiseyomfuneko.
Ikhutshwe le mixins ilandelayo 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
Amaxwebhu ethu afumene uphuculo kuyo yonke ibhodi. Naku okusezantsi ezantsi:
- Sisasebenzisa iJekyll, kodwa sinazo iiplagi kumxube:
bugify.rb
isetyenziswa ukudwelisa ngokufanelekileyo amangeno kwiphepha lomkhangeli zincwadi we bugs .example.rb
yifolokhwe yesiko yeplagi engagqibekangahighlight.rb
, ivumela ukubanjwa kwekhowudi yomzekelo.callout.rb
yifolokhwe yesiko elifanayo laloo nto, kodwa yenzelwe ii-callouts zethu ezikhethekileyo zamaxwebhu.markdown-block.rb
isetyenziselwa ukunika iMarkdown iziqwengana ngaphakathi kweempawu zeHTML ezinjengeetafile.- ijekyll-toc isetyenziselwa ukwenza itheyibhile yethu yeziqulatho.
- Wonke umxholo wamaxwebhu ubhalwe ngokutsha kwi-Markdown (endaweni ye-HTML) ukuze kube lula ukuhlela.
- Amaphepha aphinde ahlengahlengiswa ukuze afumane umxholo olula kunye nolawulo olufikelelekayo.
- Sisuke kwi-CSS eqhelekileyo ukuya kwi-SCSS ukuze sithathe ithuba elipheleleyo lokuguquguquka kwe-Bootstrap, imixube, kunye nokunye.
Zonke @screen-
iinguqu zisusiwe kwi-v4.0.0. Sebenzisa i- media-breakpoint-up()
, media-breakpoint-down()
okanye i media-breakpoint-only()
-Sass imixube okanye $grid-breakpoints
imephu ye-Sass endaweni yoko.
Iiklasi zethu zoncedo eziphendulayo ziye zashenxiswa ubukhulu becala ngenxa yezixhobo ezicacileyo display
.
- Iiklasi
.hidden
kunye.show
neeklasi zisusiwe ngenxa yokuba ziphikisana ne-jQuery$(...).hide()
kunye$(...).show()
neendlela. Endaweni yoko, zama ukuguqula[hidden]
uphawu okanye usebenzise izitayile ezisemgqeni ezifanastyle="display: none;"
nestyle="display: block;"
. - Zonke
.hidden-
iiklasi zisusiwe, gcina izixhobo zoshicilelo eziye zanikwa elinye igama.- Isusiwe kwi-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
- Isusiwe kwi-v4 alphas:
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
- Isusiwe kwi-v3:
- Shicilela izinto eziluncedo azisaqali ngo
.hidden-
okanye.visible-
, kodwa nge.d-print-
.- Amagama amadala:
.visible-print-block
,.visible-print-inline
,.visible-print-inline-block
,.hidden-print
- Iiklasi ezintsha:
.d-print-block
,.d-print-inline
,.d-print-inline-block
,.d-print-none
- Amagama amadala:
Kunokuba usebenzise .visible-*
iiklasi ezicacileyo, wenza into ibonakale ngokungafihli kubukhulu besikrini. Ungadibanisa iklasi enye kunye neklasi .d-*-none
enye .d-*-block
ukubonisa into kuphela kwisithuba esinikiweyo sobukhulu beskrini (umzekelo .d-none.d-md-block.d-xl-none
, ibonisa i element kuphela kwisixhobo esiphakathi nesinkulu).
Qaphela ukuba utshintsho kwii-breakpoints zegridi kwi-v4 kuthetha ukuba kuya kufuneka uye kwindawo enye enkulu ukufezekisa iziphumo ezifanayo. Iiklasi eziluncedo ezintsha eziphendulayo azizami ukwamkela iimeko ezingaxhaphakanga kakhulu apho ukubonakala kwento kungenakubonakaliswa njengoluhlu oludityanisiweyo lobungakanani bombono; endaweni yoko uzakufuna ukusebenzisa isiko CSS kwiimeko ezinjalo.