Go hudugela go v4

Bootstrap 4 ke go ngwala gape mo gogolo ga projeke ka moka. Diphetogo tše di lemogegago kudu di akareditšwe ka mo tlase, gomme tša latelwa ke diphetogo tše di lebanyago kudu go dikarolo tše di lebanego.

Diphetogo tše di tsepamego

Go tloga go Beta 3 go ya go tokollo ya rena ye e tsepamego ya v4.x, ga go na diphetogo tša go thuba, eupša go na le diphetogo tše dingwe tše di lemogegago.

Go gatiša

• Fixed robehileng hatisa utilities. Pele, go diriša .d-print-*sehlopha go be go tla fediša sehlopha le ge e le sefe se sengwe ka mo go sa letelwago .d-*. Bjale, di swana le didirišwa tša rena tše dingwe tša pontšho gomme di šoma fela go methopo yeo ya ditaba ( @media print).

• Didirišwa tša pontšho ya go phrintha ye e atološitšwego ye e lego gona go swana le didirišwa tše dingwe. Beta 3 le go feta e be e e-na le feela block, inline-block, inline, le none. Stable v4 e okeditšwe flex, inline-flex, table, table-row, le table-cell.

• Phetolelo ya ponelopele ya go phrintha ye e sa fetogego go ralala le diphensele ka mekgwa ye meswa ya go phrintha yeo e laetago @page size.

Beta 3 e a fetola

Le ge Beta 2 e bone bontši bja diphetogo tša rena tša go thuba nakong ya kgato ya beta, eupša re sa na le tše mmalwa tšeo di bego di swanetše go rarollwa ka tokollong ya Beta 3. Diphetogo tše di šoma ge e ba o mpshafatša go Beta 3 go tšwa go Beta 2 goba phetolelo efe goba efe ya kgale ya Bootstrap.

Hlakahlakanego

• Go tlošitšwe $thumbnail-transitionphetogo yeo e sa šomišwego. Re be re sa fetoše selo, ka fao e be e no ba khoutu ya tlaleletšo.
• Sephuthelwana sa npm ga se sa akaretša difaele tše dingwe ntle le difaele tša rena tša mothopo le tša dist; ge e ba o be o ithekgile ka tšona gomme o be o sepetša dingwalwa tša rena ka node_modulesfoltara, o swanetše go fetoša tshepedišo ya gago ya mošomo.

Diforomo

• Ngwala gape bobedi mapokisi a go hlahloba a tlwaelo le a go se fetoge le diradio. Bjale, bobedi ba na le sebopego sa HTML se se swanago (ka ntle <div>le ngwanešo <input>le <label>) le mekgwa ya peakanyo ye e swanago (e kgobokeditšwego ya go se fetoge, ka gare ga mothaladi ka sehlopha sa sefetoši). Se se re dumelela go setaele leina go ya ka seemo sa tsenyo, go nolofatša thekgo ya disabledseka (pele e be e nyaka sehlopha sa motswadi) le go thekga bokaone netefatšo ya rena ya foromo.

  Bjalo ka karolo ya se, re fetotše CSS ya go laola background-images ye ntši go mapokisi a go hlahloba a foromo ya tlwaelo le diradio. Pele, .custom-control-indicatorelemente yeo bjale e tlošitšwego e be e na le mmala wa ka morago, gradient, le leswao la SVG. Go dira gore gradient ya ka morago e be ya gago go be go bolela go tšeela tšeo ka moka legato nako le nako ge o be o nyaka go fetoša e tee feela. Bjale, re na le .custom-control-label::beforebakeng sa tlatsa le gradient le .custom-control-label::aftertšoara letšoao.

  Go dira tlhahlobo ya tlwaelo ka gare ga mothaladi, oketša .custom-control-inline.

• Sekgethi se se mpshafaditšwego sa dihlopha tša konope tše di theilwego godimo ga tsenyo. Go e na le [data-toggle="buttons"] { }bakeng sa setaele le boitshwaro, re diriša dataseka feela bakeng sa boitshwaro bja JS gomme re ithekgile ka .btn-group-togglesehlopha se sefsa bakeng sa go dira setaele.

• E tlošitšwe .col-form-legendgo thekga e kaonefaditšwego ganyenyane .col-form-label. Ka tsela ena .col-form-label-smle .col-form-label-lgka sebediswa ka <legend>elements le bonolo.

• Ditshenyegelo tša faele ya tlwaelo di amogetše phetogo go phetogo ya bona ya $custom-file-textSass. Ga e sa le mmapa wa Sass wo o tsentšwego ka gare ga sehlaga gomme bjale o matlafatša thapo e tee feela— Browsekonope ka ge yeo bjale e lego yona feela elemente ya maaka yeo e tšweleditšwego go tšwa go Sass ya rena. Sengwalwa Choose filebjale se tšwa go .custom-file-label.

Dihlopha tša go tsenya

• Di-addon tša sehlopha sa tsenyo bjale di lebanya go bewa ga tšona ge di bapetšwa le tsenyo. Re theogile .input-group-addonle .input-group-btnbakeng sa diklase tše pedi tše difsa, .input-group-prependgomme .input-group-append. O swanetše go šomiša ka go lebanya append goba prepend bjale, go nolofatša bontši bja CSS ya rena. Ka gare ga go tlaleletša goba go tsenya pele, bea dikonope tša gago bjalo ka ge di be di tla ba gona kae goba kae, eupša phuthela sengwalwa ka go .input-group-text.

• Mekgwa ya netefatšo bjale e a thekgwa, go swana le ditseno tše ntši (le ge e le gore o ka netefatša fela tsenyo e tee ka sehlopha).

• Diklase tša go lekanyetša bogolo di swanetše go ba godimo ga motswadi .input-groupe sego dielemente tša foromo ka botee.

Beta 2 e a fetola

Ge re le go beta, re ikemišeditše go se be le diphetogo tše di thubago. Lega go le bjalo, ga se ka mehla dilo di sepelago ka tsela yeo di rulagantšwego ka yona. Ka tlase ke diphetogo tša go thuba tšeo o swanetšego go di gopola ge o tloga go Beta 1 go ya go Beta 2.

Go thuba

• Tlošitšwe $badge-colorphetogo le tšhomišo ya yona go .badge. Re šomiša mošomo wa phapano ya mebala go kgetha ye e colortheilwego godimo ga background-color, ka fao phetogo ga e nyakege.
• grayscale()Mošomo o reeletšwe leina lefsa go go efoga go roba thulano le sefa sa gray()setlogo sa CSS .grayscale
• E reeletšwe leina lefsa la .table-inverse, .thead-inverse, le .thead-defaultgo ya go .*-darkle .*-light, e swana le dithulaganyo tša rena tša mebala tšeo di dirišitšwego mafelong a mangwe.
• Ditafola tše di arabelago bjale di tšweletša diklase tša ntlha ye nngwe le ye nngwe ya go kgaotša keriti. Se se kgaotša go tšwa go Beta 1 ka gore yeo .table-responsiveo bego o dutše o e diriša e swana kudu le .table-responsive-md. Bjale o ka diriša .table-responsivegoba .table-responsive-{sm,md,lg,xl}ka moo go nyakegago.
• E lahlile thekgo ya Bower ka ge molaodi wa sephuthelwana a tlogetšwe bakeng sa mekgwa e mengwe (mohlala, Yarn goba npm). Bona bower/bower#2298 go hwetša dintlha.
• Bootstrap e sa dutše e nyaka jQuery 1.9.1 goba go feta moo, eupša o eletšwa go diriša phetolelo ya 3.x ka ge diphensele tšeo di thekgwago ke v3.x e le tšeo Bootstrap e di thekgago gotee le v3.x e na le diphetošo tše dingwe tša tšhireletšo.
• Go tlošitšwe .form-control-labelsehlopha seo se sa dirišwego. Ge e ba o dirile go diriša sehlopha se, e be e le go ipoeletša ga .col-form-labelsehlopha seo se bego se tsepame ka go otlologa a <label>ka tsenyo yeo e sepedišanago le yona ka dipeakanyong tša foromo tše di rapaletšego.
• E fetotše go color-yiqtšwa go mixin yeo e bego e akaretša colorthepa go ya go mošomo wo o bušetšago boleng, go go dumelela go e šomiša bakeng sa thepa efe goba efe ya CSS. Ka mohlala, go e na le color-yiq(#000), o be o tla ngwala color: color-yiq(#000);.

Dintlhakgolo

• Tsebisa tshebediso e ncha pointer-eventska modals. The ka ntle .modal-dialogfeta ka liketsahalo le pointer-events: nonebakeng sa tloaelo tobetsa tšoara (etsa hore ho khoneha ho feela mamela ka .modal-backdropbakeng sa leha e le efe tobetsa), 'me joale counteracts e bakeng sa sebele .modal-contentle pointer-events: auto.

Kakaretšo

Dilo tše kgolo tša thekethe tšeo o tlago go nyaka go di ela hloko ge o tloga go v3 go ya go v4 ke tše.

Thekgo ya sephephediši

• Lahlela IE8, IE9, le iOS 6 tšehetso. v4 bjale ke feela IE10 + le iOS 7 +. Bakeng sa mafelo ao a nyakago e nngwe ya tšeo, diriša v3.
• E okeditšwe thekgo ya semmušo ya Android v5.0 Lollipop ya Browser le WebView. Diphetolelo tša peleng tša Sephephediši sa Android le WebView di dula di thekgwa feela ka tsela yeo e sego ya semmušo.

Diphetogo tša lefase ka bophara

• Flexbox e kgontšhitšwe ka go ikemela. Ka kakaretšo se se bolela go tloga go diphaphamadi le tše dingwe go putla dikarolo tša rena.
• E fetotšwe go tšwa go Less go ya go Sass bakeng sa difaele tša rena tša mohlodi tša CSS.
• E fetotšwe go tšwa pxgo go ya go rembjalo ka yuniti ya rena ya mathomo ya CSS, le ge e le gore dipiksele di sa šomišwa go dipotšišo tša boraditaba le boitshwaro bja keriti ka ge dipono tša sedirišwa di sa amege ke bogolo bja mohuta.
• Bogolo bja fonte ya lefase ka bophara bo ile bja oketšega go tloga 14pxgo go 16px.
• E mpshafaditšwe di-tier tša keriti go oketša kgetho ya bohlano (go rarolla didirišwa tše dinyenyane ka 576pxle ka tlase) gomme ya tloša -xsinfix go tšwa diklaseng tšeo. Mohlala: .col-6.col-sm-4.col-md-3.
• E tšeetšwe sebaka sa sehlogo sa boikhethelo se se arogilego ka dikgetho tše di ka rulaganywago ka diphetogo tša SCSS (mohlala, $enable-gradients: true).
• Aga tshepedišo e lokišitšwe go diriša letoto la dingwalwa tša npm go e na le Grunt. Bona package.jsonbakeng sa dingwalwa ka moka, goba projeke ya rena readme bakeng sa dinyakwa tša tlhabollo ya selegae.
• Tšhomišo yeo e sa arabelego ya Bootstrap ga e sa thekgwa.
• Lahlela Customizer inthaneteng ka ho rata ditokomane tse pharaletseng ho feta ho hlophisa le haha ​​customized.
• E okeditšwe ka masome a diklase tše mpsha tša utility bakeng sa dipara tše di tlwaelegilego tša boleng bja thepa tša CSS le dikgaoletšo tša sekgoba sa margin/padding.

Tshepedišo ya keriti

• E ile ya hudušetšwa go flexbox.
  • E okeditšwe thekgo ya flexbox ka gare ga mixins ya keriti le diklase tše di hlalošitšwego e sa le pele.
  • Bjalo ka karolo ya flexbox, e be e akaretša thekgo ya diklase tša go logaganya tše di emego le tše di rapaletšego.
• Maina a sehlopha sa keriti a mpshafaditšwego le legato le lefsa la keriti.
  • E okeditšwe ka legato le lefsa smla keriti ka fase 768pxbakeng sa taolo ya granular ye ntši. Ga bjale re na le xs, sm, md, lg, le xl. Se se bolela gape gore legato le lengwe le le lengwe le thutšwe godimo ga maemo a tee (ka fao .col-md-6ka go v3 bjale ke .col-lg-6ka go v4).
  • xsdiklase tša keriti di fetotšwe go se nyake gore infix e emele ka nepo kudu gore di thoma go diriša mekgwa ka min-width: 0e sego boleng bja dipiksele bjo bo beilwego. Go e na le .col-xs-6, ke bjale .col-6. Di-tier tše dingwe ka moka tša keriti di nyaka infix (mohlala, sm).
• Bogolo bja keriti bjo bo mpshafaditšwego, mixins, le diphetogo.
  • Di-gutter tša keriti bjale di na le mmapa wa Sass gore o kgone go laetša bophara bjo itšego bja di-gutter ntlheng e nngwe le e nngwe ya go kgaotša.
  • Updated keriti mixins ho sebelisa e make-col-readyprep mixin le a make-colho beha flexle max-widthbakeng sa motho ka mong kholomo sizing.
  • Fetotšwe keriti tshepedišo ya boraditaba potšišo breakpoints le setshelo bophara go ikarabela bakeng sa keriti legato le lefsa le go netefatša gore dikholomo di arolwa ka go lekana ka 12ka ka bophara bja tšona bja max.
  • Dintlha tša go kgaotša tša keriti le bophara bja setshelo bjale di swarwa ka dimmapa tša Sass ( $grid-breakpointsle $container-max-widths) go e na le diphetogo tše mmalwa tše di aroganego. Tše di tšea legato la @screen-*diphetogo ka botlalo gomme di go dumelela go tlwaetša ka botlalo magato a keriti.
  • Dipotšišo tša boraditaba le tšona di fetogile. Go e na le go boeletša dipolelo tša rena tša dipotšišo tša boraditaba ka boleng bjo bo swanago nako le nako, bjale re na le @include media-breakpoint-up/down/only. Bjale, go e na le go ngwala @media (min-width: @screen-sm-min) { ... }, o ka ngwala @include media-breakpoint-up(sm) { ... }.

Dikarolo

• Diphanele tše di lahlilwego, diswantšho tše dinyenyane le didiba bakeng sa karolo e mpsha yeo e akaretšago tšohle, e lego dikarata .
• O ile a lahlela fonte ya leswao la Glyphicons. Ge e ba o nyaka diaekhone, dikgetho tše dingwe ke:
  • phetolelo ya godimo ya noka ya Glyphicons
  • Di-Octicon
  • Font E a Hlollang
  • Bona letlakala la Katološa bakeng sa lenaneo la mekgwa e mengwe. Na o na le ditšhišinyo tše oketšegilego? Ke kgopela go bula taba goba PR.
• O ile a lahlela plugin ya Affix jQuery.
  • Re kgothaletša go diriša position: stickygo e na le moo. Bona HTML5 Hle tsenyo bakeng sa dintlha le ditšhišinyo tše itšego tša polyfill. Tšhišinyo ye nngwe ke go šomiša @supportsmolao wa go o phethagatša (mohlala, @supports (position: sticky) { ... })/ .
  • Ge e le gore o be o šomiša Affix go diriša tlaleletšo, yeo e sego positionya ditaele, dipolyfill di ka no se thekge taba ya gago ya tšhomišo. Kgetho e nngwe ya ditirišo tše bjalo ke bokgobapuku bja ScrollPos-Styler bja motho wa boraro .
• Lahlela karolo ya pager e le ha e le hantle hanyenyane customized dikonopo.
• Refactored mo e nyakilego go ba dikarolo ka moka go diriša dikgetho tše dingwe tša sehlopha tšeo di sa tsenywago sehlaga go e na le dikgetho tša bana tše di itšego kudu.

Ka karolo

Lenaneo le le gatelela diphetogo tša bohlokwa ka karolo magareng ga v3.xx le v4.0.0.

Reboot gape

New to Bootstrap 4 is the Reboot , e ncha stylesheet hore haha ​​ka Normalize le rona ka tsela e itseng maikutlo a reset mekhoa. Bakgethi bao ba tšwelelago faeleng ye ba šomiša fela dielemente—ga go na diklase mo. Se se arola mekgwa ya rena ya go seta gape go tšwa go mekgwa ya rena ya dikarolo bakeng sa mokgwa wa modular kudu. Tše dingwe tša di-reset tše bohlokwa kudu tšeo se se akaretšago ke box-sizing: border-boxphetogo, go tloga emgo remdiyuniti go dielemente tše dintši, mekgwa ya kgokagano, le di-reset tše dintši tša elemente ya foromo.

Go thaepa

• .text-E ile ya šuthiša didirišwa ka moka go _utilities.scssfaele.
• Lahlilwe .page-headere le mekhoa lona ka sebediswa ka utilities.
• .dl-horizontale lahlilwe. Go e na le moo, šomiša .rowgodimo <dl>le go šomiša diklase tša kholomo ya keriti (goba mixins) go yona <dt>le <dd>bana.
• Ditsopolwa tša go thibela tše di hlamilwego leswa, di šuthiša mekgwa ya tšona go tšwa go <blockquote>elemente go ya go sehlopha se tee, .blockquote. Lahlela .blockquote-reversesefetoledi bakeng sa utilities mongolo.
• .list-inlinebjale e nyaka gore bana ba yona ba lokeletša dilo ba be le .list-inline-itemsehlopha se sefsa seo se dirišitšwego go bona.

Diswantšho

• E reeletšwe gape .img-responsivego ba .img-fluid.
• E reeletšwe leina lefsa .img-roundedgo.rounded
• E reeletšwe leina lefsa .img-circlego.rounded-circle

Ditafola

• Mo e nyakilego go ba ditiragalo ka moka tša >mokgethi di tlošitšwe, go ra gore ditafola tše di tsentšwego ka gare bjale di tla ja bohwa bja mekgwa go tšwa go batswadi ba tšona ka go iketla. Se se nolofatša kudu bakgethi ba rena le diphetogo tšeo di ka bago gona.
• E reeletšwe leina lefsa .table-condensedgo .table-smbakeng sa go se fetoge.
• .table-inverseE okeditšwe ka kgetho e mpsha .
• Diphetoši tša hlogo ya tafola tše di okeditšwego: .thead-defaultle .thead-inverse.
• Diklase tša diteng tše di reeletšwego gape gore di be le .table--sehlongwapele. Ka baka leo .active, .success, .warning, .dangerle .infogo .table-active, .table-success, .table-warning, .table-dangerle .table-info.

Diforomo

• Moved elements resets ho _reboot.scssfaele.
• E reeletšwe gape .control-labelgo ba .col-form-label.
• Rename .input-lgle .input-smgo .form-control-lgle .form-control-sm, ka go latelelana.
• O ile a lahlela .form-group-*diklase ka baka la go ba bonolo. Diriša .form-control-*diklase go e na le moo gona bjale.
• E lahlile .help-blockgomme ya e tšeela legato ka .form-textbakeng sa sengwalwa sa thušo sa maemo a boloko. Bakeng sa sengwalwa sa thušo ya ka gare ga mothaladi le dikgetho tše dingwe tše di fetofetogago, šomiša diklase tša mohola tša go swana le .text-muted.
• E lahlilwe .radio-inlinegomme .checkbox-inline.
• E kopantšwe .checkboxle .radioka gare le diklase tše di .form-checkfapafapanego ..form-check-*
• Diforomo tše di rapaletšego di lokišeditšwe:
  • O ile a lahlela .form-horizontalsenyakwa sa sehlopha.
  • .form-groupga e sa diriša mekgwa go tšwa go .rowvia mixin, ka gona .rowbjale e nyakega bakeng sa dipeakanyo tša keriti tše di rapaletšego (mohlala, <div class="form-group row">).
  • E okeditšwe ka .col-form-labelsehlopha se sefsa go dileibole tša bogareng bja go otlologa ka .form-controls.
  • E okeditšwe e mpsha .form-rowbakeng sa dipeakanyo tša foromo ya go kopana ka diklase tša keriti (swap ya gago .rowbakeng sa a .form-rowgomme o ye).
• E okeditšwe thekgo ya diforomo tša tlwaelo (bakeng sa mapokisi a go hlahloba, diradio, dikgetho, le ditshenyegelo tša faele).
• E tšeetšwe sebaka .has-errorsa , .has-warning, le .has-successdiklase ka netefatšo ya foromo ya HTML5 ka di-CSS :invalidle :validdiklase tša maaka.
• E reeletšwe gape .form-control-staticgo ba .form-control-plaintext.

Dikonope

• E reeletšwe gape .btn-defaultgo ba .btn-secondary.
• Lahla .btn-xssehlopha ka ho feletseng e le .btn-smke proportionally haholo nyenyane ho feta v3 o.
• The stateful konopo tšobotsi ya button.jsjQuery plugin e lahlilwe. Se se akaretša mekgwa ya $().button(string)le $().button('reset'). Re eletša go diriša JavaScript e nyenyane ya tlwaelo go e na le moo, yeo e tlago go ba le mohola wa go itshwara gabotse ka tsela yeo o e nyakago.
  • Hlokomela gore dikarolo tše dingwe tša plugin (mapokisi a go hlahloba dikonope, diradio tša dikonope, dikonope tša go fetoša e tee) di bolokilwe go v4.
• Fetola dikonope ' [disabled]go :disablede le IE9 + tšehetsa :disabled. Le ge go le bjalo fieldset[disabled]go sa nyakega ka gobane di-fieldset tša setlogo tše di golofetšego di sa dutše di na le diphošo go IE11 .

Sehlopha sa konopo

• Rewrote karolo le flexbox.
• E tlošitšwe .btn-group-justified. Bjalo ka legato o ka šomiša <div class="btn-group d-flex" role="group"></div>bjalo ka sephuthelwana go dikologa dielemente ka .w-100.
• O ile a lahlela .btn-group-xssehlopha ka mo go feletšego a newa go tlošwa ga .btn-xs.
• E tlošitšwe sekgoba se se lego molaleng magareng ga dihlopha tša dikonope ka go dibara tša didirišwa tša konope; diriša didirišwa tša margin gona bjale.
• Ditokomane tše di kaonafetšego tša go šomišwa le dikarolo tše dingwe.

Di-dropdown tša go theoga

• E fetotšwe go tšwa go bakgethi ba motswadi go ya go diklase tša botee bakeng sa dikarolo ka moka, diphetoši, bj.bj.
• Mekgwa ya go theoga ye e nolofaditšwego gore e se sa romelwa ka metsu ye e lebeletšego godimo goba fase yeo e kgomareditšwego go thepo ya go theoga.
• Di-dropdown di ka agwa ka <div>s goba <ul>s bjale.
• Mekgwa ya go theoga ye e agilwego leswa le go swaya go fa thekgo ye bonolo, ye e agetšwego ka gare ya dilo tša go theoga tše di theilwego <a>le tše di theilwego.<button>
• E reeletšwe gape .dividergo ba .dropdown-divider.
• Dilo tša go theoga bjale di nyaka .dropdown-item.
• Diphetogo tša go theoga ga di sa nyaka go ba pepeneneng <span class="caret"></span>; se bjale se fiwa ka go itiragalela ka CSS's ::afteron .dropdown-toggle.

Tshepedišo ya keriti

• E okeditšwe ntlha ye mpsha 576pxya go kgaotša ya keriti bjalo ka sm, go ra gore bjale go na le palomoka ya magato a mahlano a mahlano ( xs, sm, md, lg, le xl).
• E reeletšwe ka dihlopha tša sefetoši sa keriti ye e arabelago leina lefsa go tšwa .col-{breakpoint}-{modifier}-{size}go go .{modifier}-{breakpoint}-{size}ya go diklase tše bonolo tša keriti.
• Lahlela kgorometsa le hula mofetoledi dihlopha bakeng sa tse ncha flexbox-powered orderdihlopha. Ka mohlala, go e na .col-8.push-4le le .col-4.pull-8, o be o tla diriša .col-8.order-2le .col-4.order-1.
• Added flexbox utility dihlopha bakeng sa keriti tsamaiso le dikarolo.

Lokeletša dihlopha

• Rewrote karolo le flexbox.
• E tšeetšwe legato a.list-group-itemke sehlopha se se lego pepeneneng, .list-group-item-action, bakeng sa kgokagano ya setaele le diphetolelo tša konope tša dilo tša sehlopha sa lenaneo.
• E okeditšwe .list-group-flushsehlopha bakeng sa go dirišwa le dikarata.

Modal

• Rewrote karolo le flexbox.
• Ka ge go filwe go hudugela go flexbox, go logaganya ga diaekhone tša go raka ka hlogong go na le kgonagalo ya go senyega ka ge re se sa šomiša diphaphamadi. Diteng tše di phaphametšego di tla pele, eupša ka flexbox seo ga se sa le bjalo. Mpshafatša diaekhone tša gago tša go raka go tla ka morago ga dithaetlele tša modal go lokiša.
• Kgetho remote(yeo e bego e ka šomišwa go laetša ka go iketla le go tsenya dikagare tša ka ntle ka gare ga modal) le loaded.bs.modaltiragalo ye e swanetšego di ile tša tlošwa. Re kgothaletša go e na le moo go diriša thempleite ya lehlakoreng la moreki goba tlhako ya go tlama ya data, goba go bitša jQuery.load ka bowena.

Navs

• Rewrote karolo le flexbox.
• Lahla mo e nyakilego go ba dikgetho ka moka >bakeng sa setaele se bonolo ka diklase tšeo di sa tsenywago sehlaga.
• Go e na le dikgetho tše di itšego tša HTML go swana le .nav > li > a, re šomiša diklase tše di aroganego tša .navs, .nav-items, le .nav-links. Se se dira gore HTML ya gago e fetofetoge kudu mola e tliša go katološwa mo go oketšegilego.

Navbar

Navbar e ngwadilwe gape ka botlalo ka gare ga flexbox ka thekgo ye e kaonafetšego ya go logaganya, go arabela, le go dira gore e be ya gago.

• Maitshwaro a navbar a go arabela bjale a dirišwa go .navbarsehlopha ka go nyakega .navbar-expand-{breakpoint} moo o kgethago moo o tlago go phušola navbar. Pele ye e be e le phetošo ya Less variable gomme e nyaka go kgoboketšwa gape.
• .navbar-defaultke bjale .navbar-light, gaešita le ge .navbar-darke dula e le bjalo. E nngwe ya tše e nyakega go navbar e nngwe le e nngwe. Le ge go le bjalo, dihlopha tše ga di sa bea background-colors; go e ​​na le moo ge e le gabotse di kgoma feela color.
• Di-navbar bjale di nyaka kgoeletšo ya morago ya mohuta o itšego. Kgetha go tšwa go didirišwa tša rena tša ka morago ( .bg-*) goba o beakantše tša gago ka diklase tša seetša/go fetoga ka mo godimo bakeng sa go ikgethela ga bohlanya .
• Ka ge go filwe mekgwa ya flexbox, di-navbar bjale di ka šomiša didirišwa tša flexbox bakeng sa dikgetho tše bonolo tša go logaganya.
• .navbar-toggleke bjale .navbar-togglergomme e na le mekgwa ye e fapanego le go swaya ka gare (ga go sa na di- <span>s tše tharo).
• O ile a lahlela .navbar-formklase ka mo go feletšego. Ga go sa nyakega; go e ​​na le moo, diriša feela .form-inlinele go diriša didirišwa tša margin ge go nyakega.
• Di-navbar ga di sa akaretša margin-bottomgoba border-radiuska go ikemela. Diriša didirišwa tša motheo ge go nyakega.
• Mehlala ka moka yeo e nago le di-navbar e mpshafaditšwe go akaretša go swaya mo gofsa.

Go ngwala matlakala

• Rewrote karolo le flexbox.
• Diklase tše di lego molaleng ( .page-item, .page-link) bjale di a nyakega go ditlogolo tša .paginations
• Lahlela .pagerkarolo ka mo go feletšego ka ge e be e le go se nene go feta dikonope tša thulaganyo tšeo di rulagantšwego.

Dikgapetla tša borotho

• Sehlopha se se lego pepeneneng, .breadcrumb-item, bjale se nyakega godimo ga ditlogolo tša .breadcrumbs

Dileibole le dipetšhe

• E kopantšwe .labelle .badgego disambiguate go tšwa go <label>elemente le go nolofatša dikarolo tše di amanago.
• E okeditšwe .badge-pillbjalo ka sefetoši bakeng sa ponagalo ya “pilisi” ya nkgokolo.
• Dipetšhe ga di sa phaphametšwe ka go itiragalela ka dihlopha tša lenaneo le dikarolo tše dingwe. Diklase tša utility bjale di a nyakega bakeng sa seo.
• .badge-defaulte lahlilwe gomme ya .badge-secondarytlaleletšwa go swana le dihlopha tša sefetoši sa dikarolo tšeo di šomišwago felotsoko.

Diphanele, diswantšho tše dinyenyane, le didiba

E lahlilwe ka mo go feletšego bakeng sa karolo e mpsha ya karata.

Diphanele

• .panelgo .card, bjale e agilwe ka flexbox.
• .panel-defaulte tlošitšwe gomme ga go na selo seo se tlago go tšeelwa legato.
• .panel-groupe tlošitšwe gomme ga go na selo seo se tlago go tšeelwa legato. .card-groupga se selo seo se tšeago legato, e fapane.
• .panel-headinggo.card-header
• .panel-titlego ya go .card-title. Go ya ka tebelelo ye o e nyakago, o ka nyaka gape go šomiša dielemente tša hlogo goba diklase (mohlala <h3>, .h3) goba dielemente goba diklase tše di motenya (mohlala <strong>, <b>, .font-weight-bold). Hlokomela gore .card-title, gaešita le ge e reeletšwe ka mo go swanago, e tšweletša ponagalo e fapanego le ya .panel-title.
• .panel-bodygo.card-body
• .panel-footergo.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, gomme .panel-dangerdi lahlilwe bakeng sa .bg-, .text-, le .borderdidirišwa tšeo di tšweleditšwego go tšwa $theme-colorsmmapeng wa rena wa Sass.

Kgatelopele

• .progress-bar-*E tšeetšwe legato diklase tša diteng ka .bg-*didirišwa. Ka mohlala, class="progress-bar progress-bar-danger"e ba class="progress-bar bg-danger".
• E tšeetšwe legato .activebakeng sa dibara tša tšwelopele ya dipopaye ka .progress-bar-animated.

Carousel ya go swara

• Overhauled karolo eohle ho nolofatsa moralo le setaele. Re na le ditaele tše mmalwa tšeo o ka di fedišago, ditšhupetšo tše mpsha, le diaekhone tše mpsha.
• CSS ka moka e sa tsenywa sehlaga gomme e rewa leina lefsa, e kgonthiša gore sehlopha se sengwe le se sengwe se hlomilwe pele ka .carousel-.
  • Bakeng sa dilo tša carousel, .next, .prev, .left, gomme .rightbjale ke .carousel-item-next, .carousel-item-prev, .carousel-item-left, le .carousel-item-right.
  • .itemle yona ke gona bjale .carousel-item.
  • Bakeng sa ditaolo tša peleng/tše di latelago, .carousel-control.rightgomme .carousel-control.leftke bjale .carousel-control-nextle .carousel-control-prev, go ra gore ga di sa nyaka sehlopha se se itšego sa motheo.
• Tlošitšwe setaele ka moka se se arabelago, go diegiša go didirišwa (mohlala, go bontšha ditlhalošo go dipono tše itšego tša go lebelela) le mekgwa ya tlwaelo ge go nyakega.
• Tlošitšwe diswantšho di tloša bakeng sa diswantšho ka gare ga dilo tša carousel, di diegiša go didirišwa.
• Tweaked mohlala wa Carousel go akaretša markup ye mpsha le mekgwa.

Ditafola

• Tlošitšwe thekgo ya ditafola tše di tsentšwego ka gare ga setaele. Mekgwa ka moka ya tafola bjale e abetšwe ka v4 bakeng sa bakgethi ba bonolo.
• Added inverse tafole fapaneng.

Didirišwa tša go thuša

• Pontšo, e utilwego, le tše dingwe:
  • E dirile gore didirišwa tša pontšho di arabele (mohlala, .d-nonele d-{sm,md,lg,xl}-none).
  • O ile a lahlela bontši bja .hidden-*didirišwa bakeng sa didirišwa tše difsa tša pontšho . Ka mohlala, go e na le .hidden-sm-up, diriša .d-sm-none. E reeletšwe leina lefsa la .hidden-printdidirišwa go šomiša sekema sa go rea maina sa didirišwa tša pontšho. More info tlasa karolo ya Responsive utilities ya leqephe lena.
  • Added .float-{sm,md,lg,xl}-{left,right,none}diklase bakeng sa arabela phaphametseng le tlosoa .pull-leftle .pull-rightkaha ba 're redundant ho .float-leftle .float-right.
• Mohuta:
  • E okeditše diphetogo tše di arabelago go diklase tša rena tša go logaganya sengwalwa .text-{sm,md,lg,xl}-{left,center,right}.
• Go logaganya le sekgoba: .
  • Added e ncha arabela moedi le padding utilities bakeng sa mahlakoreng tsohle, go tlaleletsa ka paatsepama le rapameng shorthands.
  • E okeditšwe ka sekepe sa didirišwa tša flexbox .
  • O ile a theoha .center-blockbakeng sa sehlopha se secha .mx-auto.
• Clearfix e mpshafaditšwe go lahlela thekgo ya diphetolelo tša kgale tša sephephediši.

Morekisi sehlongwapele mixins

Bootstrap 3 o morekisi prefix mixins, tse neng di deprecated ka v3.2.0, ba tlositsoe ka Bootstrap 4. Kaha re sebelisa Autoprefixer , ba 're ha ba sa hlokahala.

Tloswa mixins tse latelang : 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

Ditokomane

Ditokomane tša rena di amogetše kaonafatšo go ralala le boto le tšona. Mona ke tlase tlase:

• Re sa šomiša Jekyll, eupša re na le di-plugin ka gare ga motswako:
  • bugify.rbe šomišwa go lokeletša ka bokgoni dikeno letlakaleng la rena la diphošo tša sephephediši .
  • example.rbke fereko ya tlwaelo highlight.rbya plugin ya go se fetoge, e dumelela go swara mohlala-khoutu ye bonolo.
  • callout.rbke foroko ya tlwaelo ye e swanago ya seo, eupša e hlametšwe di-callout tša rena tše di kgethegilego tša docs.
  • jekyll-toc e šomišwa go tšweletša tafola ya rena ya dikagare.
• Diteng ka moka tša ditokomane di ngwadilwe gape ka go Markdown (go e na le HTML) bakeng sa go rulaganya gabonolo.
• Matlakala a rulagantšwe lefsa bakeng sa diteng tše bonolo le tatelano ya maemo yeo e batamelegago kudu.
• Re ile ra tloga go CSS ya ka mehla go ya go SCSS go diriša ka botlalo diphetogo tša Bootstrap, mixins, le tše dingwe.

Didirišwa tše di arabelago

Diphetogo ka moka @screen-di tlošitšwe go v4.0.0. Šomiša di-mixin tša media-breakpoint-up(), media-breakpoint-down(), goba tša media-breakpoint-only()Sass goba $grid-breakpointsmmapa wa Sass go e na le moo.

Diklase tša rena tša didirišwa tše di arabelago di tlošitšwe kudu go thekga displaydidirišwa tše di lego molaleng.

• .hiddenDiklase le di .showtlošitšwe ka gobane di be di thulana le jQuery $(...).hide()le $(...).show()mekgwa. Go e na le moo, leka go fetoša [hidden]seka goba o šomiše mekgwa ya ka gare ga mothaladi go swana style="display: none;"le le style="display: block;".
• Diklase ka moka .hidden-di tlošitšwe, go boloka didirišwa tša go phrintha tšeo di reeletšwego gape.
  • E tlošitšwe go tšwa go 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
  • E tlošitšwe go tšwa go 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
• Didirišwa tša go phrintha ga di sa thoma ka .hidden-goba .visible-, eupša ka .d-print-.
  • Maina a kgale: .visible-print-block, .visible-print-inline, .visible-print-inline-block, ..hidden-print
  • Diklase tše mpsha: .d-print-block, .d-print-inline, .d-print-inline-block, ..d-print-none

Go e na le go diriša .visible-*diklase tše di lego molaleng, o dira gore elemente e bonagale ka go fo se e uta ka bogolo bjoo bja skrine. O ka kopanya .d-*-nonesehlopha se tee le sehlopha se tee .d-*-blockgo bontšha elemente fela ka sekgoba se se filwego sa bogolo bja skrine (mohlala, .d-none.d-md-block.d-xl-nonee bontšha elemente fela go didirišwa tša magareng le tše kgolo).

Hlokomela gore diphetogo go dintlha tša go kgaotša tša keriti go v4 di ra gore o tla swanelwa ke go ya ntlha e tee ya go kgaotša ye kgolo go fihlelela dipoelo tše di swanago. Diklase tše mpsha tša mohola tše di arabelago ga di leke go amogela maemo ao a sa tlwaelegago kudu moo go bonagala ga elemente go ka se bontšhwego bjalo ka mohuta o tee wo o latelanago wa bogolo bja lefelo la go lebelela; go e ​​na le moo o tla swanelwa ke go diriša CSS ya tlwaelo maemong a bjalo.