in English

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, kanye none. I- v4 ezinzile yengeziwe flex, inline-flex, table, table-row, kanye table-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-transitionokuguquguqukayo 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_modulesngefolda, 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 ukusekelwa disabledkwesibaluli (ngaphambilini obekudinga isigaba sabazali) futhi sikusekele kangcono ukuqinisekiswa kwefomu lethu.

    Njengengxenye yalokhu, sishintshe i-CSS yokuphatha ama-multiples background-imagekumabhokisi okuhlola amafomu angokwezifiso namarediyo. Ngaphambilini, into manje ekhishiwe .custom-control-indicatoryayinombala 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::beforesinokugcwalisa kanye negradient futhi .custom-control-label::aftersiphatha isithonjana.

    Ukuze wenze ukuhlola kwangokwezifiso emgqeni, engeza .custom-control-inline.

  • Isikhethi esibuyekeziwe samaqembu ezinkinobho ezisuselwe kokokufaka. Esikhundleni [data-toggle="buttons"] { }sesitayela nokuziphatha, sisebenzisa dataisibaluli ekuziphatheni kwe-JS kuphela futhi sithembele .btn-group-toggleekilasini elisha ukwenza isitayela.

  • Kukhishwe .col-form-legendkuvumela okuthuthukisiwe kancane .col-form-label. Le ndlela .col-form-label-smfuthi .col-form-label-lgingasetshenziswa ezintweni <legend>kalula.

  • Okokufaka kwamafayela ngokwezifiso kuthole ushintsho $custom-file-textkokuhluka kwawo kwe-Sass. Ayiseyona imephu ye-Sass efakwe esidlekeni futhi manje inika amandla iyunithi yezinhlamvu eyodwa kuphela— Browseinkinobho njengoba manje sekuwukuphela kwento-mbumbulu ekhiqizwe ku-Sass yethu. Umbhalo Choose filemanje uvela ku- .custom-file-label.

Amaqembu okokufaka

  • Ama-addon eqembu lokokufaka manje aqondene nokubekwa kwawo ngokuhlobene nokokufaka. Sehlile .input-group-addonfuthi .input-group-btnemakilasini amabili amasha, .input-group-prependfuthi .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-grouphhayi 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-colorkanye nokusetshenziswa kwayo ku- .badge. Sisebenzisa umsebenzi wokugqama kombala ukuze sikhethe colorokusekelwe kokuthi background-color, ngakho okuhlukile akudingekile.
  • grayscale()Umsebenzi oqanjwe kabusha gray()ukuze ugweme ukungqubuzana grayscalenesihlungi somdabu se-CSS.
  • Kuqanjwe kabusha .table-inverse, .thead-inverse, futhi .thead-defaultkuya .*-darkfuthi .*-light, ukufanisa izikimu zethu zombala ezisetshenziswa kwenye indawo.
  • Amathebula aphendulayo manje akhiqiza amakilasi ephoyinti ngalinye legridi. Lokhu kwehlukana ku-Beta 1 ngoba .table-responsiveobukade uyisebenzisa kufana kakhulu .table-responsive-md. Manje ungasebenzisa .table-responsivenoma .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-labelKukhishwe ikilasi elingasetshenzisiwe . Uma uye wasebenzisa lesi sigaba, bekuyimpinda .col-form-labelyekilasi elimise maphakathi nendawo ngokuthi a <label>nokokufaka okuhlotshaniswa naso kuzakhiwo zefomu elivundlile.
  • Kushintshwe i color-yiq-mixin esuka kumxube ohlanganisa colorisakhiwo ukuze isebenze ebuyisela inani, okukuvumela ukuthi uyisebenzisele noma iyiphi impahla ye-CSS. Isibonelo, esikhundleni sokuthi color-yiq(#000), ungabhala color: color-yiq(#000);.

Amaphuzu avelele

  • Kwethulwe pointer-eventsukusetshenziswa okusha kumamodeli. Ingaphandle .modal-dialogidlula emicimbini pointer-events: noneenokuphathwa kokuchofoza ngokwezifiso (okwenza ukwazi ukuvele ulalele .modal-backdropkunoma yikuphi ukuchofoza), bese iphikisana nalokho okwangempela .modal-contentnge- 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 pxiyunithi remyethu eyinhloko ye-CSS, nakuba amaphikseli asasetshenziselwa imibuzo yemidiya nokuziphatha kwegridi njengoba izimbobo zokubuka zedivayisi zingathintwa usayizi wohlobo.
  • Usayizi wefonti womhlaba wonke ukhuphuke ukusuka 14pxku- 16px.
  • Kubuyekezwe ama-grid tiers ukuze kwengezwe inketho yesihlanu (ikhuluma namadivayisi amancane 576pxngaphansi nangaphansi) futhi yasusa i- -xsinfix 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.jsonyonke 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- smgrid tier entsha ngezansi 768pxukuze uthole ukulawula kwe-granular okwengeziwe. Manje sinakho xs, sm, md, lg, kanye xl. Lokhu kusho futhi ukuthi wonke ama-tier akhushulelwe izinga elilodwa (ngakho .col-md-6ku-v3 manje .col-lg-6isiku-v4).
    • xsamakilasi egridi ashintshiwe ukuze angadingi i-infix ukuze imele ngokunembe kakhudlwana ukuthi aqala ukusebenzisa izitayela min-width: 0hhayi inani le-pixel elimisiwe. Esikhundleni sokuthi .col-xs-6, manje .col-6. Wonke amanye ama-grid tiers adinga i-infix (isb, sm).
  • 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-readyimiksi yokulungiselela kanye nokusetha make-colusayizi wekholomu ngayinye.flexmax-width
    • Kushintshwe amaphoyinti okunqamula umbuzo wesistimu yegridi yemidiya nobubanzi besiqukathi ukuze kubhekelelwe isigaba segridi esisha futhi kuqinisekiswe ukuthi amakholomu ahlukaniswa ngokulinganayo 12ngobubanzi bawo obukhulu.
    • Izindawo zokunqamuka kwegridi nobubanzi besiqukathi manje sesingathwa ngamamephu we-Sass ( $grid-breakpointskanye $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:
  • Kwehliswe i-plugin ye-Affix jQuery.
    • Sincoma ukuthi usebenzise position: stickyesikhundleni salokho. Bheka i-HTML5 Sicela ufake ukuze uthole imininingwane kanye nezincomo ezithile zokugcwalisa okuningi. Esinye isiphakamiso siwukusebenzisa @supportsumthetho wokuwusebenzisa (isb, @supports (position: sticky) { ... })
    • Uma ubusebenzisa i-Affix ukuze usebenzise izitayela ezengeziwe, okungezona positionizitayela, ama-polyfill angase angasekeli icala lakho lokusebenzisa. Enye inketho yokusetshenziswa okunjalo umtapo wolwazi we -ScrollPos-Styler wenkampani yangaphandle .
  • 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-boxushintsho, ukusuka kumayunithi emkuya remezintweni eziningi, izitayela zesixhumanisi, nokusetha kabusha izinto eziningi zefomu.

Ukuthayipha

  • Kuhanjiswe zonke .text-izinsiza _utilities.scsskufayela.
  • Yehlisiwe .page-headernjengoba izitayela zayo zingasetshenziswa ngezinsiza.
  • .dl-horizontalwehlisiwe. Esikhundleni salokho, sebenzisa .rowfuthi <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-reverseisilungisi sezinsiza zombhalo.
  • .list-inlinemanje idinga ukuthi izingane zayo zohlu lwezinto zibe nesigaba esisha .list-inline-itemesisetshenziswe kuzo.

Izithombe

  • Iqanjwe kabusha .img-responsivekwaba .img-fluid.
  • Iqanjwe kabusha .img-roundedkwaba.rounded
  • Iqanjwe kabusha .img-circlekwaba.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-condensedkwaba .table-smukuhambisana.
  • Kwengezwe .table-inverseinketho entsha.
  • Kwengezwe izilungisi zesihloko sethebula: .thead-defaultkanye .thead-inverse.
  • Kuqanjwe kabusha amakilasi omongo ukuze abe .table-nesiqalo -. Ngakho .active, .success, .warning, .dangerfuthi , , , kanye . .info_.table-active.table-success.table-warning.table-danger.table-info

Amafomu

  • I-elementi ehanjisiwe isethwe kabusha _reboot.scsskufayela.
  • Iqanjwe kabusha .control-labelkwaba .col-form-label.
  • Kuqanjwe kabusha .input-lgfuthi .input-smkuya .form-control-lgfuthi .form-control-sm, ngokulandelana.
  • Amakilasi awehlisiwe .form-group-*ngenxa yokwenza lula. Sebenzisa .form-control-*amakilasi esikhundleni manje.
  • Iwiswe .help-blockfuthi esikhundleni sayo kwafakwa .form-textumbhalo wosizo weleveli yebhulokhi. Ngombhalo wosizo we-inline nezinye izinketho ezivumelana nezimo, sebenzisa amakilasi osizo afana .text-muted.
  • Yehla .radio-inlinefuthi .checkbox-inline.
  • Kuhlanganiswe .checkboxfuthi .radiokube kanye namakilasi .form-checkahlukahlukene ..form-check-*
  • Amafomu avundlile alungisiwe:
    • Yehlisa .form-horizontalimfuneko yekilasi.
    • .form-groupayisasebenzi izitayela ezivela ku- .rowmixin, ngakho .row-ke kuyadingeka manje ekuhlelweni kwegridi evundlile (isb, <div class="form-group row">).
    • Kwengezwe .col-form-labelikilasi elisha kumalebula amaphakathi aqondile ano- .form-controls.
    • Kwengezwe okusha .form-rowkwezakhiwo zefomu elihlangene ngezigaba zegridi (shintshanisa eyakho .rowukuze uthole u-a .form-rowbese uhamba).
  • Ukwesekwa kwamafomu ngokwezifiso angeziwe (kumabhokisi okuhlola, imisakazo, okukhethiwe, nokokufaka kwefayela).
  • Kufakwe esikhundleni .has-error, .has-warning, kanye .has-successnamakilasi ngokuqinisekiswa kwefomu le-HTML5 kusetshenziswa ama-CSS :invalidnamakilasi :valid-mbumbulu.
  • Iqanjwe kabusha .form-control-statickwaba .form-control-plaintext.

Izinkinobho

  • Iqanjwe kabusha .btn-defaultkwaba .btn-secondary.
  • Ilahle .btn-xsikilasi ngokuphelele njengoba .btn-smincane kakhulu kune-v3's.
  • Isici senkinobho ebabazekayo se- button.jsplugin 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 :disablednjengoba i-IE9+ isekela :disabled. Nokho fieldset[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-xsikilasi 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.
  • 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 .dividerkwaba .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 ::afterku- .dropdown-toggle.

Isistimu yegridi

  • Kwengezwe i-breakpoint entsha 576pxyegridi njengokuthi sm, okusho ukuthi manje sekunesamba sezigaba ezinhlanu ( xs, sm, md, lg, kanye xl).
  • 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-4futhi .col-4.pull-8, ungasebenzisa .col-8.order-2futhi .col-4.order-1.
  • Kwengezwe amakilasi okusetshenziswa kwe-flexbox yesistimu yegridi nezingxenye.

Amaqembu ohlwini

  • Bhala kabusha ingxenye nge-flexbox.
  • Kuthathelwe a.list-group-itemindawo ikilasi elisobala, .list-group-item-action, lesixhumanisi sesitayela nezinguqulo zezinkinobho zezinto zeqembu.
  • Ikilasi .list-group-flushelingeziwe elizosetshenziswa namakhadi.
  • 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) kanye loaded.bs.modalnomcimbi ohambisanayo ususiwe. Sincoma ukuthi usebenzise isifanekiso sohlangothi lweklayenti noma uhlaka olubophezela idatha, noma ushayele i-jQuery.load ngokwakho.
  • 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- .navs, .nav-items, no- .nav-links. Lokhu kwenza i-HTML yakho ivumelane nezimo kakhulu ngenkathi kuletha ukwanda okungeziwe.

I-navbar ibhalwe kabusha ngokuphelele ku-flexbox ngokusekelwa okuthuthukisiwe kokuqondanisa, ukuphendula, nokwenza ngendlela oyifisayo.

  • Impatho ephendulayo ye-navbar manje isisetshenziswa .navbarekilasini ngendlela edingekayo .navbar-expand-{breakpoint} lapho ukhetha ukuthi ugoqe kuphi ibha ye-navbar. Ngaphambilini lokhu bekuwukuguqulwa Okuncane okuguquguqukayo futhi kudinga ukubuyiselwa kabusha.
  • .navbar-defaultmanje .navbar-light, nakuba .navbar-darkkusafana. Okukodwa kwalokhu kuyadingeka ku-navbar ngayinye. Nokho, lezi zigaba azisasethi background-colors; kunalokho zithinta kuphela color.
  • 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-togglemanje .navbar-togglerfuthi inezitayela ezahlukene kanye nemakhaphu yangaphakathi (akusekho amasekhondi amathathu <span>).
  • Liyeke .navbar-formikilasi ngokuphelele. Akusadingeki; esikhundleni salokho, vele usebenzise .form-inlinefuthi usebenzise izinsiza ze-margin njengoba kudingeka.
  • Ama-Navbar awasafaki margin-bottomnoma border-radiusngokuzenzakalelayo. 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- .paginations
  • Ishiye .pageringxenye ngokuphelele njengoba ibingaphezu kancane kwezinkinobho zohlaka ezenziwe ngokwezifiso.
  • Isigaba esicacile, .breadcrumb-item, manje siyadingeka enzalweni ye- .breadcrumbs

Amalebula namabheji

  • Kuhlanganiswe .labelfuthi .badgekuhlukaniswe kusuka ku- <label>elementi nokwenza lula izingxenye ezihlobene.
  • Kwengezwe .badge-pillnjengesilungisi sokubukeka “kwephilisi” eliyindilinga.
  • Amabheji awasantanti ngokuzenzakalelayo emaqenjini ohlu nezinye izingxenye. Amakilasi ezinsiza manje ayadingeka kulokho.
  • .badge-defaultKwehlisiwe futhi .badge-secondarykwengezwa kumakilasi okuguqula ingxenye asetshenziswa kwenye indawo.

Amaphaneli, izithonjana, nemithombo

Ilahliwe ngokuphelele engxenyeni yekhadi entsha.

Amaphaneli

  • .panelkuya ku- .card, manje yakhiwe nge-flexbox.
  • .panel-defaultisusiwe futhi akukho okushintshwayo.
  • .panel-groupisusiwe futhi akukho okushintshwayo. .card-groupakusikhona ukumiselela, kuhlukile.
  • .panel-headingku.card-header
  • .panel-titleku .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-bodyku.card-body
  • .panel-footerku.card-footer
  • .panel-primary, .panel-success, , .panel-info, .panel-warning, futhi .panel-dangerkwehlisiwe ku- .bg-, .text-, kanye .bordernezinsiza ezenziwe $theme-colorskumephu yethu ye-Sass.

Inqubekelaphambili

  • Kushintshwe .progress-bar-*amakilasi anomongo ngezinsiza .bg-*. Ngokwesibonelo, class="progress-bar progress-bar-danger"iba class="progress-bar bg-danger".
  • Kufakwe esikhundleni .activesemishayo yenqubekelaphambili egqwayizayo ene- .progress-bar-animated.
  • 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 .rightmanje .carousel-item-next, .carousel-item-prev, .carousel-item-left, kanye .carousel-item-right.
    • .itemnayo manje .carousel-item.
    • Ezilawulini ezandulele/ezilandelayo, .carousel-control.rightfuthi .carousel-control.leftmanje .carousel-control-nextfuthi .carousel-control-prev, okusho ukuthi azisadingi isigaba sesisekelo esithile.
  • 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-nonekanye d-{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-leftfuthi .pull-rightnjengoba awasafuneki .float-leftfuthi .float-right.
  • Uhlobo:
    • Kwengezwe ukuhlukahluka okusabelayo kumakilasi ethu okuqondanisa umbhalo .text-{sm,md,lg,xl}-{left,center,right}.
  • Ukuqondanisa nesikhala:
  • 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,translate3duser-select

Amadokhumenti

Amadokhumenti ethu athole ukuthuthukiswa kulo lonke elasebhodini. Nakhu okuphansi phansi:

  • Sisasebenzisa i-Jekyll, kodwa sinama-plugin kumxube:
    • bugify.rbisetshenziselwa ukwenza kuhlu ngempumelelo okufakiwe ekhasini lesiphazamisi sesiphequluli .
    • example.rbiyimfoloko yangokwezifiso ye- highlight.rbplugin ezenzakalelayo, evumela ukuphatha ikhodi yesibonelo kalula.
    • callout.rbiyimfoloko 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-breakpointsimephu ye-Sass esikhundleni salokho.

Izigaba zethu zezinsiza ezisabelayo zisusiwe kakhulu ngokuvuna displayizinsiza ezisobala.

  • Amakilasi .hiddenkanye .shownamakilasi asusiwe ngoba aphikisana ne-jQuery $(...).hide()kanye $(...).show()nezindlela. Kunalokho, zama ukuguqula [hidden]isibaluli noma usebenzise izitayela ezisemgqeni ezifana style="display: none;"nokuthi style="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
  • 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

Kunokuba usebenzise .visible-*amakilasi asobala, wenza into ibonakale ngokungafihli kulowo sayizi wesikrini. Ungahlanganisa .d-*-noneikilasi elilodwa nekilasi elilodwa .d-*-blockukuze 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.