Source

Ag aistriú go v4

Athscríobh mór ar an tionscadal ar fad is ea Bootstrap 4. Tugtar achoimre thíos ar na hathruithe is suntasaí, agus ina dhiaidh sin déantar athruithe níos sainiúla ar na comhpháirteanna ábhartha.

Athruithe cobhsaí

Ag bogadh ó Beta 3 go dtí ár scaoileadh cobhsaí v4.0, níl aon athruithe briseadh ann, ach tá roinnt athruithe suntasacha ann.

Priontáil

  • Fóntais priontála briste seasta. Roimhe seo, .d-print-*sháródh úsáid ranga aon .d-*rang eile gan choinne. Anois, meaitseálann siad ár bhfóntais taispeána eile agus ní bhaineann siad ach leis na meáin sin ( @media print).

  • Fóntais taispeána priontála méadaithe atá ar fáil chun fóntas eile a mheaitseáil. Ní raibh ach béite 3 agus níos sine ag block, inline-block, inline, agus none. stábla v4 curtha leis flex, inline-flex, table, table-row, agus table-cell.

  • Rindreáil réamhamhairc priontála seasta thar brabhsálaithe le stíleanna priontála nua a shonraíonn @page size.

Beta 3 athruithe

Cé gur chonaic Beta 2 an chuid is mó dár n-athruithe briseadh le linn na céime béite, ach tá roinnt againn fós ar ghá aghaidh a thabhairt orthu sa scaoileadh Beta 3. Beidh na hathruithe seo i bhfeidhm má tá tú ag nuashonrú go Beta 3 ó Beta 2 nó aon leagan níos sine de Bootstrap.

Ilghnéitheach

  • Baineadh an $thumbnail-transitionathróg nár úsáideadh. Ní raibh muid ag aistriú rud ar bith, mar sin ní raibh ann ach cód breise.
  • Ní chuimsíonn an pacáiste npm aon chomhaid seachas ár gcomhaid fhoinse agus dist a thuilleadh; má bhí tú ag brath orthu agus go raibh ár gcuid scripteanna á rith tríd an node_modulesbhfillteán agat, ba cheart duit do shreabhadh oibre a oiriúnú.

Foirmeacha

  • Athscríobh ticbhoscaí saincheaptha agus réamhshocraithe agus raidiónna araon. Anois, tá struchtúr HTML meaitseála ag an dá cheann (taobh amuigh <div>le siblín <input>agus <label>) agus na stíleanna leagan amach céanna (réamhshocraithe cruachta, ar aon dul le rang mionathraithe). Ligeann sé seo dúinn an lipéad a stíl bunaithe ar staid an ionchuir, ag simpliú tacaíocht don disabledtréith (a raibh rang tuismitheora ag teastáil roimhe seo) agus ag tacú níos fearr lenár mbailíochtú foirme.

    Mar chuid de seo, d'athraigh muid an CSS chun iolracha background-imagea bhainistiú ar bhoscaí seiceála saincheaptha agus raidiónna. .custom-control-indicatorRoimhe seo, bhí dath cúlra, grádán agus deilbhín SVG ag an eilimint a baineadh as anois . Leis an ngrádán cúlra a shaincheapadh, bhí sé i gceist iad sin go léir a athsholáthar gach uair a raibh ort ach ceann amháin a athrú. Anois, ní mór dúinn .custom-control-label::beforedon líonadh agus grádán agus .custom-control-label::afterláimhseálann an deilbhín.

    Chun seiceáil saincheaptha inlíne a dhéanamh, cuir .custom-control-inline.

  • Roghnóir nuashonraithe do ghrúpaí cnaipe ionchur-bhunaithe. In ionad [data-toggle="buttons"] { }stíle agus iompair, bainimid úsáid as an datatréith le haghaidh iompraíochtaí JS amháin agus braithimid ar .btn-group-togglerang nua le haghaidh stílithe.

  • Bainte .col-form-legendi bhfabhar beagán feabhsaithe .col-form-label. Ar an mbealach seo .col-form-label-smagus .col-form-label-lgis féidir é a úsáid ar <legend>eilimintí gan stró.

  • Fuair ​​​​ionchuir comhaid saincheaptha athrú ar a n- $custom-file-textathróg Sass. Ní léarscáil neadaithe Sass é a thuilleadh agus ní chumhachtaíonn sé anois ach teaghrán amháin - an Browsecnaipe mar is é sin an t-aon eilimint bhréagach a ghintear ónár Sass anois. Tagann an Choose filetéacs anois ón .custom-file-label.

Grúpaí ionchuir

  • Baineann addons grúpa ionchuir go sonrach lena socrúchán anois i gcoibhneas le hionchur. Táimid tar éis titim .input-group-addonagus .input-group-btnar feadh dhá rang nua, .input-group-prependagus .input-group-append. Ní mór duit aguisín nó prependán a úsáid go sainráite anois, ag simpliú go leor dár CSS. Laistigh d'aguisín nó prepend, cuir do cnaipí mar a bheadh ​​siad ann áit ar bith eile, ach fillte téacs i .input-group-text.

  • Tugtar tacaíocht do stíleanna bailíochtaithe anois, mar atá ionchuir iolracha (cé nach féidir leat ach ionchur amháin in aghaidh an ghrúpa a bhailíochtú).

  • Caithfidh ranganna méide a bheith ar an tuismitheoir .input-groupagus ní ar na heilimintí foirm aonair.

Beta 2 athruithe

Agus muid i béite, tá sé mar aidhm againn gan aon athruithe briste a bheith againn. Mar sin féin, ní i gcónaí a théann rudaí mar a bhí beartaithe. Seo thíos na hathruithe briseadh a ba cheart a chur san áireamh agus tú ag bogadh ó Béite 1 go Béite 2.

Briseadh

  • Athróg bainte $badge-coloragus a húsáid ar .badge. Bainimid úsáid as feidhm codarsnachta datha chun feidhm coloratá bunaithe ar an background-color, a roghnú mar sin níl gá leis an athróg.
  • grayscale()Feidhm athainmnithe gray()chun coimhlint le grayscalescagaire dúchais CSS a sheachaint.
  • Athainmnithe .table-inverse, .thead-inverse, agus .thead-defaultchuig .*-darkagus .*-light, ag teacht lenár scéimeanna datha a úsáidtear in áiteanna eile.
  • Gineann táblaí sofhreagracha ranganna do gach briseadh greille anois. Briseann sé seo ó Béite 1 sa mhéid .table-responsiveis go bhfuil níos mó cosúil le .table-responsive-md. Is féidir leat é a úsáid anois .table-responsivenó .table-responsive-{sm,md,lg,xl}de réir mar is gá.
  • Thit tacaíocht Bower toisc go bhfuil an bainisteoir pacáiste dímheasta do roghanna eile (m.sh., Snáth nó npm). Féach bower/bower#2298 le haghaidh sonraí.
  • Tá jQuery 1.9.1 nó níos airde fós ag teastáil ó Bootstrap, ach moltar duit leagan 3.x a úsáid ós rud é gurb iad na brabhsálaithe a fhaigheann tacaíocht v3.x na cinn a thacaíonn Bootstrap agus tá roinnt socruithe slándála ag v3.x.
  • Baineadh an .form-control-labelrang nár úsáideadh. Má bhain tú úsáid as an aicme seo, ba mhacasamhail é den .col-form-labelrang a dhírigh go ceartingearach ar a <label>agus a ionchur gaolmhar i leagan amach foirmeacha cothrománacha.
  • D'athraigh sé color-yiqó mheascán a chuimsigh an t- colorairí go dtí feidhm a thugann luach ar ais, rud a ligeann duit é a úsáid le haghaidh aon mhaoin CSS. Mar shampla, in ionad color-yiq(#000), scríobhfá color: color-yiq(#000);.

Buaicphointí

  • Tugadh isteach pointer-eventsúsáid nua ar mhódúil. Gabhann an seachtrach .modal-dialogtrí imeachtaí le pointer-events: nonehaghaidh láimhseáil cliceáil saincheaptha (a fhágann gur féidir éisteacht a fháil ach ar an .modal-backdrople haghaidh aon cad a tharlaíonn nuair), agus ansin counteracts sé le haghaidh an iarbhír .modal-contentle pointer-events: auto.

Achoimre

Seo iad na nithe móra ticéad ar mhaith leat a bheith feasach orthu agus tú ag bogadh ó v3 go v4.

Tacaíocht bhrabhsálaí

  • Thit tacaíocht IE8, IE9, agus iOS 6. Níl i v4 anois ach IE10+ agus iOS 7+. Maidir le suíomhanna a dteastaíonn ceachtar acu sin, úsáid v3.
  • Tacaíocht oifigiúil curtha leis le haghaidh Brabhsálaí Android v5.0 Lollipop agus WebView. Ní thacaítear ach go neamhoifigiúil le leaganacha níos luaithe de Bhrabhsálaí Android agus WebView.

Athruithe domhanda

  • Tá Flexbox cumasaithe de réir réamhshocraithe. Go ginearálta ciallaíonn sé seo bogadh ar shiúl ó snámháin agus níos mó trasna ár gcomhpháirteanna.
  • Aistrithe ó Lúide go Sass le haghaidh ár bhfoinse comhaid CSS.
  • Aistrithe ó pxgo dtí remmar ár bpríomhaonad CSS, cé go n-úsáidtear picteilíní fós le haghaidh fiosrúcháin ó na meáin agus iompraíocht eangaí toisc nach gcuireann méid an chineáil isteach ar amhairc ghléis.
  • Méadaíodh cló domhanda ó 14pxgo 16px.
  • Athchóiríodh sraitheanna eangaí chun an cúigiú rogha a chur leis (ag dul i ngleic le gléasanna níos lú ag 576pxagus thíos) agus baineadh an t- -xsinfix de na ranganna sin. Sampla: .col-6.col-sm-4.col-md-3.
  • Cuireadh roghanna inchumraithe trí athróga SCSS (m.sh., $enable-gradients: true) in ionad an téama roghnach ar leith.
  • Athchóiriú ar an gcóras tógála chun sraith scripteanna npm a úsáid in ionad Grunt. Féach package.jsonle haghaidh gach script, nó ár dtionscadal readme do riachtanais forbartha áitiúla.
  • Ní thacaítear a thuilleadh le húsáid neamhfhreagrach de Bootstrap.
  • Thit an Saincheapadóir ar líne i bhfabhar doiciméadú socraithe níos fairsinge agus foirgnimh shaincheaptha.
  • Cuireadh mórán ranganna fóntais nua leis le haghaidh péirí coitianta CSS de luach maoine agus aicearraí spásála corrlaigh/stuála.

Córas greille

  • Bogtha go flexbox.
    • Tacaíocht bhreise do flexbox sna meascáin eangaí agus ranganna réamhshainithe.
    • Mar chuid de flexbox, áiríodh tacaíocht do ranganna ailíniú ingearach agus cothrománach.
  • Ainmneacha ranga greille nuashonraithe agus sraith eangaí nua.
    • Cuireadh smsraith ghreille nua leis thíos 768pxle haghaidh rialú níos gráinneach. Tá xs, sm, md, lg, agus xl. Ciallaíonn sé seo freisin go bhfuil gach sraith curtha suas ag leibhéal amháin (mar sin .col-md-6tá v3 .col-lg-6i v4 anois).
    • xsathraíodh na haicmí eangaí ionas nach n-éilíonn an t-innéacs léiriú níos cruinne ar an gcaoi a dtosaíonn siad ag cur stíleanna i bhfeidhm min-width: 0agus nach luach socraithe picteilín é. In ionad .col-xs-6, tá sé anois .col-6. Teastaíonn an infix (m.sh., sm).
  • Méideanna greille nuashonraithe, meascáin, agus athróga.
    • Tá léarscáil Sass ag gáitéir ghreille anois ionas gur féidir leat leithead gáitéir ar leith a shonrú ag gach brisphointe.
    • Meascáin ghreille nuashonraithe chun úsáid a bhaint as meascthóir make-col-readyprep agus a make-colchun méid na gcolún aonair a shocrú flexagus a shocrú.max-width
    • Brisphointí fiosrúcháin an chórais ghreille athraithe agus leithid na gcoimeádán chun sraith ghreille nua a chur san áireamh agus chun a chinntiú go bhfuil colúin inroinnte go cothrom 12ag a leithead uasta.
    • Láimhseáiltear pointí briste eangaí agus leithead coimeádán anois trí léarscáileanna Sass ( $grid-breakpointsagus $container-max-widths) in ionad dornán athróg ar leith. Tagann siad seo in ionad na n- @screen-*athróg go hiomlán agus ligeann siad duit na sraitheanna eangaí a shaincheapadh go hiomlán.
    • Tá athrú tagtha ar fhiosruithe ó na meáin freisin. In ionad ár ndearbhuithe maidir le fiosrúcháin ó na meáin a dhéanamh arís leis an luach céanna gach uair, tá @include media-breakpoint-up/down/only. Anois , in ionad na scríbhneoireachta @media (min-width: @screen-sm-min) { ... }, is féidir leat scríobh @include media-breakpoint-up(sm) { ... }.

Comhpháirteanna

  • Painéil thit, mionsamhlacha, agus toibreacha do chomhpháirt nua uile-chuimsitheach, cártaí .
  • Thit an cló deilbhín Glyphicons. Má tá deilbhíní uait, is iad seo a leanas roinnt roghanna:
  • Thit an breiseán Affix jQuery.
    • Molaimid a úsáid position: stickyina ionad. Féach ar an iontráil HTML5 Le do thoil le haghaidh sonraí agus moltaí sonracha polyfill. Moladh amháin is ea @supportsriail a úsáid chun í a chur i bhfeidhm (m.sh., @supports (position: sticky) { ... })/
    • Dá mba rud é go raibh Affix á úsáid agat chun stíleanna breise neamh- positionstíleanna a chur i bhfeidhm, seans nach dtacaíonn na polyfills le do chás úsáide. Rogha amháin le haghaidh úsáidí den sórt sin is ea an leabharlann tríú páirtí ScrollPos-Styler .
  • Thit an comhpháirt glaoire mar chnaipí beagán saincheaptha go bunúsach.
  • Athfhachtóiríodh beagnach gach comhpháirt chun níos mó roghnóirí ranga neamhneadaithe a úsáid in ionad roghnóirí leanaí ró-shonracha.

De réir comhpháirte

Leagann an liosta seo béim ar athruithe tábhachtacha de réir comhpháirte idir v3.xx agus v4.0.0.

Atosaigh

Is é an rud is nua le Bootstrap 4 ná an Atosaigh , stílbhileog nua a thógann ar Normalaigh lenár stíleanna athshocraithe féin a bhfuil tuairimíocht acu. Ní úsáideann na roghnóirí atá sa chomhad seo ach eilimintí - níl aon aicmí anseo. Déanann sé seo ár stíleanna athshocraithe a leithlisiú ónár stíleanna comhpháirte le haghaidh cur chuige níos modúlach. Is iad cuid de na hathshocraithe is tábhachtaí a áiríonn sé seo ná an t- box-sizing: border-boxathrú, ag bogadh ó aonaid emar remgo leor eilimintí, stíleanna nasc, agus go leor athshocrú eilimint fhoirm.

Clóghrafaíocht

  • Bogadh gach .text-fóntais chuig an _utilities.scssgcomhad.
  • Tite .page-headermar is féidir a stíleanna a chur i bhfeidhm trí fóntais.
  • .dl-horizontalcurtha amú. Ina áit sin, bain úsáid as .rowagus <dl>bain úsáid as ranganna colún greille (nó meascáin) ar a chuid féin <dt>agus ar <dd>leanaí.
  • Blockquotes athdheartha, ag bogadh a stíleanna ón <blockquote>eilimint go rang amháin, .blockquote. Thit an .blockquote-reversemodhnóir le haghaidh fóntais téacs.
  • .list-inlineéilíonn sé anois go gcuirfidh a leanaí míreanna ar liosta an .list-inline-itemrang nua i bhfeidhm orthu.

Íomhánna

  • Athainmnithe .img-responsivego .img-fluid.
  • Athainmnithe .img-roundedgo.rounded
  • Athainmnithe .img-circlego.rounded-circle

Táblaí

  • Baineadh beagnach gach cás den >roghnóir, rud a chiallaíonn go bhfaighidh táblaí neadaithe stíleanna go huathoibríoch óna dtuismitheoirí anois. Déanann sé seo ár roghnóirí agus ár n-oiriúnuithe féideartha a shimpliú go mór.
  • Athainmníodh é .table-condensedle .table-smhaghaidh comhsheasmhachta.
  • Cuireadh .table-inverserogha nua leis.
  • Modhnóirí ceanntásca tábla curtha leis: .thead-defaultagus .thead-inverse.
  • Ranganna comhthéacsúla athainmnithe chun .table--réimír a bheith acu. Mar sin .active, .success, .warning, .dangeragus .infochuig .table-active, .table-success, .table-warning, .table-dangeragus .table-info.

Foirmeacha

  • Athshocraíonn an eilimint bhog go dtí an _reboot.scsscomhad.
  • Athainmnithe .control-labelgo .col-form-label.
  • Athainmnithe .input-lgagus .input-smchuig .form-control-lgagus .form-control-sm, faoi seach.
  • Ranganna anuas .form-group-*ar mhaithe le simplíocht. Úsáid .form-control-*ranganna ina ionad sin anois.
  • Thit .help-blocksé agus cuireadh .form-texttéacs cabhrach ina ionad le haghaidh bloc-leibhéal. Le haghaidh téacs cabhrach inlíne agus roghanna solúbtha eile, bain úsáid as ranganna fóntais mar .text-muted.
  • Thit .radio-inlineagus .checkbox-inline.
  • Comhdhlúite .checkboxagus .radioisteach .form-checkagus na .form-check-*ranganna éagsúla.
  • Foirmeacha cothrománacha athchóirithe:
    • Thit an .form-horizontalriachtanas ranga.
    • .form-groupNí bhaineann stíleanna as an .rowvia mixin a thuilleadh, mar sin .rowtá sé ag teastáil anois le haghaidh leagan amach greille cothrománach (m.sh., <div class="form-group row">).
    • Cuireadh .col-form-labelrang nua le lipéid lár ingearach le .form-controls.
    • Cuireadh nua leis .form-rowle haghaidh leagan amach dlúthfhoirme leis na ranganna greille (babhtáil .rowle haghaidh .form-rowagus téigh).
  • Tacaíocht d’fhoirmeacha saincheaptha curtha leis (le haghaidh ticbhoscaí, raidiónna, roghnúcháin agus ionchuir chomhaid).
  • Athsholáthar .has-error, .has-warning, agus .has-successranganna le bailíochtú foirme HTML5 trí CSS :invalidagus :validpseudo-classes.
  • Athainmnithe .form-control-staticgo .form-control-plaintext.

Cnaipí

  • Athainmnithe .btn-defaultgo .btn-secondary.
  • Thit an .btn-xsrang go hiomlán mar .btn-smatá i gcomhréir i bhfad níos lú ná v3's.
  • Tá gné cnaipe státmharbutton.js an bhreiseáin jQuery ar lár. Áirítear leis seo na modhanna $().button(string)agus . $().button('reset')Molaimid beagán beag bídeach de JavaScript saincheaptha a úsáid ina ionad sin, rud a mbeadh sé de bhuntáiste agat é féin a iompar go díreach mar is mian leat é.
    • Tabhair faoi deara go bhfuil gnéithe eile an bhreiseáin (ticbhoscaí cnaipe, raidiónna cnaipe, cnaipí aon-scoránaigh) coinnithe in v4.
  • Athraigh cnaipí [disabled]go dtí :disabledmar thacaí IE9+ :disabled. Tá fieldset[disabled]sé riachtanach go fóill, áfach, mar go bhfuil bugaí fós ag na tacair pháirce dúchasacha faoi mhíchumas in IE11 .

Grúpa cnaipí

  • Athscríobh an chomhpháirt le flexbox.
  • Bainte .btn-group-justified. Mar ionadach is féidir leat é a úsáid <div class="btn-group d-flex" role="group"></div>mar chumhdach timpeall eilimintí le .w-100.
  • Thit an .btn-group-xsrang go hiomlán nuair a baineadh .btn-xs.
  • Baineadh spásáil shoiléir idir grúpaí cnaipí i mbarraí uirlisí cnaipe; úsáid a bhaint as fóntais corrlach anois.
  • Doiciméadú feabhsaithe le húsáid le comhpháirteanna eile.
  • Aistrithe ó roghnóirí tuismitheora go ranganna uatha do gach comhpháirt, modhnóirí, etc.
  • Stíleanna anuas simplithe le nach gcuirfear ar aghaidh iad a thuilleadh le saigheada aníos nó anuas ceangailte leis an roghchlár anuas.
  • Is féidir dropdowns a thógáil le <div>s nó <ul>s anois.
  • Stíleanna anuas a atógadh agus marcáil chun tacaíocht éasca ionsuite a sholáthar do mhíreanna anuas <a>agus <button>bunaithe orthu.
  • Athainmnithe .dividergo .dropdown-divider.
  • Teastaíonn míreanna anuas anois .dropdown-item.
  • Ní bhíonn sainráite ag teastáil a thuilleadh do scoránaigh anuas <span class="caret"></span>; cuirtear é seo ar fáil go huathoibríoch anois trí CSS ::afterar .dropdown-toggle.

Córas greille

  • Cuireadh 576pxbrisphointe greille nua leis mar sm, rud a chiallaíonn go bhfuil cúig shraith iomlán ann anois ( xs, sm, md, , lg, agus xl).
  • Athainmníodh na ranganna modhnóirí greille freagrúla ó .col-{breakpoint}-{modifier}-{size}go dtí .{modifier}-{breakpoint}-{size}le haghaidh ranganna greille níos simplí.
  • Ranganna mionathraithe brú agus tarraingt anuas do na ranganna nua faoi thiomáint an bhosca flex order. Mar shampla, in ionad .col-8.push-4agus .col-4.pull-8, d'úsáidfeá .col-8.order-2agus .col-4.order-1.
  • Ranganna fóntais flexbox leis do chóras greille agus do chomhpháirteanna.

Liostaigh na grúpaí

  • Athscríobh an chomhpháirt le flexbox.
  • Cuireadh a.list-group-itemrang sainráite ina ionad, .list-group-item-action, le haghaidh nasc stílithe agus leaganacha cnaipe de mhíreanna grúpa liostaí.
  • Rang breise .list-group-flushle húsáid le cártaí.
  • Athscríobh an chomhpháirt le flexbox.
  • Mar gheall ar aistriú go flexbox, is dócha go mbeidh ailíniú na deilbhíní dífhostaithe sa cheanntásc briste mar nach bhfuilimid ag baint úsáide as snámháin a thuilleadh. Tagann ábhar ar snámh ar dtús, ach le flexbox ní mar sin atá an scéal a thuilleadh. Nuashonraigh do dheilbhíní dífhostú chun teacht i ndiaidh teidil mhódúla le socrú.
  • Baineadh an remoterogha (a d'fhéadfaí a úsáid chun ábhar seachtrach a luchtú agus a instealladh go huathoibríoch isteach i módúil) agus an loaded.bs.modalteagmhas comhfhreagrach. Molaimid ina ionad sin úsáid a bhaint as templáil ar thaobh an chliaint nó as creat ceangailteach sonraí, nó ag glaoch ar jQuery.load tú féin.
  • Athscríobh an chomhpháirt le flexbox.
  • Thit beagnach gach >roghnóir le haghaidh stílithe níos simplí trí ranganna gan neadú.
  • In ionad roghnóirí HTML-shonracha cosúil le .nav > li > a, úsáidimid ranganna ar leith le haghaidh .navs, .nav-items, agus .nav-links. Fágann sé seo go mbeidh do HTML níos solúbtha agus ag an am céanna tá sé níos fairsinge.

Athscríobhadh an barra nascleanúna go hiomlán i flexbox le tacaíocht fheabhsaithe le haghaidh ailíniú, freagrúlacht agus saincheaptha.

  • Cuirtear iompraíochtaí sofhreagrach an bharra nascleanúna i bhfeidhm ar an .navbarrang anois tríd an rogha riachtanach .navbar-expand-{breakpoint} nuair a roghnaíonn tú cá háit ar cheart an barra nascleanúna a laghdú. Roimhe seo bhí sé seo ina mhionathrú níos lú athraitheach agus bhí gá le hath-thiomsú.
  • .navbar-defaultanois .navbar-light, cé go .navbar-darkbhfanann mar an gcéanna . Teastaíonn ceann amháin díobh seo ar gach barra nascleanúna. Mar sin féin, ní leagann na ranganna seo background-colors; ina ionad sin go bunúsach ní dhéanann siad ach difear color.
  • Tá dearbhú cúlra de shaghas éigin ag teastáil ó Navbars anois. Roghnaigh ónár bhfóntais chúlra ( .bg-*) nó socraigh do chuid féin leis na haicmí solais / inbhéarta thuas le haghaidh saincheaptha buile .
  • I bhfianaise stíleanna flexbox, is féidir le barraí nascleanúna úsáid a bhaint as fóntais flexbox le haghaidh roghanna ailínithe éasca.
  • .navbar-toggleanois .navbar-toggleragus tá stíleanna éagsúla agus marcáil istigh (gan níos mó trí cinn <span>).
  • Thit an .navbar-formrang go hiomlán. Ní gá a thuilleadh; ina ionad sin, bain úsáid as .form-inlineagus cuir i bhfeidhm fóntais corrlaigh de réir mar is gá.
  • Ní áirítear barraí nascleanúna a thuilleadh margin-bottomnó border-radiusde réir réamhshocraithe. Úsáid fóntais de réir mar is gá.
  • Nuashonraíodh gach sampla ina bhfuil barraí nascleanúna chun marcáil nua a chur san áireamh.

Leathanaigh

  • Athscríobh an chomhpháirt le flexbox.
  • Tá gá anois le haicmí follasacha ( .page-item, .page-link) ar shliocht .paginations
  • Thit an .pagercomhpháirt go hiomlán mar ní raibh i gceist leis ach cnaipí imlíne saincheaptha.
  • Tá aicme fhollasach, .breadcrumb-item, ag teastáil anois ar shliocht .breadcrumbs

Lipéid agus suaitheantais

  • Comhdhlúite .labelagus .badgea scaradh ón <label>eilimint agus comhpháirteanna gaolmhara a shimpliú.
  • Curtha leis .badge-pillmar mhionathraitheoir le haghaidh cuma “pill” chothromú.
  • Ní chuirtear suaitheantais ar snámh go huathoibríoch i ngrúpaí liostaí agus i gcomhpháirteanna eile a thuilleadh. Tá ranganna fóntais ag teastáil chuige sin anois.
  • .badge-defaultíslíodh agus .badge-secondarycuireadh leis é chun na ranganna mionathraithe comhpháirte a úsáidtear in áiteanna eile a mheaitseáil.

Painéil, mionsamhlacha, agus toibreacha

Tite go hiomlán don chomhpháirt cárta nua.

Painéil

  • .panelgo .card, tógtha anois le flexbox.
  • .panel-defaultbhaint agus gan athsholáthar.
  • .panel-groupbhaint agus gan athsholáthar. .card-groupnach bhfuil athsholáthair, tá sé difriúil.
  • .panel-headingchun.card-header
  • .panel-titlechuig .card-title. Ag brath ar an gcuma atá ag teastáil, b'fhéidir gur mhaith leat eilimintí ceannteidil nó ranganna (m.sh. <h3>, .h3) nó eilimintí nó ranganna troma (m.sh. <strong>, <b>, .font-weight-bold) a úsáid. Tabhair faoi deara .card-title, cé go bhfuil sé ainmnithe mar an gcéanna, táirgeann cuma difriúil ná .panel-title.
  • .panel-bodychun.card-body
  • .panel-footerchun.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, agus .panel-dangerfágadh iad le haghaidh .bg-, .text-, , agus .borderfóntais a gineadh ónár $theme-colorsléarscáil Sass.

Dul chun cinn

  • Cuireadh fóntais in ionad .progress-bar-*ranganna comhthéacsúla . .bg-*Mar shampla class="progress-bar progress-bar-danger"éiríonn , class="progress-bar bg-danger".
  • Cuireadh . .active_.progress-bar-animated
  • Rinneadh athchóiriú ar an gcomhpháirt iomlán chun dearadh agus stíliú a shimpliú. Tá níos lú stíleanna againn chun tú a shárú, táscairí nua agus deilbhíní nua.
  • Tá gach CSS neamh-neadaithe agus athainmnithe, ag cinntiú go bhfuil réimír .carousel-.
    • Le haghaidh míreanna timpealláin, .next, .prev, .left, agus .righttá siad anois .carousel-item-next, .carousel-item-prev, .carousel-item-left, agus .carousel-item-right.
    • .itemfreisin anois .carousel-item.
    • Maidir le rialuithe roimhe seo/seo chugainn, .carousel-control.rightagus .carousel-control.leftmar atá anois .carousel-control-nextagus .carousel-control-prev, rud a chiallaíonn nach dteastaíonn bunrang ar leith uathu a thuilleadh.
  • Baineadh gach stíliú sofhreagrach amach, á chur siar chuig fóntais (m.sh., fortheidil a thaispeáint ar phoirt amhairc áirithe) agus stíleanna saincheaptha de réir mar is gá.
  • Sáraítear íomhá bainte le haghaidh íomhánna i míreanna timpealláin, ag cur siar go dtí fóntais.
  • Tweaked the Carousel mar shampla chun an marcáil agus na stíleanna nua a chur san áireamh.

Táblaí

  • Tacaíocht bainte le haghaidh táblaí neadaithe styled. Tá gach stíl tábla faighte le hoidhreacht anois in v4 le haghaidh roghnóirí níos simplí.
  • Cuireadh malairt tábla inbhéartach leis.

Fóntais

  • Taispeáin, folaithe, agus tuilleadh:
    • Déanta fóntais taispeána sofhreagrach (m.sh., .d-noneagus d-{sm,md,lg,xl}-none).
    • Thit an chuid is mó de na fóntais le haghaidh fóntais taispeána.hidden-* nua . Mar shampla, in ionad , úsáid . Athainmníodh na fóntais chun an scéim ainmniúcháin fóntais taispeána a úsáid. Tuilleadh eolais faoin rannán Fóntais Responsive den leathanach seo..hidden-sm-up.d-sm-none.hidden-print
    • Ranganna breise .float-{sm,md,lg,xl}-{left,right,none}do shnámháin fhreagracha agus baineadh iad .pull-leftagus .pull-rightós rud é go bhfuil siad iomarcach .float-leftagus .float-right.
  • Cineál:
    • Athruithe freagrúla curtha lenár ranganna ailínithe téacs .text-{sm,md,lg,xl}-{left,center,right}.
  • Ailíniú agus spásáil:
  • Nuashonraíodh Clearfix chun tacaíocht do leaganacha brabhsálaí níos sine a laghdú.

meascáin réimír díoltóra

Baineadh meascáin réimír díoltóirí Bootstrap 3 , a bhí dímheasta in v3.2.0, i Bootstrap 4. Ós rud é go n-úsáidimid Autoprefixer , níl gá leo a thuilleadh.

Baineadh na meascáin seo a leanas : 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,translatetranslate3duser-select

Doiciméadúchán

Rinneadh uasghrádú iomlán ar ár gcáipéisíocht freisin. Seo chugaibh síos íseal:

  • Táimid fós ag baint úsáide as Jekyll, ach tá forlíontáin againn sa mheascán:
  • Athscríobhadh gach ábhar docs i Markdown (in ionad HTML) le haghaidh eagarthóireacht níos éasca.
  • Tá atheagrú déanta ar na leathanaigh le haghaidh ábhar níos simplí agus ordlathas níos sochaideartha.
  • Bhog muid ó CSS ​​rialta go SCSS chun leas iomlán a bhaint as athróga Bootstrap, meascáin agus níos mó.

Fóntais sofhreagracha

Baineadh na @screen-hathróga go léir in v4.0.0. Úsáid na meascáin media-breakpoint-up(), media-breakpoint-down(), nó media-breakpoint-only()Sass nó an $grid-breakpointsléarscáil Sass ina ionad sin.

Baineadh ár n-aicmí fóntas freagrúla den chuid is mó i bhfabhar displayfóntais shoiléire.

  • Baineadh na ranganna .hiddenagus na .showranganna toisc go raibh siad salach ar a chéile le modhanna $(...).hide()agus $(...).show()modhanna jQuery. Ina áit sin, déan iarracht an [hidden]tréith a scoránú nó bain úsáid as stíleanna inlíne mar style="display: none;"agus style="display: block;".
  • Baineadh na .hidden-ranganna ar fad, seachas na fóntais priontála a athainmníodh.
    • Bainte as 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
    • Bainte de 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
  • Ní thosaíonn fóntais priontála le .hidden-nó .visible-, ach le .d-print-.
    • Seanainmneacha: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Ranganna nua: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Seachas .visible-*ranganna follasacha a úsáid, déanann tú eilimint infheicthe ach gan í a chur i bhfolach ag an méid scáileáin sin. Is féidir leat rang amháin a chomhcheangal .d-*-nonele haicme amháin .d-*-blockchun dúil a thaispeáint ar eatramh ar leith de mhéideanna scáileáin (m.sh. .d-none.d-md-block.d-xl-nonetaispeántar an eilimint ar ghléasanna meánmhéide agus móra amháin).

Tabhair faoi deara go gciallaíonn na hathruithe ar na brisphointí eangaí i v4 go mbeidh ort briseadhphointe amháin a dhéanamh níos mó chun na torthaí céanna a bhaint amach. Ní dhéanann na haicmí fóntais freagrúla nua iarracht freastal ar chásanna nach bhfuil chomh coitianta sin nuair nach féidir infheictheacht eiliminte a chur in iúl mar raon amháin tadhlach de mhéideanna amharcchláir; ina ionad sin beidh ort CSS saincheaptha a úsáid i gcásanna den sórt sin.