in English

A’ gluasad gu v4

Tha Bootstrap 4 na phrìomh ath-sgrìobhadh den phròiseact gu lèir. Tha geàrr-chunntas air na h-atharrachaidhean as ainmeil gu h-ìosal, agus an uairsin atharrachaidhean nas sònraichte air co-phàirtean buntainneach.

Atharraichean seasmhach

A’ gluasad bho Beta 3 chun sgaoileadh v4.x seasmhach againn, chan eil atharrachaidhean briste ann, ach tha atharrachaidhean sònraichte ann.

Clò-bhualadh

  • Goireasan clò-bhualaidh briste stèidhichte. Roimhe sin, bhiodh cleachdadh .d-print-*clas a’ dol thairis air .d-*clas sam bith eile gun dùil. A-nis, tha iad a’ maidseadh na goireasan taisbeanaidh eile againn agus chan eil iad a’ buntainn ach ris na meadhanan sin ( @media print).

  • Goireasan taisbeanaidh clò-bhualaidh leudaichte a tha rim faighinn gus a bhith co-ionnan ri goireasan eile. Cha robh ach beta 3 agus nas sine aig block, inline-block, inline, agus none. Stable v4 air a chur ris flex, inline-flex, table, table-row, agus table-cell.

  • Ro-shealladh clò stèidhichte a’ toirt seachad thairis air brobhsairean le stoidhlichean clò ùra a tha a’ sònrachadh @page size.

Beta 3 tionndadh

Fhad ‘s a chunnaic Beta 2 a’ mhòr-chuid de na h-atharrachaidhean briseadh againn aig ìre beta, ach tha beagan againn fhathast ris am feumar dèiligeadh ann am brath Beta 3. Bidh na h-atharrachaidhean sin an sàs ma tha thu ag ùrachadh gu Beta 3 bho Beta 2 no tionndadh nas sine de Bootstrap.

Measgachadh

  • $thumbnail-transitionThoir air falbh an caochladair nach deach a chleachdadh . Cha robh sinn ag atharrachadh dad, agus mar sin cha robh ann ach còd a bharrachd.
  • Chan eil am pasgan npm a’ toirt a-steach faidhlichean sam bith a bharrachd air na faidhlichean stòr is dist againn; ma bha thu an urra riutha agus gu robh thu a’ ruith ar sgriobtaichean tron node_modules​​​​phasgan, bu chòir dhut do shruth-obrach atharrachadh.

Foirmean

  • Ath-sgrìobh an dà chuid bogsaichean sgrùdaidh àbhaisteach agus bunaiteach agus rèidiothan. A-nis, tha structar HTML co-ionnan aig an dithis (taobh a-muigh <div>le bràthair-bràthar <input>agus <label>) agus na h-aon stoidhlichean cruth (bunaiteach air a chruachadh, a-rèir clas mion-atharrachaidh). Leigidh seo leinn an leubail a stoidhleachadh stèidhichte air staid an cuir a-steach, a’ sìmpleachadh taic don disabledfheart (a bha feumach air clas pàrant roimhe seo) agus a’ toirt taic nas fheàrr don dearbhadh foirm againn.

    Mar phàirt de seo, tha sinn air an CSS atharrachadh airson a bhith a’ riaghladh ioma background-images air bogsaichean sgrùdaidh foirm àbhaisteach agus rèidiothan. Roimhe sin, .custom-control-indicatorbha an dath cùl-raoin, caisead, agus ìomhaigh SVG air an eileamaid a chaidh a thoirt air falbh. Le bhith a’ gnàthachadh an caisead cùil bha sin a’ ciallachadh a bhith a’ cur an àite an fheadhainn sin a h-uile uair a dh’ fheumadh tu dìreach aon atharrachadh. A-nis, tha againn .custom-control-label::beforeairson an lìonadh agus an caisead agus .custom-control-label::aftera’ làimhseachadh an ìomhaigh.

    Gus sgrùdadh àbhaisteach a dhèanamh air-loidhne, cuir ris .custom-control-inline.

  • Roghnaiche ùraichte airson buidhnean putan stèidhichte air cuir a-steach. An àite [data-toggle="buttons"] { }stoidhle agus giùlan, bidh sinn a’ cleachdadh a’ databhuadh dìreach airson giùlan JS agus bidh sinn an urra ri .btn-group-toggleclas ùr airson stoidhle.

  • Air a thoirt .col-form-legendair falbh airson fàbhar beagan leasaichte .col-form-label. San dòigh seo .col-form-label-smagus .col-form-label-lgfaodar a chleachdadh air <legend>eileamaidean gu furasta.

  • Fhuair cuir a-steach faidhle gnàthaichte atharrachadh air an $custom-file-textcaochladair Sass aca. Chan e mapa Sass neadachaidh a th’ ann tuilleadh agus chan eil cumhachd aige ach aon sreang - am Browseputan oir is e sin a-nis an aon eileamaid bhrèige a chaidh a chruthachadh bhon Sass againn. Tha an Choose fileteacsa a-nis a’ tighinn bhon .custom-file-label.

Buidhnean cuir a-steach

  • Tha addons buidheann cuir a-steach a-nis sònraichte don àite aca an coimeas ri cuir a-steach. Tha sinn air tuiteam .input-group-addonagus .input-group-btnairson dà chlas ùr, .input-group-prependagus .input-group-append. Feumaidh tu eàrr-ràdh no prepend a chleachdadh a-nis, a’ sìmpleachadh mòran den CSS againn. Taobh a-staigh pàipear-taice no prepend, cuir na putanan agad mar a bhiodh iad ann an àite sam bith eile, ach cuir a-steach teacsa .input-group-text.

  • Tha stoidhlichean dearbhaidh a’ faighinn taic a-nis, mar a tha grunn chuir a-steach (ged nach urrainn dhut ach aon chur-a-steach a dhearbhadh gach buidheann).

  • Feumaidh clasaichean meudachaidh a bhith air a’ phàrant .input-groupagus chan ann air na h-eileamaidean cruth fa leth.

Beta 2 tionndadh

Fhad ‘s a tha sinn ann am beta, tha sinn ag amas air nach bi atharrachaidhean briste ann. Ach, chan eil cùisean an-còmhnaidh a’ dol mar a bhathar an dùil. Gu h-ìosal tha na h-atharrachaidhean briste air am bu chòir cuimhneachadh nuair a ghluaiseas tu bho Beta 1 gu Beta 2.

Briseadh

  • Caochladair air a thoirt air falbh $badge-coloragus a chleachdadh air .badge. Bidh sinn a’ cleachdadh gnìomh eadar-dhealachadh dath airson taghadh colorstèidhichte air an background-color, agus mar sin chan eil feum air an caochladair.
  • Gnìomh ath- ainmichte grayscale()gus gray()casg a chuir air còmhstri le grayscalesìoltachan dùthchasach CSS.
  • Air ath- ainmeachadh .table-inverse, .thead-inverse, agus .thead-defaultgu .*-darkagus .*-light, a’ maidseadh ar sgeamaichean dath a thathas a’ cleachdadh ann an àiteachan eile.
  • Bidh bùird fhreagarrach a-nis a’ gineadh chlasaichean airson gach puing brisidh clèithe. Tha seo a’ briseadh bho Beta 1 leis gu bheil an .table-responsiverud a tha thu air a bhith a’ cleachdadh nas coltaiche ri .table-responsive-md. Faodaidh tu a-nis a chleachdadh .table-responsiveno .table-responsive-{sm,md,lg,xl}mar a dh’ fheumar.
  • Taic Bower air a leigeil sìos leis gu bheil am manaidsear pacaid air a bhith air a mholadh airson roghainnean eile (me, Yarn no npm). Faic boghadair/bogha #2298 airson mion-fhiosrachadh.
  • Feumaidh Bootstrap fhathast jQuery 1.9.1 no nas àirde, ach thathas a’ moladh dhut dreach 3.x a chleachdadh oir is e na brobhsairean le taic v3.x an fheadhainn a tha a ’toirt taic do Bootstrap agus tha cuid de dh’ rèiteachaidhean tèarainteachd aig v3.x.
  • Thoir air falbh an clas nach deach a chleachdadh .form-control-label. Ma rinn thu feum den chlas seo, bha e na dhùblachadh den .col-form-labelchlas a bha stèidhichte gu dìreach agus <label>leis an cuir a-steach co-cheangailte ris ann an cruth cruth còmhnard.
  • Dh’ atharraich sinn am color-yiqmeasgachadh a bha a’ toirt a-steach an colortogalach gu gnìomh a thilleas luach, a’ toirt cothrom dhut a chleachdadh airson togalach CSS sam bith. Mar eisimpleir, an àite color-yiq(#000), bhiodh tu a’ sgrìobhadh color: color-yiq(#000);.

Prìomh thachartasan

  • Thugadh a -steach cleachdadh ùr pointer-eventsair modalan. Bidh an taobh a-muigh a .modal-dialog’ dol tro thachartasan le pointer-events: noneairson làimhseachadh cliog àbhaisteach (ga dhèanamh comasach dìreach èisteachd air adhart .modal-backdropairson cliogan sam bith), agus an uairsin cuir an aghaidh e airson an fhìor .modal-contentle pointer-events: auto.

Geàrr-chunntas

Seo na stuthan tiogaidean mòra air am bi thu airson a bhith mothachail nuair a ghluaiseas tu bho v3 gu v4.

Taic brabhsair

  • Leig sìos taic IE8, IE9, agus iOS 6. Chan eil v4 a-nis ach IE10+ agus iOS 7+. Airson làraich a dh’ fheumas an dàrna cuid, cleachd v3.
  • Taic oifigeil a bharrachd airson Brabhsair Android v5.0 Lollipop agus WebView. Chan eil ach dreachan nas tràithe de bhrobhsair Android agus WebView fhathast a’ faighinn taic neo-oifigeil.

Atharraichean cruinne

  • Tha Flexbox air a chomasachadh gu bunaiteach. San fharsaingeachd tha seo a’ ciallachadh gluasad air falbh bho floats agus barrachd thairis air na co-phàirtean againn.
  • Air atharrachadh bho Nas lugha gu Sass airson na faidhlichean CSS stòr againn.
  • Air atharrachadh bho pxbhith remmar ar prìomh aonad CSS, ged a thathas fhathast a’ cleachdadh piogsail airson ceistean meadhanan agus giùlan clèithe leis nach eil meud an t-seòrsa a’ toirt buaidh air seallaidhean innealan.
  • Chaidh meud cruth-clò cruinne suas bho 14pxgu 16px.
  • Ìrean clèithe ath-leasaichte gus an còigeamh roghainn a chuir ris (a’ dèiligeadh ri innealan nas lugha aig 576pxagus gu h-ìosal) agus air an -xsinfix a thoirt air falbh bho na clasaichean sin. Eisimpleir: .col-6.col-sm-4.col-md-3.
  • Chuir sinn roghainnean a ghabhas rèiteachadh an àite a’ chuspair roghnach fa leth tro chaochladairean SCSS (me, $enable-gradients: true).
  • Ath-sgrùdadh air siostam togail gus sreath de sgriobtaichean npm a chleachdadh an àite Grunt. Faic package.jsonairson a h-uile sgriobt, no leugh am pròiseact againn airson feumalachdan leasachaidh ionadail.
  • Chan eil taic ri cleachdadh neo-fhreagairt de Bootstrap tuilleadh.
  • Leig sìos an Customizer air-loidhne airson fàbhar sgrìobhainnean rèiteachaidh nas fharsainge agus togalaichean gnàthaichte.
  • Chaidh dusanan de chlasaichean goireis ùra a chur ris airson paidhrichean cumanta CSS de luach-seilbhe agus ath-ghoiridean beàrnan iomaill / pleadhaig.

Siostam clèithe

  • Gluais gu flexbox.
    • Taic a bharrachd airson flexbox anns na measgachadh clèithe agus clasaichean ro-mhìnichte.
    • Mar phàirt de flexbox, bha taic ann airson clasaichean co-thaobhadh dìreach agus còmhnard.
  • Ainmean clas clèithe ùraichte agus sreath clèithe ùr.
    • smChuir sinn sreath clèithe ùr gu h-ìosal 768pxairson barrachd smachd granular. Tha xs, sm, md, lg, agus xl. Tha seo cuideachd a’ ciallachadh gu bheil a h-uile sreath air a dhol suas aon ìre (mar sin .col-md-6ann an v3 a-nis .col-lg-6ann an v4).
    • xschaidh clasaichean clèithe atharrachadh gus nach fheum an infix riochdachadh nas mionaidiche gu bheil iad a’ tòiseachadh a’ cleachdadh stoidhlichean aig min-width: 0agus chan e luach picteil stèidhichte. An àite .col-xs-6, tha e a-nis .col-6. Feumaidh a h-uile sreath clèithe eile an infix (me, sm).
  • Meudan clèithe ùraichte, measgachadh, agus caochladairean.
    • Tha mapa Sass a-nis aig cutairean clèithe gus an urrainn dhut leudan cutairean sònraichte a shònrachadh aig gach briseadh.
    • Measgachaidhean clèithe ùraichte gus measgachadh make-col-readyprep agus a a chleachdadh make-colgus meud nan colbhan fa leth a shuidheachadh flexagus max-widthairson meud nan colbhan fa leth.
    • Puingean brisidh ceist siostam clèithe atharraichte agus leud soithichean gus cunntas a thoirt air sreath clèithe ùr agus dèanamh cinnteach gu bheil colbhan air an sgaradh gu cothromach 12aig an leud as motha.
    • Bithear a’ làimhseachadh puingean brisidh clèithe agus leud soithichean a-nis tro mhapaichean Sass ( $grid-breakpointsagus $container-max-widths) an àite dòrlach de chaochladairean fa leth. Bidh iad sin a’ dol an àite nan @screen-*caochladairean gu tur agus a’ toirt cothrom dhut na h-ìrean clèithe a ghnàthachadh gu h-iomlan.
    • Tha ceistean nam meadhanan air atharrachadh cuideachd. An àite a bhith ag ath-aithris ar dearbhaidhean ceist meadhanan leis an aon luach gach turas, tha @include media-breakpoint-up/down/only. A-nis, an àite sgrìobhadh @media (min-width: @screen-sm-min) { ... }, faodaidh tu sgrìobhadh @include media-breakpoint-up(sm) { ... }.

Co-phàirtean

  • Pannalan air an tuiteam, òrdagan, agus tobraichean airson pàirt ùr uile-chuimseach, cairtean .
  • Leig sìos cruth-clò ìomhaigh Glyphicons. Ma tha feum agad air ìomhaighean, tha cuid de roghainnean ann:
  • Leig às am plugan Affix jQuery.
    • Tha sinn a 'moladh a chleachdadh position: stickyna àite. Faic an HTML5 Feuch an cuir thu a-steach airson mion-fhiosrachadh agus molaidhean polyfill sònraichte. Is e aon mholadh @supportsriaghailt a chleachdadh airson a bhuileachadh (me, @supports (position: sticky) { ... })
    • Nam biodh tu a’ cleachdadh Affix gus positionstoidhlichean neo-stoidhle a bharrachd a chuir an sàs, is dòcha nach cuir na polyfills taic ris a’ chùis cleachdaidh agad. Is e aon roghainn airson cleachdaidhean mar sin an leabharlann ScrollPos-Styler treas-phàrtaidh .
  • Leig sìos am pàirt pager oir b ’e putanan beagan gnàthaichte a bh’ ann.
  • Rinn sinn ath-leasachadh air cha mhòr a h-uile pàirt gus barrachd luchd-taghaidh clas gun neadachadh a chleachdadh an àite luchd-taghaidh cloinne a bha ro-shònraichte.

A rèir co-phàirt

Tha an liosta seo a’ soilleireachadh prìomh atharrachaidhean a rèir co-phàirt eadar v3.xx agus v4.0.0.

Ath-thòisich

Is e rud ùr a th’ ann am Bootstrap 4 an Reboot , duilleag stoidhle ùr a bhios a’ togail air Normalize leis na stoidhlichean ath-shuidheachadh rudeigin beachdail againn fhèin. Chan eil luchd-taghaidh a tha a’ nochdadh san fhaidhle seo a’ cleachdadh ach eileamaidean - chan eil clasaichean an seo. Tha seo a’ dealachadh ar stoidhlichean ath-shuidheachadh bho na stoidhlichean co-phàirteach againn airson dòigh-obrach nas modular. Is e cuid de na h-ath-shuidheachadh as cudromaiche a tha seo a’ toirt a-steach an t- box-sizing: border-boxatharrachadh, gluasad bho emgu remaonadan air mòran eileamaidean, stoidhlichean ceangail, agus iomadh ath-shuidheachadh eileamaidean cruth.

Clò-sgrìobhaidh

  • Ghluais sinn a h-uile .text-goireas chun _utilities.scssfhaidhle.
  • Air a leigeil sìos .page-headeroir faodar na stoidhlichean aige a chuir an sàs tro ghoireasan.
  • .dl-horizontalair a leigeil seachad. An àite sin, cleachd .rowair <dl>agus cleachd clasaichean colbh clèithe (no measgachadh) air a shon fhèin <dt>agus air a’ <dd>chloinn.
  • Blockquotes ath-dhealbhaichte, a’ gluasad an stoidhlichean bhon <blockquote>eileamaid gu aon chlas, .blockquote. Leig sìos am mion- .blockquote-reverseatharrachaidh airson goireasan teacsa.
  • .list-inlinea-nis ag iarraidh gum bi an .list-inline-itemclas ùr air a chuir a-steach don chlàr ùr aig a’ chloinn aca.

Dealbhan

  • Air ath- ainmeachadh .img-responsivegu .img-fluid.
  • Air ath- ainmeachadh .img-roundedgu.rounded
  • Air ath- ainmeachadh .img-circlegu.rounded-circle

Clàir

  • Chaidh cha mhòr a h-uile suidheachadh den neach- >taghaidh a thoirt air falbh, a’ ciallachadh gum faigh bùird neadachaidh a-nis stoidhlichean bho am pàrantan gu fèin-ghluasadach. Bidh seo gu mòr a’ sìmpleachadh ar luchd-taghaidh agus gnàthachadh comasach.
  • Air ath- ainmeachadh .table-condensedgu .table-smairson cunbhalachd.
  • Chaidh roghainn ùr a chur ris .table-inverse.
  • Mion-atharraichean cinn-bùird air a chur ris: .thead-defaultagus .thead-inverse.
  • Clasaichean co-theacsa ath-ainmichte gus ro-leasachan a bhith .table-aca. Mar sin .active, .success, .warning, .dangeragus .infogu .table-active, .table-success, .table-warning, .table-dangeragus .table-info.

Foirmean

  • Ath-shuidhichidh an eileamaid a chaidh a ghluasad dhan _reboot.scssfhaidhle.
  • Air ath- ainmeachadh .control-labelgu .col-form-label.
  • Air ath- ainmeachadh .input-lgagus .input-smgu .form-control-lgagus .form-control-sm, fa leth.
  • Clasaichean .form-group-*air an leigeil sìos air sgàth sìmplidh. Cleachd .form-control-*clasaichean nan àite a-nis.
  • Air a leigeil sìos .help-blockagus air a chuir na àite .form-textairson teacsa cuideachaidh ìre bloc. Airson teacsa cuideachaidh in-loidhne agus roghainnean sùbailte eile, cleachd clasaichean goireis mar .text-muted.
  • Air tuiteam .radio-inlineagus .checkbox-inline.
  • Daingnichte .checkboxagus .radioa-steach .form-checkagus na diofar .form-check-*chlasaichean.
  • Foirmean còmhnard air an ath-sgrùdadh:
    • Leig às an .form-horizontalriatanas clas.
    • .form-groupchan eil e a’ buntainn stoidhlichean bhon .rowvia mixin tuilleadh, agus mar sin .rowtha feum air a-nis airson dealbhadh clèithe còmhnard (me, <div class="form-group row">).
    • Clas ùr air a chur ris na .col-form-labelbileagan sa mheadhan gu dìreach le .form-controls.
    • Ùr air a chur ris .form-rowairson cruth cruth teann leis na clasaichean clèithe (iomlaid .rowairson a .form-rowagus falbh).
  • Taic foirmean gnàthaichte a bharrachd (airson bogsaichean-seic, rèidiothan, taghaidhean, agus cuir a-steach faidhle).
  • Chaidh dearbhadh foirm HTML5 a chuir na àite .has-error, .has-warning, agus .has-successclasaichean tro CSS :invalidagus :validclasaichean meallta.
  • Air ath- ainmeachadh .form-control-staticgu .form-control-plaintext.

Putanan

  • Air ath- ainmeachadh .btn-defaultgu .btn-secondary.
  • Leig sìos a’ .btn-xschlas gu tur mar .btn-sma tha gu ìre nas lugha na v3's.
  • Chaidh am feart putan stàiteilbutton.js den plugan jQuery a leigeil seachad. Tha seo a’ toirt a-steach dòighean $().button(string)agus $().button('reset')modhan. Tha sinn a’ comhairleachadh a bhith a’ cleachdadh pìos beag de JavaScript àbhaisteach na àite, aig am bi e na bhuannachd a bhith gad ghiùlan fhèin dìreach mar a tha thu ga iarraidh.
    • Thoir an aire gun deach feartan eile a’ phlugan (bogsaichean sgrùdaidh putan, rèidiothan putan, putanan aon-toggle) a ghleidheadh ​​​​ann an v4.
  • Atharraich putanan [disabled]gu :disabledmar a tha IE9+ a’ toirt taic :disabled. Tha fieldset[disabled]e fhathast riatanach a chionn 's gu bheil raointean-raoin dùthchasach ciorramach fhathast nam biastagan ann an IE11 .

Buidheann putanan

  • Ath-sgrìobh am pàirt le flexbox.
  • Air a thoirt air falbh .btn-group-justified. Mar neach eile faodaidh tu a chleachdadh <div class="btn-group d-flex" role="group"></div>mar chòmhdach timcheall eileamaidean le .w-100.
  • Leig às an .btn-group-xsclas gu tur leis gu bheilear a’ toirt air falbh .btn-xs.
  • Thoir air falbh beàrn soilleir eadar buidhnean putan ann am bàraichean inneal putan; cleachd goireasan margin a-nis.
  • Sgrìobhainnean nas fheàrr airson an cleachdadh le co-phàirtean eile.
  • Air atharrachadh bho luchd-taghaidh phàrantan gu clasaichean singilte airson a h-uile co-phàirt, mion-atharraichean, msaa.
  • Stoidhlichean tuiteam-sìos nas sìmplidhe gus nach cuir iad air falbh tuilleadh le saighdean suas no sìos ceangailte ris a’ chlàr tuiteam-sìos.
  • Faodar dropdowns a thogail le <div>s no <ul>s a-nis.
  • Ath-thog stoidhlichean tuiteam-sìos agus comharrachadh gus taic furasta, stèidhichte a thoirt a-steach airson stuthan tuiteam-sìos <a>agus <button>stèidhichte.
  • Air ath- ainmeachadh .dividergu .dropdown-divider.
  • Feumaidh stuthan tuiteam-sìos a-nis .dropdown-item.
  • Chan eil feum air toglaichean tuiteam-sìos tuilleadh <span class="caret"></span>; tha seo a-nis air a thoirt seachad gu fèin-obrachail tro CSS ::afterair .dropdown-toggle.

Siostam clèithe

  • 576pxChuir sinn puing brisidh clèithe ùr ris mar sm, a’ ciallachadh gu bheil a-nis còig ìrean iomlan ( xs, sm, md, lg, agus xl).
  • Air ath-ainmeachadh na clasaichean atharrachaidh clèithe freagairteach bho .col-{breakpoint}-{modifier}-{size}gu .{modifier}-{breakpoint}-{size}airson clasaichean clèithe nas sìmplidh.
  • Clasaichean atharrachaidh putadh is slaodadh sìos airson na clasaichean ùra le cumhachd flexbox order. Mar eisimpleir, an àite .col-8.push-4agus .col-4.pull-8, bhiodh tu a’ cleachdadh .col-8.order-2agus .col-4.order-1.
  • Clasaichean goireis flexbox air an cur ris airson siostam clèithe agus co-phàirtean.

Dèan liosta de bhuidhnean

  • Ath-sgrìobh am pàirt le flexbox.
  • Air a chuir na àite a.list-group-itemle clas soilleir, .list-group-item-action, airson ceangal stoidhle agus dreachan putan de nithean buidhne liosta.
  • Clas air a chur ris .list-group-flushairson a chleachdadh le cairtean.
  • Ath-sgrìobh am pàirt le flexbox.
  • Leis a’ ghluasad gu flexbox, tha coltas ann gu bheil co-thaobhadh ìomhaighean cuir às anns a’ bhann-cinn briste leis nach eil sinn a’ cleachdadh flotaichean tuilleadh. Thig susbaint air bhog an toiseach, ach le flexbox chan eil sin fìor tuilleadh. Ùraich na h-ìomhaighean cuir às agad gus tighinn às deidh tiotalan modal airson an càradh.
  • Chaidh an remoteroghainn (a ghabhadh a chleachdadh gus susbaint a-muigh a luchdachadh agus a chuir a-steach gu modal) agus an loaded.bs.modaltachartas co-fhreagarrach a thoirt air falbh. Tha sinn a’ moladh an àite sin a bhith a’ cleachdadh teamplaid taobh teachdaiche no frèam ceangail dàta, no a’ fònadh jQuery.load thu fhèin.
  • Ath-sgrìobh am pàirt le flexbox.
  • Leig cha mhòr a h-uile >neach-taghaidh airson stoidhle nas sìmplidh tro chlasaichean gun neadachadh.
  • An àite luchd-taghaidh HTML-sònraichte mar .nav > li > a, bidh sinn a’ cleachdadh chlasaichean air leth airson .navs, .nav-items, agus .nav-links. Bidh seo a’ dèanamh do HTML nas sùbailte agus aig an aon àm a’ toirt barrachd leudachaidh air adhart.

Chaidh an navbar ath-sgrìobhadh gu tur ann am flexbox le taic nas fheàrr airson co-thaobhadh, freagairteachd agus gnàthachadh.

  • Bithear a-nis a’ cleachdadh giùlanan navbar freagairteach don .navbarchlas tro na tha a dhìth .navbar-expand-{breakpoint} far am bi thu a’ taghadh càite an tuit thu am bàr nav. Roimhe seo b’ e atharrachadh Nas lugha caochlaideach a bha seo agus bha feum air ath-chruinneachadh.
  • .navbar-defaulta-nis .navbar-light, ged .navbar-darka tha e fhathast mar an ceudna. Tha feum air aon dhiubh sin air gach bàr nav. Ach, chan eil na clasaichean sin a’ suidheachadh background-colors; an àite sin chan eil iad gu bunaiteach a’ toirt buaidh ach air color.
  • Feumaidh Navbars a-nis dearbhadh cùl-fhiosrachaidh de sheòrsa air choreigin. Tagh bho na goireasan cùl-fhiosrachaidh againn ( .bg-*) no suidhich do chuid fhèin leis na clasaichean aotrom / cas gu h-àrd airson gnàthachadh cuthach .
  • Le stoidhlichean flexbox, faodaidh navbars a-nis goireasan flexbox a chleachdadh airson roghainnean co-thaobhadh furasta.
  • .navbar-togglea-nis .navbar-toggleragus tha diofar stoidhlichean agus comharrachadh a-staigh (gun a bhith nas fhaide na trì <span>).
  • Leig às an .navbar-formclas gu tur. Chan eil feum air tuilleadh; an àite sin, dìreach cleachd .form-inlineagus cuir an sàs goireasan iomaill mar a dh’ fheumar.
  • Chan eil navbars a’ toirt a-steach margin-bottomno border-radiusgu bunaiteach. Cleachd goireasan mar a dh’ fheumar.
  • Chaidh a h-uile eisimpleir anns a bheil navbars ùrachadh gus comharrachadh ùr a ghabhail a-steach.

Duilleagadh

  • Ath-sgrìobh am pàirt le flexbox.
  • Tha feum a nis air clasaichean soilleir ( .page-item, .page-link) air sliochd .paginations
  • Leig sìos am .pagerpàirt gu tur leis nach robh e ach beagan a bharrachd air putanan dealbh àbhaisteach.
  • Tha feum a nis air clas soilleir, .breadcrumb-item, air sliochd .breadcrumbs

Bileagan agus bràistean

  • Daingnichte .labelagus .badgegus dealachadh bhon <label>eileamaid agus a dhèanamh nas sìmplidhe co-phàirtean co-cheangailte.
  • Air a chur ris .badge-pillmar mhion-atharrachaidh airson sealladh cruinn “pill”.
  • Chan eil bràistean air an gluasad gu fèin-ghluasadach tuilleadh ann am buidhnean liosta agus co-phàirtean eile. Tha feum air clasaichean goireis a-nis airson sin.
  • .badge-defaultair a leigeil sìos agus air a .badge-secondarychur ris gus a bhith co-ionnan ri clasaichean mion-atharrachaidh phàirtean a thathas a’ cleachdadh ann an àiteachan eile.

Pannalan, òrdagan, agus tobraichean

Air tuiteam gu tur airson a’ phàirt cairt ùr.

Panalan

  • .panelgu .card, a-nis air a thogail le flexbox.
  • .panel-defaultair a thoirt air falbh agus gun a bhith air a chur na àite.
  • .panel-groupair a thoirt air falbh agus gun a bhith air a chur na àite. .card-groupchan eil e na àite, tha e eadar-dhealaichte.
  • .panel-headinggu.card-header
  • .panel-titlegu .card-title. A rèir an t-seallaidh a tha thu ag iarraidh, is dòcha gum bi thu airson eileamaidean cinn no clasaichean (me <h3>, .h3) no eileamaidean no clasaichean trom (me <strong>, <b>, .font-weight-bold) a chleachdadh. Thoir an aire gu bheil .card-title, ged a tha e air ainmeachadh mar an ceudna, a’ toirt sealladh eadar-dhealaichte seach .panel-title.
  • .panel-bodygu.card-body
  • .panel-footergu.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, agus .panel-dangerchaidh an leigeil seachad airson .bg-, .text-, , agus .bordergoireasan a chaidh a chruthachadh bhon $theme-colorsmhapa Sass againn.

Adhartas

  • .progress-bar-*Chaidh goireasan a chuir nan àite clasaichean co- theacsail .bg-*. Mar eisimpleir, class="progress-bar progress-bar-danger"a 'fàs class="progress-bar bg-danger".
  • Air a chuir na àite .activeairson bàraichean adhartais beòthail le .progress-bar-animated.
  • Ath-sgrùdadh air a’ phàirt gu lèir gus dealbhadh agus stoidhle a dhèanamh nas sìmplidhe. Tha nas lugha de stoidhlichean againn airson faighinn thairis air, comharran ùra, agus ìomhaighean ùra.
  • Chaidh a h-uile CSS gun neadachadh agus ath-ainmeachadh, a’ dèanamh cinnteach gu bheil ro-leasachan aig gach clas le .carousel-.
    • Airson nithean carousel, .next, .prev, .left, agus .righttha iad a-nis .carousel-item-next, .carousel-item-prev, .carousel-item-left, agus .carousel-item-right.
    • .itemtha a-nis cuideachd .carousel-item.
    • Airson smachdan roimhe / an ath rud, .carousel-control.rightagus .carousel-control.lefttha iad a-nis .carousel-control-nextagus .carousel-control-prev, a’ ciallachadh nach eil feum aca air clas bunaiteach sònraichte tuilleadh.
  • Thoir air falbh a h-uile stoidhle freagairteach, a’ cur dheth gu goireasan (me, a’ sealltainn fo-thiotalan air cuid de phuirt-seallaidh) agus stoidhlichean àbhaisteach mar a dh’ fheumar.
  • Bidh ìomhaigh air a thoirt air falbh a’ dol thairis air ìomhaighean ann an nithean carousel, a’ cur dheth gu goireasan.
  • Tweaked an eisimpleir Carousel gus an comharrachadh agus na stoidhlichean ùra a thoirt a-steach.

Clàir

  • Taic air a thoirt air falbh airson bùird neadachaidh le stoidhle. Tha na stoidhlichean bùird uile a-nis air an sealbhachadh ann an v4 airson luchd-taghaidh nas sìmplidh.
  • Caochladh clàr inverse air a chur ris.

Goireasan

  • Taisbeanadh, falaichte, agus barrachd:
    • Dèan goireasan taisbeanaidh freagairteach (me, .d-noneagus d-{sm,md,lg,xl}-none).
    • Leig sìos a’ mhòr-chuid de .hidden-*ghoireasan airson goireasan taisbeanaidh ùra . Mar eisimpleir, an àite .hidden-sm-up, cleachd .d-sm-none. Chaidh na goireasan ath-ainmeachadh .hidden-printgus an sgeama ainmeachadh goireasan taisbeanaidh a chleachdadh. Barrachd fiosrachaidh fon roinn Goireasan Responsive air an duilleag seo.
    • Clasaichean air an cur ris airson flotaichean .float-{sm,md,lg,xl}-{left,right,none}freagairteach agus air an toirt air falbh .pull-leftagus .pull-rightleis gu bheil iad gun fheum .float-leftagus .float-right.
  • Seòrsa:
    • Chuir sinn atharrachaidhean freagairteach ris na clasaichean co-thaobhadh teacsa againn .text-{sm,md,lg,xl}-{left,center,right}.
  • Co-thaobhadh agus farsaingeachd:
    • Chaidh iomall freagairteach ùr agus goireasan pleadhaig a chuir ris airson gach taobh, a bharrachd air làmhan-goirid dìreach is còmhnard.
    • eallach bàta a bharrachd de ghoireasan flexbox .
    • Air tuiteam .center-blockairson an .mx-autoclas ùr.
  • Chaidh Clearfix ùrachadh gus taic airson dreachan brabhsair nas sine a leigeil seachad.

Measgachadh ro-leasachan reiceadair

Chaidh measgachadh ro-leasachan reiceadair Bootstrap 3 , a chaidh a mholadh ann an v3.2.0, a thoirt air falbh ann am Bootstrap 4. Leis gu bheil sinn a’ cleachdadh Autoprefixer , chan eil feum orra tuilleadh.

Thoir air falbh na measgachaidhean 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-transformtranslatetranslate3duser-select

Sgrìobhainnean

Fhuair na sgrìobhainnean againn ùrachadh san fharsaingeachd cuideachd. Seo an ìre ìosal:

  • Tha sinn fhathast a’ cleachdadh Jekyll, ach tha plugins againn sa mheasgachadh:
    • bugify.rbair a chleachdadh gus liosta èifeachdach a dhèanamh de na h-inntrigidhean air duilleag bugaichean a’ bhrobhsair againn.
    • example.rbna forc àbhaisteach den highlight.rbplugan bunaiteach, a’ ceadachadh làimhseachadh còd eisimpleir nas fhasa.
    • callout.rbna forc àbhaisteach coltach ris an sin, ach air a dhealbhadh airson ar fiosan sònraichte docaichean.
    • Tha jekyll-toc air a chleachdadh gus ar clàr-innse a ghineadh.
  • Chaidh a h-uile susbaint doc ath-sgrìobhadh ann am Markdown (an àite HTML) airson deasachadh nas fhasa.
  • Chaidh duilleagan ath-eagrachadh airson susbaint nas sìmplidhe agus rangachd nas fhasa bruidhinn riutha.
  • Ghluais sinn bho CSS àbhaisteach gu SCSS gus làn bhuannachd a ghabhail de chaochladairean Bootstrap, measgachadh, agus barrachd.

Goireasan freagairteach

Chaidh na @screen-caochladairean uile a thoirt air falbh ann an v4.0.0. Cleachd na measgachaidhean media-breakpoint-up(), media-breakpoint-down(), no media-breakpoint-only()Sass no am $grid-breakpointsmapa Sass nan àite.

Chaidh na clasaichean goireasach freagairteach againn a thoirt air falbh gu ìre mhòr airson displaygoireasan soilleir.

  • Chaidh na clasaichean .hiddenagus na clasaichean a thoirt air falbh a chionn 's gu robh iad an aghaidh modhan agus modhan .showjQuery . An àite sin, feuch ris a’ fheart a thogail no cleachd stoidhlichean in-loidhne mar agus .$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
  • Chaidh a h- uile .hidden-clas a thoirt air falbh, ach a-mhàin na goireasan clò-bhualaidh a chaidh ath-ainmeachadh.
    • Air a thoirt air falbh bho 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
    • Air a thoirt air falbh bho 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
  • Chan eil goireasan clò-bhualaidh a’ tòiseachadh le .hidden-no .visible-, ach le .d-print-.
    • Seann ainmean: .visible-print-block, .visible-print-inline, , .visible-print-inline-block,.hidden-print
    • Clasaichean ùra: .d-print-block, .d-print-inline, , .d-print-inline-block,.d-print-none

An àite a bhith a’ cleachdadh chlasaichean soilleir .visible-*, nì thu eileamaid ri fhaicinn le bhith dìreach gun a bhith ga fhalach aig meud an sgrion sin. Faodaidh tu aon chlas a chur còmhla .d-*-noneri aon .d-*-blockchlas gus eileamaid a shealltainn a-mhàin air eadar-ama sònraichte de mheudan sgrion (me .d-none.d-md-block.d-xl-nonea’ sealltainn an eileamaid a-mhàin air innealan meadhanach agus mòr).

Thoir an aire gu bheil na h-atharrachaidhean air na puingean-brisidh clèithe ann an v4 a’ ciallachadh gum feum thu a dhol aon bhriseadh nas motha gus na h-aon toraidhean a choileanadh. Cha bhith na clasaichean goireis freagairteach ùra a’ feuchainn ri gabhail ri cùisean nach eil cho cumanta far nach urrainnear faicsinneachd eileamaid a chuir an cèill mar aon raon de mheudan seallaidh a tha faisg air làimh; an àite sin feumaidh tu CSS àbhaisteach a chleachdadh ann an cùisean mar sin.