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.0, 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 (engaphandle <div>nengane yakini <input>kanye <label>) nezitayela ezifanayo zesakhiwo (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+ kuphela ne-iOS 7+. 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.
  • Izinqamuleli zegridi 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:
  • 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: 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.

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

I-Modal

• Bhala kabusha ingxenye nge-flexbox.
• Uma kubhekwa ukuhambisa ku-flexbox, ukuqondanisa kwezithonjana zokucashisa kunhlokweni cishe kuphukile 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.

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- .navs, .nav-items, no- .nav-links. Lokhu kwenza i-HTML yakho ivumelane nezimo kakhulu ngenkathi iletha ukwanda okunwetshiwe.

Ibha ye-Navbar

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 ibingaphezulu kancane kwezinkinobho zohlaka ezenziwe ngokwezifiso.

Iimvuthuluka zesinkwa

• 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-groupakusiyo enye indawo, 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.

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 .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).
  • Dropped the bulk of .hidden-* utilities for new display utilities. For example, instead of .hidden-sm-up, use .d-sm-none. Renamed the .hidden-print utilities to use the display utility naming scheme. More info under the Responsive utilities section of this page.
  • Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
• Type:
  • Added responsive variations to our text alignment classes .text-{sm,md,lg,xl}-{left,center,right}.
• Alignment and spacing:
  • Added new responsive margin and padding utilities for all sides, plus vertical and horizontal shorthands.
  • Added boatload of flexbox utilities.
  • Dropped .center-block for the new .mx-auto class.
• Clearfix updated to drop support for older browser versions.

Vendor prefix mixins

Bootstrap 3’s vendor prefix mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use Autoprefixer, they’re no longer necessary.

Removed the following mixins: 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

Documentation

Our documentation received an upgrade across the board as well. Here’s the low down:

• We’re still using Jekyll, but we have plugins in the mix:
  • bugify.rb is used to efficiently list out the entries on our browser bugs page.
  • example.rb is a custom fork of the default highlight.rb plugin, allowing for easier example-code handling.
  • callout.rb is a similar custom fork of that, but designed for our special docs callouts.
  • jekyll-toc is used to generate our table of contents.
• All docs content has been rewritten in Markdown (instead of HTML) for easier editing.
• Pages have been reorganized for simpler content and a more approachable hierarchy.
• We moved from regular CSS to SCSS to take full advantage of Bootstrap’s variables, mixins, and more.

Responsive utilities

All @screen- variables have been removed in v4.0.0. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.

Our responsive utility classes have largely been removed in favor of explicit display utilities.

• The .hidden and .show classes have been removed because they conflicted with jQuery’s $(...).hide() and $(...).show() methods. Instead, try toggling the [hidden] attribute or use inline styles like style="display: none;" and style="display: block;".
• All .hidden- classes have been removed, save for the print utilities which have been renamed.
  • Removed from 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
  • Removed from 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
• Print utilities no longer start with .hidden- or .visible-, but with .d-print-.
  • Old names: .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.