in English

Ukufudukela kwi-v4

I-Bootstrap 4 yinto enkulu yokuphinda ibhale yonke iprojekthi. Olona tshintsho luphawulekayo lushwankathelwa apha ngezantsi, lulandelwa lutshintsho oluthe ngqo kumacandelo afanelekileyo.

Utshintsho oluzinzileyo

Ukusuka kwi-Beta 3 ukuya kukhululo lwethu lwe-v4.x oluzinzileyo, akukho tshintsho lwaphulayo, kodwa kukho utshintsho oluphawulekayo.

Ukushicilela

  • 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, kunye none. I-v4 ezinzileyo yongezwe flex, inline-flex, table, table-row, kunye table-cell.

  • Unikezelo olulungisiweyo loshicilelo kuzo zonke izikhangeli ezineendlela zoshicilelo ezitsha ezichaza @page size.

Beta 3 utshintsho

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.

Iintlobo ngeentlobo

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

Iifom

  • 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 inkxaso disabledyophawu loyelelwano (olufudula lufuna udidi lwabazali) kunye nokuxhasa ngcono ukuqinisekiswa kwefomu yethu.

    Njengenxalenye yale nto, siyitshintshile i-CSS yokulawula ii-multiple background-images kwiibhokisi zokukhangela zefom kunye nonomathotholo. Ngaphambili, into esusiweyo ngoku .custom-control-indicatoryayinombala ongasemva, igradient, kunye ne-SVG icon. Ukwenza ngokwezifiso igradient yangasemva kuthetha ukubuyisela zonke ezo ngalo lonke ixesha ufuna ukutshintsha ibe nye. Ngoku, .custom-control-label::beforesinokuzalisa kunye negradient kunye .custom-control-label::afternokuphatha i icon.

    Ukwenza isiko lokukhangela emgceni, yongeza .custom-control-inline.

  • Umkhethi ohlaziyiweyo wamaqela amaqhosha asekwe kwigalelo. Endaweni [data-toggle="buttons"] { }yesitayile kunye nokuziphatha, sisebenzisa datauphawu nje kwiindlela zokuziphatha ze-JS kwaye sithembele .btn-group-togglekudidi olutsha lwesitayile.

  • Isuswe .col-form-legendngokuthanda ukuphuculwa kancinci .col-form-label. Le ndlela .col-form-label-smkwaye .col-form-label-lginokusetyenziswa <legend>kwizinto ngokulula.

  • Igalelo lefayile yesiko lifumene utshintsho kutshintsho lwabo $custom-file-textlweSass. Ayiseyiyo imephu ye-Sass ebekwe kwindlwane kwaye ngoku inika amandla umtya omnye kuphela- Browseiqhosha njengoko ngoku kuphela kwe-pseudo-element eveliswe kwi-Sass yethu. Isicatshulwa Choose filengoku sivela kwi .custom-file-label.

Amaqela ongeniso

  • Ii-addon zeqela leengeniso zithe ngqo ekubekweni kwazo ngokunxulumene negalelo. Sehlile .input-group-addonkwaye .input-group-btnkwiiklasi ezimbini ezintsha, .input-group-prependkwaye .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 enokuthi abekhona naphi na, kodwa usonge okubhaliweyo .input-group-text.

  • Izimbo zokuqinisekisa ziyaxhaswa ngoku, njengamagalelo amaninzi (nangona unokuqinisekisa kuphela igalelo elinye kwiqela ngalinye).

  • Iiklasi zokulinganisa mazibe kumzali .input-groupkwaye kungabi kuluhlu lwefomu yomntu ngamnye.

Beta 2 utshintsho

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.

Ukuqhawula

  • Uguqulo olususiweyo $badge-colorkunye nokusetyenziswa kwayo kwi .badge. Sisebenzisa umsebenzi womahluko wombala ukukhetha colorokusekwe kwi background-color, ngoko ke uguqulo aluyomfuneko.
  • grayscale()Umsebenzi othiywe gray()ngokutsha ukunqanda ukruthakruthwano kunye nesihluzo semveli se-CSS grayscale.
  • Inikwe igama elitsha .table-inverse_ .thead-inverse_ .thead-default_.*-dark.*-light
  • Iitheyibhile eziphendulayo ngoku zivelisa iiklasi kwindawo nganye yoqhawulo lwegridi. Oku kuqhawuka kwiBeta 1 ekubeni .table-responsiveubuyisebenzisa ifana kakhulu .table-responsive-md. Ngoku unokusebenzisa .table-responsiveokanye .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-labeliklasi engasetyenziswanga. Ukuba uye wasebenzisa olu didi, ibiyimpinda .col-form-labelyodidi ebekwe ngokuthe nkqo embindini we <label>-a kunye negalelo elinxulunyaniswayo kwiziko lefomu ethe tye.
  • Utshintshise color-yiqumxube oquka coloripropati kumsebenzi obuyisela ixabiso, ikuvumela ukuba uyisebenzisele nayiphi na ipropati yeCSS. Umzekelo, endaweni yokuba color-yiq(#000), ungabhala color: color-yiq(#000);.

Iimbalasane

  • Yaziswa ngokusetyenziswa okutsha pointer-eventskwiimodyuli. Umphandle .modal-dialogudlula kwimisitho pointer-events: nonengokucofa isiko lokuphatha (ikwenza kube lula ukumamela kwi .modal-backdropnakuphi na unqakrazo), kwaye ke iyichase kokwenyani .modal-contentnge pointer-events: auto.

Isishwankathelo

Nazi izinto zetikiti ezinkulu oza kufuna ukuzazi xa usuka kwi-v3 ukuya kwi-v4.

Inkxaso yebhrawuza

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

Iinguqu zehlabathi

  • 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 pxkwiyunithi remyethu yokuqala ye-CSS, nangona ii-pixels zisasetyenziselwa imibuzo yemidiya kunye nokuziphatha kwegridi njengoko izixhobo zokujonga izixhobo zingachatshazelwa bubungakanani bohlobo.
  • Ubungakanani befonti yehlabathi bunyukile ukusuka 14pxkwi 16px.
  • Kuhlaziywe amanqanaba egridi ukongeza ukhetho lwesihlanu (ukujongana nezixhobo ezincinci apha 576pxnangaphantsi) kwaye wasusa i- -xsinfix 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.jsonzonke 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.

Inkqubo yegridi

  • 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 smlegridi entsha ngezantsi 768pxkulawulo lwegranular ngakumbi. Ngoku sinazo xs, sm, md, lgkunye xl. Oku kukwathetha ukuba lonke inqanaba liye ladityaniswa kwinqanaba elinye (ke .col-md-6i-v3 ngoku ikwi .col-lg-6-v4).
    • xsIiklasi zegridi zilungisiwe ukuze zingafuni i-infix ukubonisa ngokuchanekileyo ngakumbi ukuba ziqala ukusebenzisa izimbo min-width: 0kwaye hayi ixabiso le-pixel elimiselweyo. Endaweni yokuba .col-xs-6, ngoku .col-6. Zonke ezinye iziqwenga zegridi zifuna i-infix (umz., sm).
  • 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-readyprep mixin kunye ne- make-cola ukuseta flexkunye max-widthnokulinganisa ikholamu nganye.
    • Indlela yegridi etshintshiweyo yombuzo wemithombo yeendaba zoqhawulo kunye nobubanzi besikhongozeli ukuze kunikwe ingxelo ngenqanaba legridi entsha kunye nokuqinisekisa ukuba iikholamu zahlulwa ngokulinganayo 12ngobubanzi bazo obukhulu.
    • Iindawo zokuqhawula igridi kunye nobubanzi besikhongozeli ngoku ziphathwa kusetyenziswa iimephu ze-Sass ( $grid-breakpointskunye $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) { ... }.

Amacandelo

  • Iiphaneli eziwisiweyo, i-thumbnails, kunye nemithombo yecandelo elitsha elibandakanya konke, amakhadi .
  • Ilahle ifonti ye icon yeGlyphicons. Ukuba ufuna ii-icon, ezinye iinketho zezi:
  • Kulahlwe iplagi ye-Affix jQuery.
    • Sincoma ukusebenzisa position: stickyendaweni yoko. Jonga i-HTML5 Nceda ungene ngeenkcukacha kunye nezindululo ezithile zokugcwaliswa kwepolyfill. Enye ingcebiso kukusebenzisa @supportsumgaqo wokuwuphumeza (umz., @supports (position: sticky) { ... })
    • Ukuba ubusebenzisa i-Affix ukufaka ezongezelelweyo, ezingezizo positionizimbo, ii-polyfills zinokungaxhasi imeko yakho yosetyenziso. Enye inketho yosetyenziso olunjalo yilayibrari yeScrollPos-Styler yomntu wesithathu .
  • Ilahliwe icandelo le-pager njengoko yayingamaqhosha enziwe ngokwezifiso kancinci.
  • Kulungiswe phantse onke amacandelo ukuze kusetyenziswe abakhethi beklasi abangafakwanga kwindlwane endaweni yokukhetha abantwana abakhethekileyo.

Ngecandelo

Olu luhlu lubonisa utshintsho oluphambili ngecandelo phakathi kwe-v3.xx kunye ne-v4.0.0.

Qalisa kwakhona

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-boxlutshintsho, ukusuka emukuya remkwiyunithi kwizinto ezininzi, izimbo zekhonkco, kunye nokusetha kwakhona kwesiqalelo sefom ezininzi.

Ukuchwetheza

  • Zishenxise zonke .text-izinto eziluncedo _utilities.scsskwifayile.
  • Ilahliwe .page-headernjengoko izitayile zayo zinokusetyenziswa ngezinto eziluncedo.
  • .dl-horizontaliwisiwe. Endaweni yoko, sebenzisa kwaye .rowusebenzise <dl>iiklasi zekholamu yegridi (okanye imixube) kuyo <dt>kunye <dd>nabantwana.
  • Iibhloko ezihlaziyiweyo, zihambisa izitayile zazo ukusuka <blockquote>kwinto ukuya kwiklasi enye, .blockquote. Silahlile .blockquote-reverseisilungisi sezinto eziluncedo zokubhaliweyo.
  • .list-inlinengoku ifuna ukuba abantwana bayo kuluhlu lwezinto babe .list-inline-itemneklasi entsha esetyenzisiweyo kubo.

Imifanekiso

  • Inikwe igama ngokutsha .img-responsiveibe .img-fluid.
  • Inikwe elinye igama .img-roundedku.rounded
  • Inikwe elinye igama .img-circleku.rounded-circle

Iitafile

  • 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.
  • Ithiywe ngokutsha .table-condensedukuze .table-smingqinelane.
  • Kongezwe .table-inverseukhetho olutsha.
  • Izilungisi zeheader zetafile ezongeziweyo: .thead-defaultkunye .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

Iifom

  • Isiqalelo esisusiweyo siseta kwakhona _reboot.scsskwifayile.
  • Inikwe igama ngokutsha .control-labelibe .col-form-label.
  • Ithiywe ngokutsha .input-lgkunye .input-smnokuya .form-control-lgkunye .form-control-sm, ngokulandelelanayo.
  • Iiklasi eziyehliweyo .form-group-*ngenxa yokulula. Sebenzisa .form-control-*iiklasi endaweni ngoku.
  • Iwisiwe .help-blockkwaye kwafakwa endaweni .form-textyombhalo woncedo wenqanaba lebhloko. Kumbhalo woncedo ongaphakathi kunye nolunye ukhetho olubhetyebhetye, sebenzisa iiklasi eziluncedo ezifana .text-muted.
  • Yehla .radio-inlinekwaye .checkbox-inline.
  • Zidityanisiwe .checkboxkwaye .radiozibe kwiiklasi .form-checkezahlukeneyo .form-check-*.
  • Iifom ezithe tyaba zilungisiwe:
    • Ilahle .form-horizontalimfuneko yeklasi.
    • .form-groupazisasebenzi izimbo ezisuka .rowkwimixin, ngoko .rowke ngoku iyafuneka kuyilo lwegridi ethe tye (umzekelo, <div class="form-group row">).
    • Kongezwe .col-form-labeliklasi entsha kwiilebhile ezithe nkqo embindini ezino- .form-controls.
    • Kongezwe olutsha .form-rowkuyilo lwefom ehlangeneyo kunye neeklasi zegridi (tshintshanisa eyakho .rowkwaye .form-rowuhambe).
  • Inkxaso yeefom zesiqhelo (yeebhokisi zokukhangela, iirediyo, ukhetho, kunye namagalelo efayile).
  • Kutshintshwe .has-error, .has-warning, kunye .has-successneeklasi ezinefomu yeHTML5 yokuqinisekisa ngeCSS's :invalidkunye :validneeklasi zobuxoki.
  • Inikwe igama ngokutsha .form-control-staticibe .form-control-plaintext.

Amaqhosha

  • Inikwe igama ngokutsha .btn-defaultibe .btn-secondary.
  • Ilahle .btn-xsiklasi ngokupheleleyo njengoko .btn-smngokomlinganiselo incinci kune-v3's.
  • Iqhosha elibambekayo leplagi ye- button.jsjQuery 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, iirediyo zamaqhosha, amaqhosha okuguqula okukodwa) zigciniwe kwi-v4.
  • Guqula amaqhosha ' [disabled]abe :disablednjenge IE9+ ixhasa :disabled. Nangona kunjalo fieldset[disabled]kusafuneka kuba iiseti zasekhaya ezikhubazekileyo ziseyi-buggy kwi-IE11 .

Iqela lamaqhosha

  • 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-xsiklasi 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 .divideribe .dropdown-divider.
  • Izinto zokwehla ngoku zifuna .dropdown-item.
  • Iithogi zokuwisa azisafuni ngcaciso ecacileyo <span class="caret"></span>; oku kunikezelwa ngoku ngokuzenzekelayo nge CSS's ::afterkwi .dropdown-toggle.

Inkqubo yegridi

  • Yongezwe indawo entsha 576pxyokwahlukana njengegridi sm, oku kuthetha ukuba ngoku kukho imigangatho emihlanu iyonke ( xs, sm, md, lg, kunye xl).
  • Ithiywe ngokutsha iiklasi zesilungisi segridi ephendulayo ukusuka .col-{breakpoint}-{modifier}-{size}ukuya .{modifier}-{breakpoint}-{size}kwiiklasi zegridi ezilula.
  • Iiklasi eziyehliweyo zokutyhala kunye nokutsalwa kwesilungisi kwiiklasi ezintsha ezine-flexbox-powered order. Umzekelo, endaweni ye .col-8.push-4kwaye .col-4.pull-8, ungasebenzisa .col-8.order-2kwaye .col-4.order-1.
  • Kongezwe iiklasi eziluncedo ze-flexbox zenkqubo yegridi kunye namalungu.

Dwelisa amaqela

  • Bhala kwakhona icandelo nge flexbox.
  • Kutshintshwe a.list-group-itemngeklasi ecacileyo, .list-group-item-action, kwikhonkco lesimbo kunye neenguqulelo zeqhosha lezinto zeqela loluhlu.
  • Iklasi eyongeziweyo .list-group-flushyokusetyenziswa ngamakhadi.
  • Bhala kwakhona icandelo nge flexbox.
  • Ukunika intshukumo kwi flexbox, ulungelelwaniso lwe icons zokugxotha kwiheader yophuka njengoko singasasebenzisi izinto ezidadayo. Umxholo odadayo uza kuqala, kodwa nge-flexbox ayisenjalo. Hlaziya ii-icon zakho zokugxotha ukuze zize emva kwezihloko zemodal ukulungisa.
  • Inketho remote(enokuthi isetyenziswe ukulayisha ngokuzenzekelayo kunye nokufaka umxholo wangaphandle kwi-modal) kunye loaded.bs.modalnesiganeko esihambelanayo sisusiwe. Sicebisa endaweni yoko sisebenzise itemplate yecala lomxhasi okanye isakhelo sokubophelela idatha, okanye ufowunele jQuery.layisha 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- .navs, .nav-items, kunye no- .nav-links. Oku kwenza ukuba 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 .navbareklasini ngendlela efunwayo .navbar-expand-{breakpoint} apho ukhetha khona ukudiliza ibha ye navbar. Ngaphambili olu yayilutshintsho oluNcinci kwaye lufuna ukuphinda kuhlawulwe.
  • .navbar-defaultngoku .navbar-light, nangona .navbar-darkihlala ifana. Enye yezi iyafuneka kwi-navbar nganye. Nangona kunjalo, ezi klasi azisaseti background-colors; endaweni yoko zichaphazela kuphela color.
  • 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-togglengoku .navbar-togglerkwaye inezimbo ezahlukeneyo kunye nophawu lwangaphakathi (akusekho sthathu <span>).
  • Yayeka .navbar-formiklasi ngokupheleleyo. Ayiseyomfuneko; endaweni yoko, sebenzisa .form-inlinekwaye usebenzise izixhobo zomda njengoko kuyimfuneko.
  • Navbar azisaquki margin-bottomokanye border-radiusngokungagqibekanga. Sebenzisa izinto eziluncedo njengoko kuyimfuneko.
  • Yonke imizekelo ene-navbar ihlaziyiwe ukuze ibandakanye uphawu olutsha.

Ukwenziwa kwePagination

  • Bhala kwakhona icandelo nge flexbox.
  • Iiklasi ezicacileyo ( .page-item, .page-link) ngoku ziyafuneka kwinzala ye- .paginations
  • Ilahliwe .pagericandelo ngokupheleleyo njengoko ibingaphezulu kancinane kunamaqhosha olwandlalo enzelwe wena.
  • Iklasi ecacileyo, .breadcrumb-item, ngoku iyafuneka kwinzala .breadcrumbyes

Iileyibhile kunye neebheji

  • Ukudityaniswa .labelkunye .badgenokungacaciswa <label>kwento kunye nokwenza lula amalungu anxulumeneyo.
  • Yongezwe .badge-pillnjengesilungisi sokujonga "ipilisi" engqukuva.
  • Iibheji azisahanjiswa ngokuzenzekelayo kuluhlu lwamaqela kunye namanye amacandelo. Iiklasi eziluncedo ngoku ziyafuneka kuloo nto.
  • .badge-defaultIlahliwe kwaye .badge-secondaryyongezwa kwiiklasi zesilungisi secandelo elisetyenziswa kwenye indawo.

Iiphaneli, i-thumbnails, kunye namaqula

Ilahlwe ngokupheleleyo ngenxa yecandelo elitsha lekhadi.

Iiphaneli

  • .panelukuya .card, ngoku yakhiwe nge flexbox.
  • .panel-defaultisusiwe kwaye akukho kutshintshwa.
  • .panel-groupisusiwe kwaye akukho kutshintshwa. .card-groupayilotshintsho, yahlukile.
  • .panel-headingukuya.card-header
  • .panel-titleukuya .card-title. Kuxhomekeka kwinkangeleko oyifunayo, usenokufuna ukusebenzisa izakhi zesihloko okanye iiklasi (umz. <h3>) .h3okanye iziqalelo ezingqindilili okanye iiklasi (umz. <strong>, <b>, .font-weight-bold). Qaphela ukuba .card-title, ngelixa libizwa ngokufanayo, livelisa inkangeleko eyahlukileyo kune .panel-title.
  • .panel-bodyukuya.card-body
  • .panel-footerukuya.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, kwaye .panel-dangerziye zalahlwa .bg-, .text-, kunye .bordernezinto eziluncedo ezenziwe $theme-colorskwimephu yethu ye-Sass.

Inkqubela phambili

  • Kutshintshwe .progress-bar-*iiklasi zomxholo ngezinto .bg-*eziluncedo. Ngokomzekelo, class="progress-bar progress-bar-danger"iba class="progress-bar bg-danger".
  • Kutshintshwe .activeimivalo yenkqubela phambili ene- .progress-bar-animated.
  • Uhlengahlengiso 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, .leftkwaye .rightngoku .carousel-item-next, .carousel-item-prev, .carousel-item-left, kunye .carousel-item-right.
    • .itemnayo ngoku .carousel-item.
    • Kulawulo lwangaphambili/olulandelayo, .carousel-control.rightkwaye .carousel-control.leftngoku .carousel-control-nextkunye .carousel-control-prev, okuthetha ukuba alusafuni udidi lwesiseko oluthile.
  • 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.

Iitafile

  • Isusiwe inkxaso yeetafile ezinesitayile ezibekwe kwindlwane. Zonke izimbo zetafile ngoku zizuzwe njengelifa kwi-v4 kubakhethi abalula.
  • Kongezwe umahluko wetheyibhile.

Izinto eziluncedo

  • Bonisa, ifihliwe, kunye nokunye:
    • Wenze umboniso oluncedo ukuba uphendule (umzekelo, .d-nonekunye d-{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-printizinto 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-leftkwaye .pull-rightkuba azifuneki .float-leftkwaye .float-right.
  • Uhlobo:
    • Kongezwe iinguqulelo eziphendulayo kwiiklasi zethu zolungelelwaniso lombhalo .text-{sm,md,lg,xl}-{left,center,right}.
  • Ulungelelwaniso kunye nezithuba:
  • I-Clearfix ihlaziywe ukulahla inkxaso kwiinguqulelo zebrawuza endala.

Imixube yesimaphambili somthengisi

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-transformtranslatetranslate3duser-select

Amaxwebhu

Amaxwebhu ethu afumene uphuculo kuyo yonke ibhodi. Naku okusezantsi ezantsi:

  • Sisasebenzisa iJekyll, kodwa sinazo iiplagi kumxube:
    • bugify.rbisetyenziswa ukudwelisa ngokufanelekileyo amangeno kwiphepha lomkhangeli zincwadi we bugs .
    • example.rbyifolokhwe yesiko yeplagi engagqibekanga highlight.rb, ivumela ukubanjwa kwekhowudi yomzekelo.
    • callout.rbyifolokhwe yesiko elifanayo laloo nto, kodwa yenzelwe ii-callouts zethu ezikhethekileyo zamaxwebhu.
    • 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.

Izixhobo eziphendulayo

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-breakpointsimephu ye-Sass endaweni yoko.

Iiklasi zethu zoncedo eziphendulayo ziye zashenxiswa ubukhulu becala ngenxa yezixhobo ezicacileyo display.

  • Iiklasi .hiddenkunye .showneeklasi zisusiwe ngenxa yokuba ziphikisana ne-jQuery $(...).hide()kunye $(...).show()neendlela. Endaweni yoko, zama ukuguqula [hidden]uphawu okanye usebenzise izitayile ezisemgqeni ezifana style="display: none;"ne style="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
  • 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

Endaweni yokusebenzisa .visible-*iiklasi ezicacileyo, wenza into ibonakale ngokungafihli kweso sikrini. Ungadibanisa iklasi enye kunye neklasi .d-*-noneenye .d-*-blockukubonisa 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 iCSS yesiko kwiimeko ezinjalo.