We de muf go na v4

Bootstrap 4 na wan big rirayt fɔ di wan ol prɔjek. Di chenj dɛm we wi fɔ no mɔ, dɛn dɔn sɔmariz dɔŋ ya, dɔn dɛn dɔn sho mɔ spɛshal chenj dɛn to di kɔmpɔnɛnt dɛn we gɛt fɔ du wit am.

Chenj dɛn we nɔ de chenj

We wi de muf frɔm Beta 3 to wi stebul v4.0 rilis, nɔ chenj dɛn de we de brok, bɔt sɔm chenj dɛn de we wi fɔ no.

We dɛn de print

• Fiks di print yutiliti dɛn we dɔn brok. Bifo dis tɛm, fɔ yuz .d-print-*klas go mek ɛni ɔda .d-*klas nɔ de igen we yu nɔ bin de ɛkspɛkt. Naw, dɛn de mach wi ɔda displei yutiliti dɛn ɛn dɛn jɔs de aplay to da midia de ( @media print).

• Dɛn dɔn ɛkspɛn di print displei yutiliti dɛn we de fɔ mek i mach ɔda yutiliti dɛn. Beta 3 ɛn ɔda wan dɛn nɔmɔ bin gɛt block, inline-block, inline, ɛn none. Stebul v4 ad flex, inline-flex, table, table-row, ɛn table-cell.

• Fiks print privyu rɛnda akɔdin to brawza dɛn wit nyu print stayl dɛn we spɛsifa @page size.

Beta 3 chenj

Wail Beta 2 bin si di bɔku pan wi brek chenj dɛn di tɛm we di beta faz bin de, bɔt wi stil gɛt sɔm we dɛn bin nid fɔ adrɛs insay di Beta 3 rilis. Dɛn chenj ya kin apin if yu de ɔpdet to Beta 3 frɔm Beta 2 ɔ ɛni ol vɛshɔn fɔ Bootstrap.

Ɔda

• Rimov di $thumbnail-transitionvariebul we dɛn nɔ yuz. Wi no bin de transishon enitin, so na jos ekstra kod.
• Di npm pakej nɔ gɛt ɛni ɔda fayl igen pas wi sɔs ɛn dist fayl dɛn; if yu bin abop pan dɛn ɛn yu bin de rɔn wi skript dɛn tru di node_modulesfɔlda, yu fɔ adap yu wokflɔ.

Fɔm dɛn

• Rayt bak ɔl tu di kɔstɔm ɛn difɔlt chɛkbɔks ɛn redio dɛn. Naw, dɛn ɔl tu gɛt HTML strɔkchɔ we de mach (ɔta <div>wit brɔda ɛn sista <input>ɛn <label>) ɛn di sem layout stayl dɛn (stacked difɔlt, inlayn wit modifya klas). Dis de mek wi ebul fɔ stayl di lɛbl bays pan di input in stet, we de mek i izi fɔ sɔpɔt di disabledatribyut (we bin de nid fɔ gɛt mama ɛn papa klas bifo) ɛn fɔ sɔpɔt wi fɔm validɛshɔn bɛtɛ.

  As pat pan dis, wi dɔn chenj di CSS fɔ manej bɔku background-images na kɔstɔm fɔm chɛkbɔks ɛn redio dɛn. Bifo dis tɛm, di .custom-control-indicatorɛlimɛnt we dɛn dɔn pul naw bin gɛt di bakgrɔn kɔlɔ, di grɛdiɛnt, ɛn di SVG aykɔn. Fɔ kɔstɔmayt di bakgrɔn gradient bin min fɔ chenj ɔl dɛn wan dɛn de ɛvri tɛm we yu nid fɔ chenj jɔs wan. Naw, wi gɛt .custom-control-label::beforefɔ di fil ɛn gradient ɛn .custom-control-label::afterhandel di aykɔn.

  Fɔ mek yu kɔstɔm chɛk insay di layn, ad .custom-control-inline.

• Updated selektor fɔ input-based bɔtin grup dɛn. Insted of [data-toggle="buttons"] { }fɔ stayl ɛn bihayvya, wi de yuz di dataatribyut jɔs fɔ JS bihayvya ɛn abop pan nyu .btn-group-toggleklas fɔ stayl.

• Rimov .col-form-legendin favɔrit fɔ wan smɔl impɔtant .col-form-label. Dis we .col-form-label-smɛn .col-form-label-lgdɛn kin yuz am pan <legend>ɛlimɛnt dɛn wit izi.

• Kastom fayl input dɛn bin gɛt chenj to dɛn $custom-file-textSass vɛriɔbul. I nɔto nest Sass map igen ɛn naw i jɔs de pawa wan string—di Browsebɔtin as dat naw na di wan ol pseudo-ɛlimɛnt we dɛn dɔn jenarayz frɔm wi Sass. Di Choose filetɛks naw kɔmɔt frɔm di .custom-file-label.

Input grup dɛn

• Input grup addons naw spesifik to dɛn plesmɛnt rilitiv to wan input. Wi dɔn drɔp .input-group-addonɛn .input-group-btnfɔ tu nyu klas dɛn, .input-group-prependɛn .input-group-append. Yu fɔ yuz wan apɛnd ɔ wan prɛpɛnd klia wan naw, we go mek bɔku pan wi CSS simpul. Insay wan apɛnd ɔ prɛpɛnd, put yu bɔtin dɛn lɛk aw dɛn go de ɛni ɔdasay, bɔt rap tɛks insay .input-group-text.

• Validɛshɔn stayl dɛn naw dɛn de sɔpɔt, lɛk bɔku input dɛn (pan ɔl we yu kin jɔs validet wan input fɔ ɛni grup).

• Sayz klas dɛn fɔ de pan di mama ɔ papa .input-groupɛn nɔto di wan wan fɔm ɛlimɛnt dɛn.

Beta 2 chenj

We wi de na beta, wi de aim fɔ gɛt ɛni chenj we de brok. Bɔt nɔto ɔltɛm tin kin go lɛk aw dɛn bin dɔn plan fɔ du. Dis dɔŋ ya na di brek chenj dɛn we yu fɔ mɛmba we yu de muf frɔm Beta 1 to Beta 2.

Brek we de brok

• Rimov $badge-colordi vayriɔbul ɛn di we aw dɛn de yuz am pan .badge. Wi de yuz wan kala kɔntrast fɛnshɔn fɔ pik wan colorbays pan di background-color, so di vɛriɔbul nɔ nid.
• Rinem grayscale()funkshɔn to gray()fɔ avɔyd fɔ brok kɔnflikt wit di CSS nativ grayscalefilta.
• Rinem .table-inverse, .thead-inverse, ɛn .thead-defaultto .*-darkɛn .*-light, we de mach wi kɔlɔ skim dɛn we wi yuz ɔdasay.
• Rispɔnsiv tebul dɛn naw de jenarayz klas fɔ ɛni grid brekpɔynt. Dis brok frɔm Beta 1 in dat di .table-responsiveyu dɔn de yuz na mɔ lɛk .table-responsive-md. Yu kin yuz naw .table-responsiveɔ .table-responsive-{sm,md,lg,xl}as nid de.
• Drɔp Bower sɔpɔt as di pakej manija dɔn deprɛkt fɔ ɔda we dɛn (ɛgz., Yarn ɔ npm). Si bower/bower#2298 fɔ di ditel dɛn.
• Bootstrap stil nid jQuery 1.9.1 ɔ ɔp, bɔt dɛn advays yu fɔ yuz vɛshɔn 3.x bikɔs di brawza dɛn we v3.x de sɔpɔt na di wan dɛn we Bootstrap de sɔpɔt plus v3.x gɛt sɔm sikyɔriti fiks dɛn.
• Rimov di .form-control-labelklas we dɛn nɔ yuz. If yu bin du mek yus to dis klas, na bin dupliket fɔ di .col-form-labelklas we vertikal sɛntrɛd a <label>wit in asosiet input insay ɔrizɔntal fɔm layout dɛn.
• Chenj di color-yiqfrɔm wan mixin we inklud di colorprɔpati to wan fɛnshɔn we de ritɔn wan valyu, we de alaw yu fɔ yuz am fɔ ɛni CSS prɔpati. Fɔ ɛgzampul, instead fɔ rayt color-yiq(#000), yu go rayt color: color-yiq(#000);.

Di aylayt dɛn

• Introdyus nyu pointer-eventsyuz pan modals. Di ɔta .modal-dialogpas tru ivintɛns wit pointer-events: nonefɔ kɔstɔm klik handlin (mek am pɔsibul fɔ jɔs lisin pan di .modal-backdropfɔ ɛni klik), ɛn afta dat i de kɔntrakt am fɔ di aktual .modal-contentwit pointer-events: auto.

Ɛksplen

Na di big tikɛt tin dɛn we yu go want fɔ no bɔt we yu de muf frɔm v3 to v4.

Brawza sɔpɔt

• Drɔp IE8, IE9, ɛn iOS 6 sɔpɔt. v4 naw na onli IE10+ en iOS 7+. Fɔ sayt dɛn we nid ɛni wan pan dɛn wan ya, yuz v3.
• Ad ɔfishal sɔpɔt fɔ Andrɔyd v5.0 Lollipop in Brawza ɛn WɛbView. Di fɔs wan dɛn we dɛn bin dɔn yuz fɔ di Andrɔyd Brawza ɛn WɛbView stil de sɔpɔt dɛn nɔmɔ we nɔ ɔfishal wan.

Di chenj dɛn we de apin ɔlsay na di wɔl

• Flexbox na difɔlt we dɛn dɔn ɛnabul. In jɛnɛral dis min fɔ muv away frɔm flot ɛn mɔ akɔdin to wi kɔmpɔnɛnt dɛn.
• Switch frɔm Less to Sass fɔ wi sɔs CSS fayl dɛn.
• Switch frɔm pxto remas wi praymari CSS yunit, pan ɔl we dɛn stil de yuz piksɛl fɔ midia kwɛstyɔn ɛn grid bihayvya as divays viupɔt dɛn nɔ de afɛkt di tayp saiz.
• Di glob ɔl font-sayz bin go ɔp frɔm 14pxto 16px.
• Rivamp grid taya fɔ ad wan fayv opshɔn (adrɛs smɔl divays dɛn na 576pxɛn dɔŋ) ɛn pul di -xsinfiks frɔm dɛn klas dɛn de. Fɔ ɛgzampul: .col-6.col-sm-4.col-md-3.
• Riples di separet opshɔnal tim wit kɔnfigyut opshɔn dɛn via SCSS vɛriɔbul dɛn (ɛgz., $enable-gradients: true).
• Bil sistem ɔvahɛl fɔ yuz wan siriɔs npm skript instead ɔf Grunt. Si package.jsonfɔ ɔl di skript dɛn, ɔ wi prɔjek ridmi fɔ lokal divɛlɔpmɛnt nid dɛn.
• Nɔn-rɛspɔnsiv yus fɔ Bootstrap nɔ de sɔpɔt igen.
• Drɔp di onlayn Kastamayz in favɔrit fɔ mɔ bɔku sɛtup dɔkyumentri ɛn kɔstɔmayz bild dɛn.
• Ad dɔzin nyu yutiliti klas fɔ kɔmɔn CSS prɔpati-valyu pe ɛn margin/padding spays sɔtkat dɛn.

Grid sistem

• Dɛn bin muf am go na flexbox.
  • Ad sɔpɔt fɔ fleksbɔks na di grid miksin ɛn prɛdifayn klas dɛn.
  • As pat pan flexbox, inklud sɔpɔt fɔ vertikal ɛn ɔrizɔntal alaynɛshɔn klas dɛn.
• Updated grid klas nem ɛn wan nyu grid taya.
  • Ad wan nyu smgrid taya dɔŋ ya 768pxfɔ mɔ granul kɔntrol. Naw wi gɛt xs, sm, md, lg, ɛn xl. Dis min bak se evri taya don bump op wan levul (so .col-md-6in v3 naw .col-lg-6na v4).
  • xsgrid klas dɛn dɔn chenj fɔ nɔ nid di infiks fɔ ripresent mɔ kɔrɛkt wan se dɛn bigin fɔ aplay stayl dɛn na min-width: 0ɛn nɔto wan sɛt piksɛl valyu. Insted of .col-xs-6, na naw .col-6. Ɔl di ɔda grid taya dɛn nid di infiks (ɛgz., sm).
• Updated grid saiz, miksin, ɛn vɛriɔbul dɛn.
  • Grid gɔta dɛn naw gɛt Sass map so yu kin spɛsifa spɛshal gɔta wit dɛn na ɛni brekpɔynt.
  • Updated grid mixins fɔ yuz wan make-col-readyprep mixin ɛn a make-colfɔ sɛt di flexɛn max-widthfɔ wan wan kɔlɔm sayzin.
  • Chenj grid sistem midia kwɛstyɔn brekpɔynt ɛn kɔntena wid fɔ akɔn fɔ nyu grid tay ɛn mek shɔ se kɔlɔm dɛn ivin divayd bay 12na dɛn maks wit.
  • Grid brekpoint ɛn kɔntena width dɛn naw dɛn de handle via Sass map ( $grid-breakpointsɛn $container-max-widths) instead ɔf wan anful sɛpret vɛriɔbul dɛn. Dɛn wan ya de riples di @screen-*vɛriɔbul dɛn ɔlsay ɛn alaw yu fɔ fulɔp fɔ kɔstɔmayz di grid tay dɛn.
  • Di kwɛstyɔn dɛn we pipul dɛn kin aks na di midia sɛf dɔn chenj. Insted fɔ ripit wi midia kwɛstyɔn diklareshɔn dɛn wit di sem valyu ɛvri tɛm, naw wi gɛt @include media-breakpoint-up/down/only. Naw, bifo yu rayt @media (min-width: @screen-sm-min) { ... }, yu kin rayt @include media-breakpoint-up(sm) { ... }.

Di tin dɛn we de insay di bɔdi

• Dɛn dɔn drɔp panɛl dɛn, smɔl pikchɔ dɛn, ɛn wɛl dɛn fɔ wan nyu kɔmpɔnɛnt we gɛt ɔltin, we na kad dɛn .
• Drɔp di Glyphicons aykɔn font. If yu nid aykɔn dɛn, sɔm tin dɛn we yu go ebul fɔ du na:
  • di ɔpstrim vɛshɔn fɔ Glyphicons
  • Ɔktikɔn dɛn
  • Fɔnt Awesome fɔ si
  • Si di Extend pej fɔ si di ɔda tin dɛn we yu go yuz fɔ du dis. Yu gɛt ɔda advays dɛn? Duya opin wan isyu ɔ PR.
• Drɔp di Affix jQuery plɔgin.
  • Wi kin advays yu fɔ yuz position: stickyinsted. Si di HTML5 Duya ɛntri fɔ di ditel dɛn ɛn sɔm patikyula polifil rɛkɔmɛndishɔn dɛn. Wan advays na fɔ yuz wan @supportslɔ fɔ impruv am (ɛgz., @supports (position: sticky) { ... })/
  • If yu bin de yuz Affix fɔ aplay ɔda, nɔ- positionstayl dɛn, di polifil dɛn nɔ go sɔpɔt yu yuz kes. Wan tin we yu kin pik fɔ yuz dɛn kayn tin ya na di tɔd-pati ScrollPos-Styler laybri.
• Drɔp di pej kɔmpɔnɛnt as i bin essentially smɔl kɔstɔmayt bɔtin dɛn.
• Rifaktɔr klos ɔl di kɔmpɔnɛnt dɛn fɔ yuz mɔ nɔ-nɛst klas sɛlɛktɔ dɛn instead ɔf ɔva-spɛsifi k pikin sɛlɛktɔ dɛn.

Bay kɔmpɔnɛnt

Dis list de sho di men chenj dɛn bay kɔmpɔnɛnt bitwin v3.xx ɛn v4.0.0.

Ribɔt bak

Nyu to Bootstrap 4 na di Reboot , wan nyu staylshit we bil pan Normalize wit wi yon sɔm kayn opinionated riset stayl dɛn. Di sɛlɛktɔ dɛn we de na dis fayl de yuz ɛlimɛnt dɛn nɔmɔ—nɔ klas nɔ de ya. Dis de ayd wi riset stayl dɛm frɔm wi kɔmpɔnɛnt stayl dɛm fɔ wan mɔ modular aprɔch. Sɔm pan di impɔtant riset dɛn we dis inklud na di box-sizing: border-boxchenj, muf frɔm emto remyunit dɛn pan bɔku ɛlimɛnt dɛn, link stayl dɛn, ɛn bɔku fɔm ɛlimɛnt riset dɛn.

Taypografi

• Muv ɔl di .text-yutiliti dɛn to di _utilities.scssfayl.
• Drɔp .page-headeras in stayl dɛn kin aplay via yutiliti dɛn.
• .dl-horizontaldɔn drɔp am. Bifo dat, yuz .rowpan <dl>ɛn yuz grid kɔlɔm klas (ɔ miksin) pan in <dt>ɛn <dd>pikin dɛn.
• Ridizayn blɔkkɔt dɛn, muv dɛn stayl dɛn frɔm di <blockquote>ɛlimɛnt to wan klas, .blockquote. Drɔp di .blockquote-reversemodifya fɔ tɛks yutiliti dɛn.
• .list-inlinenaw i nid fɔ mek in pikin dɛn list tin dɛn gɛt di nyu .list-inline-itemklas we dɛn dɔn aplay to dɛn.

Imej dɛn

• Dɛn chenj di nem .img-responsiveto .img-fluid.
• Dɛn chenj di nem .img-roundedto.rounded
• Dɛn chenj di nem .img-circleto.rounded-circle

Tebul dɛn

• Klose to ɔl di instans dɛn fɔ di >sɛlɛktɔ dɔn pul, we min se di tebul dɛn we dɛn dɔn nɛst go naw ɔtomɛtik inhɛrit stayl dɛn frɔm dɛn mama ɛn papa. Dis kin rili mek wi sɛlɛktɔ dɛn ɛn di tin dɛn we wi kin kɔstɔmayt, simpul.
• Rinem .table-condensedto .table-smfɔ kɔnsistɛns.
• Dɛn ad wan nyu .table-inverseopshɔn.
• Dɛn ad tebul hεda modifya dɛn: .thead-defaultɛn .thead-inverse.
• Rinem kɔntɛkstual klas dɛn fɔ gɛt .table--prɛfiks. Na dat mek .active, .success, .warning, .dangerɛn .infoto .table-active, .table-success, .table-warning, .table-dangerɛn .table-info.

Fɔm dɛn

• Elemɛnt we dɛn dɔn muv de riset to di _reboot.scssfayl.
• Dɛn chenj di nem .control-labelto .col-form-label.
• Rinem .input-lgɛn .input-smto .form-control-lgɛn .form-control-sm, rispɛktful wan.
• Drɔp .form-group-*klas fɔ simpul tin. Yuz .form-control-*klas dɛn insted naw.
• Drɔp .help-blockɛn riples am wit .form-textfɔ blɔk-lɛvel ɛp tɛks. Fɔ inlayn ɛp tɛks ɛn ɔda fleksibul opshɔn dɛn, yuz yutiliti klas dɛn lɛk .text-muted.
• Dɛn dɔn drɔp .radio-inlineam ɛn .checkbox-inline.
• Kɔnsolidɛt .checkboxɛn .radioinsay .form-checkɛn di difrɛn .form-check-*klas dɛn.
• Ɔrizɔntal fɔm dɛn we dɛn dɔn ɔvahɛl:
  • Drɔp di .form-horizontalklas rikwaymɛnt.
  • .form-groupnɔ de aplay stayl dɛn igen frɔm di .rowvia mixin, so .rownaw i nid fɔ ɔrizɔntal grid layout dɛn (ɛgz., <div class="form-group row">).
  • Ad nyu .col-form-labelklas to vertikal sɛnta lɛbl dɛn wit .form-controls.
  • Ad nyu .form-rowfɔ kɔmpakt fɔm layout wit di grid klas dɛn (swap yu .rowfɔ a .form-rowɛn go).
• Ad kɔstɔm fɔm sɔpɔt (fɔ chɛkbɔks, redio, sɛlɛkshɔn, ɛn fayl input dɛn).
• Riples .has-error, .has-warning, ɛn .has-successklas dɛn wit HTML5 fɔm validɛshɔn via CSS’s :invalidɛn :validpseudo-klas dɛn.
• Dɛn chenj di nem .form-control-staticto .form-control-plaintext.

Bɔtin dɛn

• Dɛn chenj di nem .btn-defaultto .btn-secondary.
• Drop di .btn-xsklas entirely as .btn-smis proportionally plenti smol dan v3's.
• Di stetful bɔtin ficha fɔ di button.jsjQuery plɔgin dɔn drɔp. Dis inklud di $().button(string)ɛn $().button('reset')we dɛn de du am. Wi advays yu fɔ yuz smɔl kɔstɔm JavaSkript insted, we go gɛt di bɛnifit fɔ biev jɔs lɛk aw yu want am.
  • Notis se dɛn dɔn kip di ɔda tin dɛn we de na di plɔgin (bɔtin chɛkbɔks dɛn, bɔtin redio dɛn, bɔtin dɛn we gɛt wan tɔgl) na v4.
• Chenj bɔtin dɛn' [disabled]to :disabledas IE9+ de sɔpɔt :disabled. Aweva fieldset[disabled]i stil nid bikɔs nativ disabled filset dɛn stil de bɔg na IE11 .

Bɔtin grup

• Rirayt kɔmpɔnɛnt wit fleksbɔks.
• Dɛn dɔn pul .btn-group-justifiedam . As riplesmɛnt yu kin yuz <div class="btn-group d-flex" role="group"></div>as wrap rawnd ɛlimɛnt dɛn wit .w-100.
• Drɔp di .btn-group-xsklas ɔltogɛda giv rimobul fɔ .btn-xs.
• Rimov klia spes bitwin bɔtin grup dɛn na bɔtin tulba dɛn; yuz margin yutiliti dɛn naw.
• Impɔtant dɔkyumentri fɔ yuz wit ɔda kɔmpɔnɛnt dɛn.

Drɔpdɔwn dɛn

• Switch frɔm mama ɛn papa sɛlɛktɔ to singul klas fɔ ɔl di kɔmpɔnɛnt dɛn, modifya dɛn, ɛn ɔda tin dɛn.
• Simpul drɔpdɔwn stayl dɛn fɔ nɔ ship igen wit aro dɛn we de ɔp ɔ dɔŋ we dɛn ataya to di drɔpdɔwn mɛnyu.
• Dropdowns kin bil wit <div>s ɔ <ul>s naw.
• Ribild drɔpdɔwn stayl ɛn mak fɔ gi izi, bil-in sɔpɔt fɔ <a>ɛn <button>bays drɔpdɔwn aytem dɛn.
• Dɛn chenj di nem .dividerto .dropdown-divider.
• Drɔpdɔwn tin dɛn naw nid fɔ .dropdown-item.
• Drɔpdɔwn tɔgl dɛn nɔ nid fɔ gɛt ɛksplisit igen <span class="caret"></span>; dis naw de provayd otomatik via CSS's ::afteron .dropdown-toggle.

Grid sistem

• Ad wan nyu 576pxgrid brekpoint as sm, we min se naw fayv totɛl taya dɛn de ( xs, sm, md, lg, ɛn xl).
• Rinem di rispɔnsiv grid modifya klas dɛn frɔm .col-{breakpoint}-{modifier}-{size}to .{modifier}-{breakpoint}-{size}fɔ simpul grid klas dɛn.
• Drɔp push ɛn pul modifya klas fɔ di nyu fleksbɔks-pawa orderklas dɛn. Fɔ ɛgzampul, instead fɔ .col-8.push-4ɛn .col-4.pull-8, yu go yuz .col-8.order-2ɛn .col-4.order-1.
• Add flexbox yutiliti klas fɔ grid sistem ɛn kɔmpɔnɛnt dɛn.

Lista di grup dɛn

• Rirayt kɔmpɔnɛnt wit fleksbɔks.
• Riples a.list-group-itemwit wan klia klas, .list-group-item-action, fɔ stayl link ɛn bɔtin vɛshɔn dɛn fɔ list grup aytem dɛn.
• Dɛn ad .list-group-flushklas fɔ yuz wit kad dɛn.

Modal we de sho aw fɔ du am

• Rirayt kɔmpɔnɛnt wit fleksbɔks.
• Given muv to flexbox, alaynɛshɔn fɔ dismis aykɔn dɛn na di hεda go mɔs brok as wi nɔ de yuz flot igen. Floated content de kam fɔs, bɔt wit flexbox dat nɔ de igen. Update yu dismiss aykɔn dɛn fɔ kam afta modal taytul dɛn fɔ fiks.
• Di remoteopshɔn (we dɛn kin yuz fɔ ɔtomɛtik lod ɛn injɛkt ɛksternal kɔntinyu insay wan modal) ɛn di kɔrɛspɔndɛns loaded.bs.modalivin bin kɔmɔt. Wi kin rikɔmɛnd insted fɔ yuz klaynt-sayd tɛmplatin ɔ wan data binding fremwɔk, ɔ kɔl jQuery.load yusɛf.

Navs fɔ di wan dɛn we de

• Rirayt kɔmpɔnɛnt wit fleksbɔks.
• Drɔp klos ɔl di >sɛlɛktɔ dɛn fɔ simpul stayl via un-nested klas dɛn.
• Insted ɔf HTML-spɛsifi k sɛlɛktɔ dɛn lɛk .nav > li > a, wi de yuz sɛpret klas dɛn fɔ .navs, .nav-items, ɛn .nav-links. Dis de mek yu HTML fleksibul mɔ we yu de briŋ inkris ɛkstensibiliti.

Navbar fɔ di wan dɛn we de

Di navbar dɔn ɔlrɛdi rayt bak insay flexbox wit impɔtant sɔpɔt fɔ alaynɛshɔn, rispɔnsiv, ɛn kɔstɔmayshɔn.

• Rispɔnsiv navbar bihayvya dɛn naw de aplay to di .navbarklas via di rikwayd .navbar-expand-{breakpoint} usay yu pik usay fɔ kolap di navbar. Bifo dis na bin Less variebul modifyeshɔn ɛn i bin nid fɔ rikompayl.
• .navbar-defaultna naw .navbar-light, pan ɔl we .navbar-darki stil de di sem. Wan pan dɛn tin ya nid fɔ de na ɛni navbar. Bɔt dɛn klas ya nɔ de sɛt background-colors igen; insted dɛn essentially jɔs afɛkt color.
• Navbars naw nid bakgrɔn diklareshɔn fɔ sɔm kayn. Pik frɔm wi bakgrɔn yutiliti dɛn ( .bg-*) ɔ sɛt yu yon wit di layt/invas klas dɛn we de ɔp fɔ mad kɔstɔmayshɔn .
• Given flexbox stayl, navbars kin yuz flexbox yutiliti naw fɔ izi alaynɛshɔn opshɔn dɛn.
• .navbar-togglena naw .navbar-togglerɛn i gɛt difrɛn stayl ɛn insay mak (nɔ gɛt mɔ tri <span>s).
• Drɔp di .navbar-formklas ɔltogɛda. I nɔ nid fɔ de igen; bifo dat, jɔs yuz .form-inlineɛn yuz margin yutiliti dɛn as nid de.
• Navbar dɛn nɔ de inklud margin-bottomɔ border-radiusbay difɔlt igen. Yuz yutiliti dɛn as nid de.
• Ɔl di ɛgzampul dɛn we gɛt navbar dɛn dɔn ɔpdet fɔ mek dɛn gɛt nyu mak.

Pej dɛn we dɛn rayt

• Rirayt kɔmpɔnɛnt wit fleksbɔks.
• Naw dɛn nid fɔ gɛt ɛksplisit klas dɛn ( .page-item, .page-link) pan di pikin dɛn we kɔmɔt na .paginations
• Drɔp di .pagerkɔmpɔnɛnt ɔltogɛda as i bin smɔl pas di kɔstɔmayt ɔtlayn bɔtin dɛn.

Di tin dɛn we dɛn kin yuz fɔ mek bred

• Wan klia klas, .breadcrumb-item, naw nid fɔ de pan di pikin dɛn we kɔmɔt na .breadcrumbs

Lebul ɛn badge dɛn

• Kɔnsolidɛt .labelɛn .badgefɔ disambiguate frɔm di <label>ɛlimɛnt ɛn simpul rilayt kɔmpɔnɛnt dɛn.
• Ad .badge-pillas modifya fɔ rawnd “pil” luk.
• Badge dɛn nɔ de flot ɔtomɛtik wan igen na list grup dɛn ɛn ɔda kɔmpɔnɛnt dɛn. Yutiliti klas dɛn naw nid fɔ de fɔ dat.
• .badge-defaultdɔn drɔp ɛn .badge-secondaryad fɔ mek i mach di kɔmpɔnɛnt modifya klas dɛn we dɛn yuz ɔdasay.

Panɛl dɛn, smɔl pikchɔ dɛn, ɛn wɛl dɛn

Drɔp ɔl fɔ di nyu kad kɔmpɔnɛnt.

Panɛl dɛn

• .panelto .card, naw dɛn dɔn bil am wit fleksbɔks.
• .panel-defaultdɛn dɔn pul am ɛn dɛn nɔ gɛt ɛnitin fɔ tek in ples.
• .panel-groupdɛn dɔn pul am ɛn dɛn nɔ gɛt ɛnitin fɔ tek in ples. .card-groupnɔto fɔ tek in ples, i difrɛn.
• .panel-headingto.card-header
• .panel-titlefɔ mek .card-title. Dipen pan di luk we yu want, yu kin yuz edlayn ɛlimɛnt ɔ klas dɛn bak (ɛgz. <h3>, .h3) ɔ bold ɛlimɛnt ɔ klas dɛn (ɛgz. <strong>, <b>, .font-weight-bold). Notis se .card-title, pan ɔl we dɛn gi am di sem nem, i de mek i luk difrɛn frɔm .panel-title.
• .panel-bodyto.card-body
• .panel-footerto.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, ɛn .panel-dangerdɛn dɔn drɔp fɔ .bg-, .text-, ɛn .borderyutiliti dɛn we dɛn dɔn mek frɔm wi $theme-colorsSass map.

Go bifo

• Riples di kɔntɛkstual .progress-bar-*klas dɛn wit .bg-*yutiliti dɛn. Fɔ ɛgzampul, class="progress-bar progress-bar-danger"i kin bi class="progress-bar bg-danger".
• Riples .activefɔ animated prɔgrɛs bar dɛn wit .progress-bar-animated.

Karusel we dɛn kin yuz fɔ mek

• Ɔvahɛl di wan ol kɔmpɔnɛnt fɔ mek i izi fɔ dizayn ɛn stayl. Wi gɛt smɔl stayl dɛn fɔ yu fɔ ɔvalayz, nyu indikɛtɔ dɛn, ɛn nyu aykɔn dɛn.
• Ɔl di CSS dɛn dɔn nɔ-nɛst ɛn dɛn dɔn chenj dɛn nem, ɛn mek shɔ se dɛn put ɛni klas bifo wit .carousel-.
  • Fɔ karusel tin dɛn, .next, .prev, .left, ɛn .rightna naw .carousel-item-next, .carousel-item-prev, .carousel-item-left, ɛn .carousel-item-right.
  • .itemna in bak naw .carousel-item.
  • Fɔ prev/nɛks kɔntrol dɛn, .carousel-control.rightɛn .carousel-control.leftna naw .carousel-control-nextɛn .carousel-control-prev, we min se dɛn nɔ nid wan patikyula bays klas igen.
• Rimov ɔl di stayl dɛn we de ansa, defɛr to yutiliti dɛn (ɛgz., fɔ sho kapshɔn dɛn na sɔm viupɔt dɛn) ɛn kɔstɔm stayl dɛn as nid de.
• Rimov imej ɔvarayd fɔ imej dɛn na karusel aytem dɛn, defɛr to yutiliti dɛn.
• Tweak di Carousel ɛgzampul fɔ inklud di nyu mak ɛn stayl dɛn.

Tebul dɛn

• Rimov sɔpɔt fɔ stayl nest tebul dɛn. Ɔl di tebul stayl dɛn naw dɛn dɔn inhɛrit insay v4 fɔ simpul sɛlɛktɔ dɛn.
• Add invas tebul variant.

Yutiliti dɛn

• Displei, ayd, ɛn ɔda tin dɛn:
  • Mek displei yutiliti dɛn we de ansa (ɛgz., .d-noneɛn d-{sm,md,lg,xl}-none).
  • Drɔp di bɔku bɔku .hidden-*yutiliti fɔ nyu displei yutiliti dɛn . Fɔ ɛgzampul, instead fɔ .hidden-sm-upyuz , yuz .d-sm-none. Rinem di .hidden-printyutiliti fɔ yuz di displei yutiliti nem skim. Mɔ info ɔnda di Responsive utilities sɛkshɔn na dis pej.
  • Ad .float-{sm,md,lg,xl}-{left,right,none}klas fɔ rispɔnsiv flot ɛn pul .pull-leftɛn .pull-rightbikɔs dɛn ridandant to .float-leftɛn .float-right.
• Kayn:
  • Ad rispɔnsiv vɛryushɔn dɛn to wi tɛks alaynɛshɔn klas dɛn .text-{sm,md,lg,xl}-{left,center,right}.
• Alaynɛshɔn ɛn spɛshal say dɛn:
  • Ad nyu rispɔnsiv margin ɛn padding yutiliti fɔ ɔl di sayd dɛn, plus vertikal ɛn ɔrizɔntal shɔthand dɛn.
  • Add boatload of flexbox yutiliti dem .
  • Drɔp .center-blockfɔ di nyu .mx-autoklas.
• Clearfix ɔpdet fɔ drɔp sɔpɔt fɔ ol brawza vɛshɔn dɛn.

Vendor prɛfiks miksin dɛn

Bootstrap 3 in vendor prefix mixins, we bin de prɛfikɛt insay v3.2.0, dɛn dɔn pul am na Bootstrap 4. Bikɔs wi de yuz Autoprefixer , dɛn nɔ nid igen.

Rimov di miksin dɛn we de dɔŋ ya : 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-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Di dɔkyumɛnt dɛn

Wi dɔkyumentri bin gɛt ɔpgrɛd ɔlsay na di bɔd bak. Na dis na di low down:

• Wi stil de yuz Jekyll, bɔt wi gɛt plɔgin dɛn na di miks:
  • bugify.rbna fɔ yuz fɔ list di tin dɛn we de na wi brɔwza bɔg dɛn pej fayn fayn wan.
  • example.rbna kɔstɔm fɔk fɔ di difɔlt highlight.rbplɔgin, we de alaw fɔ mek i izi fɔ yuz ɛgzampul-kɔd.
  • callout.rbna wan sem kayn kɔstɔm fɔk fɔ dat, bɔt dɛn mek am fɔ wi spɛshal dɔk kɔl ɔut dɛn.
  • jekyll-toc de yuz fɔ jenarayz wi tebul fɔ kɔntinyu.
• Dɛn dɔn rayt ɔl di dɔkyumɛnt dɛn bak insay Makdɔwn (insted ɔf HTML) fɔ mek i izi fɔ ɛdit.
• Dɛn dɔn ɔganayz di pej dɛn bak fɔ mek dɛn simpul tin dɛn ɛn fɔ mek dɛn gɛt mɔ aylayt we dɛn go ebul fɔ tɔk to.
• Wi bin muf frɔm rɛgyula CSS to SCSS fɔ tek ful advantej pan Bootstrap in vɛriɔbul dɛn, miksin dɛn, ɛn mɔ.

Yutiliti dɛn we de ansa

Ɔl di @screen-vɛriɔbul dɛn dɔn pul na v4.0.0. Yuz di media-breakpoint-up(), media-breakpoint-down(), ɔ media-breakpoint-only()Sass mixins ɔ di $grid-breakpointsSass map insted.

Wi rispɔnsiv yutiliti klas dɛn dɔn rili pul in favɔrit fɔ ɛksplisit displayyutiliti dɛn.

• Dɛn dɔn pul di .hiddenɛn .showklas dɛn bikɔs dɛn bin de agens jQuery’s $(...).hide()ɛn $(...).show()di we dɛn we dɛn de yuz. Bifo dat, tray fɔ chenj di [hidden]atribyut ɔ yuz inlayn stayl dɛn lɛk style="display: none;"ɛn style="display: block;".
• Dɛn .hidden-dɔn pul ɔl di klas dɛn, pas fɔ di print yutiliti dɛn we dɛn dɔn chenj di nem.
  • Dɛn dɔn pul am na 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
  • Rimov frɔm v4 alfa dɛn:.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 yutiliti dɛn nɔ de stat wit .hidden-ɔ igen .visible-, bɔt wit .d-print-.
  • Ol nem dɛn: .visible-print-block, .visible-print-inline, .visible-print-inline-block, ..hidden-print
  • Nyu klas dɛn: .d-print-block, .d-print-inline, .d-print-inline-block, ..d-print-none

Bifo yu yuz .visible-*klas dɛn we klia, yu de mek pɔsin si wan ɛlimɛnt bay we yu jɔs nɔ ayd am na da skrin saiz de. Yu kin jɔyn wan .d-*-noneklas wit wan .d-*-blockklas fɔ sho wan ɛlimɛnt nɔmɔ pan wan givɛn intaval fɔ skrin saiz dɛn (ɛgz. .d-none.d-md-block.d-xl-nonesho di ɛlimɛnt nɔmɔ pan midul ɛn big divays dɛn).

Notis se di chenj dɛn we dɛn mek to di grid brekpɔynt dɛn na v4 min se yu go nid fɔ go wan brekpɔynt big fɔ ajɔst di sem rizɔlt dɛn. Di nyu rispɔnsiv yutiliti klas dɛn nɔ de tray fɔ akɔmod less kɔmɔn kes dɛn usay wan ɛlimɛnt in visibiliti nɔ kin ɛksprɛs as wan kɔntigyuɔs rɛnj ɔf viupɔt saiz dɛn; yu go insted nid fɔ yuz kɔstɔm CSS insay dɛn kayn kes dɛn de.