in English

Gbigbe lọ si v4

Bootstrap 4 jẹ atunkọ pataki ti gbogbo iṣẹ akanṣe naa. Awọn iyipada ti o ṣe akiyesi julọ ni a ṣoki ni isalẹ, atẹle nipasẹ awọn iyipada kan pato diẹ sii si awọn paati ti o yẹ.

Awọn iyipada iduroṣinṣin

Gbigbe lati Beta 3 si itusilẹ v4.x iduroṣinṣin wa, ko si awọn ayipada fifọ, ṣugbọn diẹ ninu awọn ayipada akiyesi wa.

Titẹ sita

  • Awọn ohun elo atẹjade fifọ ti o wa titi. Ni iṣaaju, lilo .d-print-*kilasi kan yoo bori eyikeyi .d-*kilasi lairotẹlẹ lairotẹlẹ. Bayi, wọn baramu awọn ohun elo ifihan miiran ati pe wọn kan media nikan ( @media print).

  • Awọn ohun elo ifihan titẹjade ti o wa lati ba awọn ohun elo miiran mu. Beta 3 ati agbalagba nikan ni block, inline-block, inline, ati none. Idurosinsin v4 kun flex, inline-flex, table, table-row, ati table-cell.

  • Atunwo awotẹlẹ titẹ ti o wa titi kọja awọn aṣawakiri pẹlu awọn ọna atẹjade tuntun ti o sọ pato @page size.

Beta 3 yipada

Lakoko ti Beta 2 rii pupọ julọ ti awọn iyipada fifọ wa lakoko ipele beta, ṣugbọn a tun ni diẹ ti o nilo lati koju ni itusilẹ Beta 3. Awọn ayipada wọnyi waye ti o ba n ṣe imudojuiwọn si Beta 3 lati Beta 2 tabi eyikeyi ẹya agbalagba ti Bootstrap.

Oriṣiriṣi

  • Yiyọ ajeku $thumbnail-transitiononiyipada. A ko ṣe iyipada ohunkohun, nitorinaa o jẹ koodu afikun nikan.
  • Npm package ko si pẹlu eyikeyi awọn faili miiran yatọ si orisun wa ati awọn faili disiki; ti o ba gbarale wọn ati pe o nṣiṣẹ awọn iwe afọwọkọ wa nipasẹ node_modulesfolda, o yẹ ki o mu iṣan-iṣẹ rẹ mu.

Awọn fọọmu

  • Tun awọn mejeeji aṣa ati awọn apoti ayẹwo aiyipada ati awọn redio ṣe. Bayi, awọn mejeeji ni eto HTML ti o baamu (ita <div>pẹlu arakunrin <input>ati <label>) ati awọn aṣa akọkọ kanna (aiyipada tolera, inline pẹlu kilasi modifier). Eyi n gba wa laaye lati ṣe ara aami ti o da lori ipo titẹ sii, ni irọrun atilẹyin fun disabledabuda naa (ti o nilo kilasi obi tẹlẹ) ati pe o dara julọ ni atilẹyin afọwọsi fọọmu wa.

    Gẹgẹbi apakan ti eyi, a ti yi CSS pada fun ṣiṣakoso ọpọlọpọ awọn background-images lori awọn apoti fọọmu aṣa ati awọn redio. Ni iṣaaju, nkan ti a yọ kuro ni bayi .custom-control-indicatorni awọ abẹlẹ, gradient, ati aami SVG. Ṣiṣesọdi isale isale tumọ si rọpo gbogbo awọn wọnyẹn ni gbogbo igba ti o nilo lati yi ọkan kan pada. Bayi, a ni .custom-control-label::beforefun awọn kun ati gradient ati ki o .custom-control-label::afterkapa aami.

    Lati ṣe ayẹwo laini aṣa, ṣafikun .custom-control-inline.

  • Aṣayan imudojuiwọn fun awọn ẹgbẹ bọtini ti o da lori titẹ sii. Dipo [data-toggle="buttons"] { }fun ara ati ihuwasi, a lo dataabuda kan fun awọn ihuwasi JS ati gbekele .btn-group-togglekilasi tuntun fun iselona.

  • Yọ kuro .col-form-legendni ojurere ti ilọsiwaju diẹ .col-form-label. Ni ọna yii .col-form-label-smati .col-form-label-lgpe o le ṣee lo lori <legend>awọn eroja pẹlu irọrun.

  • Awọn igbewọle faili aṣa gba iyipada si $custom-file-textoniyipada Sass wọn. Kii ṣe maapu Sass itẹ-ẹiyẹ mọ ati pe ni bayi n ṣe agbara okun kan nikan- Browsebọtini naa bi iyẹn ti jẹ ẹya afarape nikan ti ipilẹṣẹ lati Sass wa. Ọrọ Choose filebayi wa lati .custom-file-label.

Awọn ẹgbẹ igbewọle

  • Awọn afikun ẹgbẹ igbewọle jẹ pato si ipo wọn ni ibatan si titẹ sii. A ti sọ silẹ .input-group-addonati .input-group-btnfun awọn kilasi tuntun meji, .input-group-prependati .input-group-append. O gbọdọ lo append tabi prepend ni gbangba, ni irọrun pupọ ti CSS wa. Laarin ohun elo tabi ti o ti ṣetan, gbe awọn bọtini rẹ bi wọn ṣe le wa nibikibi miiran, ṣugbọn yi ọrọ sinu .input-group-text.

  • Awọn ara afọwọsi ni atilẹyin ni bayi, bii awọn igbewọle lọpọlọpọ (botilẹjẹpe o le fọwọsi igbewọle kan nikan fun ẹgbẹ kan).

  • Awọn kilasi iwọn gbọdọ wa lori obi .input-groupkii ṣe awọn eroja fọọmu kọọkan.

Beta 2 yipada

Lakoko ti o wa ni beta, a ṣe ifọkansi lati ni awọn ayipada fifọ. Sibẹsibẹ, awọn nkan ko nigbagbogbo lọ bi a ti pinnu. Ni isalẹ ni awọn iyipada fifọ lati jẹri ni lokan nigbati o ba nlọ lati Beta 1 si Beta 2.

Fifọ

  • Ayipada kuro $badge-colorati lilo rẹ lori .badge. A lo iṣẹ itansan awọ lati mu kan colorti o da lori background-color, nitorinaa oniyipada ko ṣe pataki.
  • Iṣẹ ti a tunrukọ grayscale()lati gray()yago fun ija ija pẹlu grayscaleàlẹmọ abinibi CSS.
  • Tunrukọ .table-inverse, .thead-inverse, ati .thead-defaultsi .*-darkati .*-light, ti o baamu awọn ero awọ wa ti a lo ni ibomiiran.
  • Awọn tabili idahun ni bayi ṣe agbekalẹ awọn kilasi fun aaye fifọ akoj kọọkan. Eyi yapa lati Beta 1 ni pe ohun ti .table-responsiveo ti nlo jẹ diẹ sii bi .table-responsive-md. O le lo .table-responsivetabi .table-responsive-{sm,md,lg,xl}bi o ṣe nilo.
  • Atilẹyin Bower silẹ bi oluṣakoso package ti ti sọkuro fun awọn omiiran (fun apẹẹrẹ, Yarn tabi npm). Wo bower/bower#2298 fun awọn alaye.
  • Bootstrap tun nilo jQuery 1.9.1 tabi ga julọ, ṣugbọn o gba ọ niyanju lati lo ẹya 3.x niwon awọn aṣawakiri atilẹyin v3.x jẹ eyiti Bootstrap ṣe atilẹyin pẹlu v3.x ni diẹ ninu awọn atunṣe aabo.
  • Yọ awọn ajeku .form-control-labelkilasi. Ti o ba lo kilasi yii, o jẹ ẹda-ẹda ti .col-form-labelkilasi ti o dojukọ ni inaro <label>pẹlu titẹ sii ti o ni nkan ṣe ni awọn ipilẹ fọọmu petele.
  • Yipada color-yiqlati apopọ ti o pẹlu ohun- colorini si iṣẹ ti o da iye pada, gbigba ọ laaye lati lo fun ohun-ini CSS eyikeyi. Fun apẹẹrẹ, dipo color-yiq(#000), o yoo kọ color: color-yiq(#000);.

Awọn ifojusi

  • Agbekale titun pointer-eventslilo lori modals. Lode .modal-dialogkoja nipasẹ awọn iṣẹlẹ pẹlu pointer-events: nonefun aṣa tẹ mu (mu awọn ti o ṣee ṣe lati kan gbọ lori awọn .modal-backdropfun eyikeyi jinna), ati ki o si counteracts o fun awọn gangan .modal-contentpẹlu pointer-events: auto.

Lakotan

Eyi ni awọn ohun tikẹti nla ti iwọ yoo fẹ lati mọ nigba gbigbe lati v3 si v4.

Atilẹyin aṣawakiri

  • Ju silẹ IE8, IE9, ati iOS 6 support. v4 jẹ IE10+ nikan ati iOS 7+. Fun awọn aaye ti o nilo boya ninu wọn, lo v3.
  • Ṣe afikun atilẹyin osise fun Android v5.0 Lollipop's Browser ati WebView. Awọn ẹya iṣaaju ti Android Browser ati WebView wa ni atilẹyin laigba aṣẹ nikan.

Awọn iyipada agbaye

  • Flexbox ti ṣiṣẹ nipasẹ aiyipada. Ni gbogbogbo eyi tumọ si gbigbe kuro lati awọn lilefoofo ati diẹ sii kọja awọn paati wa.
  • Yipada lati Kere si Sass fun awọn faili CSS orisun wa.
  • Yipada lati pxsi rembi ẹyọ CSS akọkọ wa, botilẹjẹpe awọn piksẹli ṣi lo fun awọn ibeere media ati ihuwasi grid bi awọn iwoye ẹrọ ko ni fowo nipasẹ iwọn iru.
  • Iwọn font agbaye pọ si lati 14pxsi 16px.
  • Awọn ipele akoj ti a tunṣe lati ṣafikun aṣayan karun kan (sisọ awọn ẹrọ kekere ni 576pxati isalẹ) ati yọ -xsinfix kuro ni awọn kilasi wọnyẹn. Apeere .col-6.col-sm-4.col-md-3:.
  • Rọpo akori iyan lọtọ pẹlu awọn aṣayan atunto nipasẹ awọn oniyipada SCSS (fun apẹẹrẹ, $enable-gradients: true).
  • Kọ eto overhauled lati lo kan lẹsẹsẹ ti npm iwe afọwọkọ dipo ti Grunt. Wo package.jsonfun gbogbo awọn iwe afọwọkọ, tabi iwe kika iṣẹ akanṣe wa fun awọn iwulo idagbasoke agbegbe.
  • Lilo Bootstrap ti kii ṣe idahun ko ṣe atilẹyin mọ.
  • Ju silẹ Onibara ori ayelujara ni ojurere ti iwe iṣeto ti o gbooro sii ati awọn ile adani.
  • Ṣafikun awọn dosinni ti awọn kilasi iwulo tuntun fun awọn orisii iye ohun-ini CSS ti o wọpọ ati awọn ọna abuja ala/padding aye.

Eto akoj

  • Ti gbe lọ si flexbox.
    • Atilẹyin ti a ṣafikun fun flexbox ninu awọn akojọpọ akoj ati awọn kilasi asọye.
    • Gẹgẹbi apakan ti flexbox, atilẹyin pẹlu inaro ati awọn kilasi titete petele.
  • Awọn orukọ kilasi akoj imudojuiwọn ati ipele akoj tuntun kan.
    • Ṣe afikun smipele akoj tuntun ni isalẹ 768pxfun iṣakoso granular diẹ sii. A ni bayi xs, sm, md, lg, ati xl. Eyi tun tumọ si pe gbogbo ipele ti kọlu ipele kan (bẹẹ .col-md-6ninu v3 wa bayi .col-lg-6ni v4).
    • xsAwọn kilasi akoj ti yipada lati ko nilo infix lati ṣojuuṣe deede diẹ sii pe wọn bẹrẹ lilo awọn aza ni min-width: 0kii ṣe iye ẹbun ti o ṣeto. Dipo .col-xs-6, o jẹ bayi .col-6. Gbogbo awọn ipele akoj miiran nilo infix (fun apẹẹrẹ, sm).
  • Awọn iwọn akoj ti a ṣe imudojuiwọn, awọn alapọpọ, ati awọn oniyipada.
    • Awọn gutters Grid ni bayi ni maapu Sass kan ki o le pato awọn iwọn gota kan pato ni aaye fifọ kọọkan.
    • Awọn apopọ akoj imudojuiwọn lati lo make-col-readyadapọ igbaradi ati kan make-collati ṣeto flexati max-widthfun iwọn ọwọn kọọkan.
    • Yi pada eto akoj media ibeere breakpoints ati awọn iwọn eiyan lati akoto fun titun akoj ipele ati rii daju awọn ọwọn wa ni boṣeyẹ pin nipa 12ni won max iwọn.
    • Awọn aaye fifọ grid ati awọn iwọn eiyan ni a mu ni bayi nipasẹ awọn maapu Sass ( $grid-breakpointsati $container-max-widths) dipo iwonba awọn oniyipada lọtọ. Iwọnyi rọpo awọn @screen-*oniyipada patapata ati gba ọ laaye lati ṣe akanṣe awọn ipele akoj ni kikun.
    • Awọn ibeere media tun ti yipada. Dipo ti atunwi awọn ikede ibeere media wa pẹlu iye kanna ni igba kọọkan, a ni bayi @include media-breakpoint-up/down/only. Bayi, dipo kikọ @media (min-width: @screen-sm-min) { ... }, o le kọ @include media-breakpoint-up(sm) { ... }.

Awọn eroja

  • Awọn panẹli ti a sọ silẹ, awọn eekanna atanpako, ati awọn kanga fun paati gbogbo-gbogbo tuntun, awọn kaadi .
  • Silẹ fonti aami Glyphicons. Ti o ba nilo awọn aami, diẹ ninu awọn aṣayan ni:
  • Fi ohun itanna jQuery silẹ Affix.
  • Silẹ paati pager bi o ti jẹ pataki die-die ti adani awọn bọtini.
  • Atunse fere gbogbo awọn paati lati lo diẹ sii awọn yiyan kilasi ti ko ni itẹ-ẹiyẹ dipo awọn yiyan awọn ọmọde pato lori-pato.

Nipa paati

Atokọ yii ṣe afihan awọn iyipada bọtini nipasẹ paati laarin v3.xx ati v4.0.0.

Atunbere

Tuntun si Bootstrap 4 ni Atunbere , iwe aṣa tuntun ti o kọ lori Normalize pẹlu awọn aza atunto ero tiwa. Awọn yiyan ti o han ninu faili yii nikan lo awọn eroja — ko si awọn kilasi nibi. Eyi ya sọtọ awọn aṣa atunto wa lati awọn ara paati wa fun ọna apọjuwọn diẹ sii. Diẹ ninu awọn atunto pataki julọ eyi pẹlu ni box-sizing: border-boxiyipada, gbigbe lati emsi remawọn ẹya lori ọpọlọpọ awọn eroja, awọn ọna ọna asopọ, ati ọpọlọpọ awọn atunto eroja fọọmu.

Iwe kikọ

  • Ti gbe gbogbo awọn .text-ohun elo si _utilities.scssfaili naa.
  • Silẹ .page-headerbi awọn ara rẹ le ṣee lo nipasẹ awọn ohun elo.
  • .dl-horizontalti lọ silẹ. Dipo, lo .rowlori <dl>ati lo awọn kilasi iwe akoj (tabi mixins) lori rẹ <dt>ati <dd>awọn ọmọde.
  • Atunse blockquotes, gbigbe awọn aza wọn lati <blockquote>ano si kan nikan kilasi .blockquote,. Ju .blockquote-reversemodifier silẹ fun awọn ohun elo ọrọ.
  • .list-inlinebayi nbeere wipe awọn oniwe-omo akojọ awọn ohun kan ti titun .list-inline-itemkilasi loo si wọn.

Awọn aworan

  • Fun lorukọmii .img-responsivesi .img-fluid.
  • Fun lorukọmii .img-roundedsi.rounded
  • Fun lorukọmii .img-circlesi.rounded-circle

Awọn tabili

  • O fẹrẹ to gbogbo awọn iṣẹlẹ ti >yiyan ti yọkuro, afipamo pe awọn tabili itẹ-ẹiyẹ yoo jogun awọn aṣa laifọwọyi lati ọdọ awọn obi wọn. Eyi jẹ ki awọn yiyan wa rọrun pupọ ati awọn isọdi ti o pọju.
  • Ti lorukọmii .table-condensedsi .table-smfun aitasera.
  • Ti ṣafikun aṣayan tuntun .table-inversekan.
  • Fi kun tabili akọsori modifiers: .thead-defaultati .thead-inverse.
  • Ti lorukọmii awọn kilasi ọrọ-ọrọ lati ni- .table-iṣaaju kan. Nitorinaa .active, .success, .warning, .dangerati .infosi .table-active, .table-success, .table-warning, .table-dangerati .table-info.

Awọn fọọmu

  • Atunto eroja ti a gbe lọ si _reboot.scssfaili naa.
  • Fun lorukọmii .control-labelsi .col-form-label.
  • Fun lorukọmii .input-lgati .input-smsi .form-control-lgati .form-control-sm, lẹsẹsẹ.
  • Silẹ .form-group-*awọn kilasi fun ayedero ká nitori. Lo .form-control-*awọn kilasi dipo bayi.
  • Ju silẹ .help-blockati rọpo rẹ pẹlu .form-textfun ọrọ iranlọwọ ipele-idina. Fun ọrọ iranlọwọ inline ati awọn aṣayan rọ miiran, lo awọn kilasi iwulo bii .text-muted.
  • Silẹ .radio-inlineati .checkbox-inline.
  • Consolidated .checkboxati .radiosinu .form-checkati awọn orisirisi .form-check-*kilasi.
  • Awọn fọọmu petele ti ṣe atunṣe:
    • Silẹ .form-horizontalibeere kilasi.
    • .form-groupko tun kan awọn aza lati inu .rowmixin, nitorinaa .rowo nilo bayi fun awọn ipilẹ akoj petele (fun apẹẹrẹ, <div class="form-group row">).
    • Ti ṣafikun kilasi tuntun .col-form-labelsi awọn aami aarin inaro pẹlu .form-controls.
    • Ṣafikun tuntun .form-rowfun awọn ipilẹ fọọmu iwapọ pẹlu awọn kilasi akoj (ṣe iyipada rẹ .rowfun kan .form-rowki o lọ).
  • Ṣe afikun atilẹyin awọn fọọmu aṣa (fun awọn apoti ayẹwo, awọn redio, yiyan, ati awọn igbewọle faili).
  • Rọpo .has-error, .has-warning, ati .has-successawọn kilasi pẹlu HTML5 fọọmu afọwọsi nipasẹ CSS's :invalidati :validpseudo-classes.
  • Fun lorukọmii .form-control-staticsi .form-control-plaintext.

Awọn bọtini

  • Fun lorukọmii .btn-defaultsi .btn-secondary.
  • Ju .btn-xskilaasi naa silẹ patapata bi o .btn-smti jẹ pe o kere pupọ ju v3's.
  • Ẹya bọtini ipo ti button.jsohun itanna jQuery ti lọ silẹ. Eyi pẹlu awọn $().button(string)ati awọn $().button('reset')ọna. A ni imọran lilo iwọn kekere ti JavaScript aṣa dipo, eyiti yoo ni anfani ti ihuwasi ni deede ni ọna ti o fẹ.
    • Ṣe akiyesi pe awọn ẹya miiran ti ohun itanna (awọn apoti apoti bọtini, awọn redio bọtini, awọn bọtini toggle ẹyọkan) ti ni idaduro ni v4.
  • Yi awọn bọtini pada' [disabled]si :disabledbi IE9+ ṣe atilẹyin :disabled. Sibẹsibẹ fieldset[disabled]o tun jẹ dandan nitori awọn aaye alaabo abinibi tun jẹ buggy ni IE11 .

Ẹgbẹ bọtini

  • Atunse paati pẹlu flexbox.
  • Yọ kuro .btn-group-justified. Bi aropo o le lo <div class="btn-group d-flex" role="group"></div>bi ipari ni ayika awọn eroja pẹlu .w-100.
  • Silẹ awọn .btn-group-xskilasi patapata fi fun yiyọ kuro ti .btn-xs.
  • Yiyọ aye ti ko boju mu laarin awọn ẹgbẹ bọtini ni awọn bọtini irinṣẹ bọtini; lo awọn ohun elo ala ni bayi.
  • Ilọsiwaju iwe fun lilo pẹlu awọn paati miiran.
  • Yipada lati obi selectors to nikan kilasi fun gbogbo irinše, modifiers, ati be be lo.
  • Awọn ara sisọ silẹ ni irọrun lati ma gbe ọkọ oju omi pẹlu awọn ọfa ti nkọju si oke tabi isalẹ ti a so mọ akojọ aṣayan silẹ.
  • Dropdowns le ti wa ni itumọ ti pẹlu <div>s tabi <ul>s bayi.
  • Tun awọn ara sisọ silẹ ati isamisi lati pese irọrun, atilẹyin ti a ṣe sinu <a>ati <button>awọn nkan isọsilẹ orisun.
  • Fun lorukọmii .dividersi .dropdown-divider.
  • Awọn nkan sisọ silẹ ni bayi nilo .dropdown-item.
  • Awọn toggles sisọ silẹ ko nilo ohun ti o fojuhan mọ <span class="caret"></span>; Eyi ti pese ni aifọwọyi nipasẹ CSS's ::afterlori .dropdown-toggle.

Eto akoj

  • 576pxTi ṣafikun aaye fifọ akoj tuntun bi sm, afipamo pe awọn ipele lapapọ lapapọ marun wa ( xs, sm, md, lg, ati xl).
  • Fun lorukọ mii awọn kilasi oniyipada akoj idahun lati .col-{breakpoint}-{modifier}-{size}si .{modifier}-{breakpoint}-{size}fun awọn kilasi akoj ti o rọrun.
  • Titari silẹ ati fa awọn kilasi modifier fun awọn orderkilasi agbara-flexbox tuntun. Fun apẹẹrẹ, dipo .col-8.push-4ati .col-4.pull-8, iwọ yoo lo .col-8.order-2ati .col-4.order-1.
  • Awọn kilasi IwUlO flexbox fun eto akoj ati awọn paati.

Akojọ awọn ẹgbẹ

  • Atunse paati pẹlu flexbox.
  • Rọpo a.list-group-itempẹlu kilasi ti o fojuhan,, .list-group-item-actionfun ọna asopọ iselona ati awọn ẹya bọtini ti awọn ohun ẹgbẹ atokọ.
  • Fi kun .list-group-flushkilasi fun lilo pẹlu awọn kaadi.
  • Atunse paati pẹlu flexbox.
  • Fi fun gbigbe si apoti flexbox, titete awọn aami ifasilẹ ninu akọsori o ṣeeṣe ki o fọ nitori a ko lo awọn leefofo mọ. Akoonu leefofo wa ni akọkọ, ṣugbọn pẹlu flexbox ti kii ṣe ọran naa mọ. Ṣe imudojuiwọn awọn aami ifasilẹ rẹ lati wa lẹhin awọn akọle modal lati ṣatunṣe.
  • Aṣayan naa remote(eyiti o le ṣee lo lati fifuye laifọwọyi ati itasi akoonu ita sinu modal) ati loaded.bs.modaliṣẹlẹ ti o baamu ti yọkuro. A ṣeduro dipo lilo iṣapẹẹrẹ ẹgbẹ-ibara tabi ilana abuda data, tabi pipe jQuery.load funrararẹ.
  • Atunse paati pẹlu flexbox.
  • Ju silẹ fere gbogbo awọn >yiyan fun iselona ti o rọrun nipasẹ awọn kilasi ti ko ni itẹ-ẹiyẹ.
  • Dipo awọn yiyan HTML-pato bi .nav > li > a, a lo awọn kilasi lọtọ fun .navs, .nav-items, ati .nav-links. Eyi jẹ ki HTML rẹ rọ diẹ sii lakoko ti o n mu imudara pọsi pọ si.

Navbar naa ti jẹ atunko patapata ni flexbox pẹlu atilẹyin ilọsiwaju fun titete, idahun, ati isọdi.

  • Awọn ihuwasi navbar idahun ti wa ni lilo bayi si .navbarkilasi nipasẹ ohun ti o nilo .navbar-expand-{breakpoint} nibiti o ti yan ibiti o ti lu navbar naa. Ni iṣaaju eyi jẹ iyipada iyipada Kere ati ṣiṣatunṣe ti o nilo.
  • .navbar-defaultjẹ bayi .navbar-light, botilẹjẹpe .navbar-darko wa kanna. Ọkan ninu awọn wọnyi ti wa ni ti beere lori kọọkan navbar. Sibẹsibẹ, awọn kilasi wọnyi ko ṣeto background-colors mọ; dipo wọn pataki ni ipa nikan color.
  • Navbars bayi nilo ikede isale ti iru kan. Yan lati awọn ohun elo abẹlẹ wa ( .bg-*) tabi ṣeto tirẹ pẹlu ina/awọn kilasi onidakeji loke fun isọdi isinwin .
  • Fi fun awọn aza flexbox, navbars le lo awọn ohun elo flexbox fun awọn aṣayan titete irọrun.
  • .navbar-toggleni bayi .navbar-togglerati ki o ni orisirisi awọn aza ati akojọpọ siṣamisi (ko si siwaju sii mẹta <span>s).
  • Silẹ awọn .navbar-formkilasi šee igbọkanle. Ko si ohun to wulo; dipo, o kan lo .form-inlineati lo awọn ohun elo ala bi o ṣe pataki.
  • Navbars ko si mọ margin-bottomtabi border-radiusnipa aiyipada. Lo awọn ohun elo bi o ṣe pataki.
  • Gbogbo awọn apẹẹrẹ ti o nfi navbars ti ni imudojuiwọn lati pẹlu isamisi tuntun.

Oju-iwe

  • Atunse paati pẹlu flexbox.
  • Awọn kilasi ti o han gbangba ( .page-item, .page-link) ni a nilo ni bayi lori awọn ọmọ ti .paginations
  • Ju .pagerpaati naa silẹ patapata bi o ti jẹ diẹ diẹ sii ju awọn bọtini ila ti a ṣe adani.
  • Kilasi ti o fojuhan, .breadcrumb-item, ni bayi nilo lori awọn ọmọ ti .breadcrumbs

Awọn aami ati awọn baaji

  • Iṣọkan .labelati .badgelati yọkuro kuro ninu <label>eroja ati rọrun awọn paati ti o jọmọ.
  • Fi kun .badge-pillbi modifier fun ti yika “ògùn” wo.
  • Awọn baagi ko tun leefofo loju omi laifọwọyi ni awọn ẹgbẹ atokọ ati awọn paati miiran. Awọn kilasi IwUlO nilo bayi fun iyẹn.
  • .badge-defaultti a ti lọ silẹ ati ki o .badge-secondaryfi kun si baramu paati modifier kilasi lo ibomiiran.

Awọn panẹli, eekanna atanpako, ati awọn kanga

Silẹ patapata fun titun kaadi paati.

Awọn panẹli

  • .panelto .card, bayi itumọ ti pẹlu flexbox.
  • .panel-defaultkuro ko si si aropo.
  • .panel-groupkuro ko si si aropo. .card-groupkii ṣe iyipada, o yatọ.
  • .panel-headingsi.card-header
  • .panel-titlelati .card-title. Da lori oju ti o fẹ, o tun le fẹ lo awọn eroja akọle tabi awọn kilasi (fun apẹẹrẹ <h3>, .h3) tabi awọn eroja igboya tabi awọn kilasi (fun apẹẹrẹ <strong>, <b>, .font-weight-bold). Ṣe akiyesi pe .card-title, lakoko ti a darukọ bakanna, ṣe agbejade irisi ti o yatọ ju .panel-title.
  • .panel-bodysi.card-body
  • .panel-footersi.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, ati .panel-dangerpe a ti sọ silẹ fun .bg-, .text-, ati .borderawọn ohun elo ti a ṣe lati inu $theme-colorsmaapu Sass wa.

Ilọsiwaju

  • Rọpo awọn .progress-bar-*kilasi ọrọ-ọrọ pẹlu .bg-*awọn ohun elo. Fun apẹẹrẹ, class="progress-bar progress-bar-danger"di class="progress-bar bg-danger".
  • Rọpo .activefun awọn ifi ilọsiwaju ere idaraya pẹlu .progress-bar-animated.
  • Ti ṣe atunṣe gbogbo paati lati ṣe irọrun apẹrẹ ati iselona. A ni awọn aza ti o dinku fun ọ lati yiparẹ, awọn olufihan tuntun, ati awọn aami tuntun.
  • Gbogbo CSS ko ni itẹ-ẹiyẹ ati fun lorukọmii, ni idaniloju pe kilaasi kọọkan jẹ asọtẹlẹ pẹlu .carousel-.
    • Fun awọn nkan carousel, .next, .prev, .left, ati .rightpe o wa ni bayi .carousel-item-next, .carousel-item-prev, .carousel-item-left, ati .carousel-item-right.
    • .itemtun wa ni bayi .carousel-item.
    • Fun awọn iṣakoso iṣaaju / atẹle, .carousel-control.rightati .carousel-control.leftpe o wa ni bayi .carousel-control-nextati .carousel-control-prev, afipamo pe wọn ko nilo kilasi ipilẹ kan pato.
  • Yọ gbogbo iselona idahun kuro, da duro si awọn ohun elo (fun apẹẹrẹ, fifi awọn akọle han lori awọn ibudo wiwo kan) ati awọn aza aṣa bi o ṣe nilo.
  • Aworan ti a yọ kuro fun awọn aworan ni awọn ohun carousel, ti o da duro si awọn ohun elo.
  • Tweaked apẹẹrẹ Carousel lati pẹlu isamisi tuntun ati awọn aza.

Awọn tabili

  • Atilẹyin ti a yọ kuro fun awọn tabili itẹle ti aṣa. Gbogbo awọn aza tabili ti jogun bayi ni v4 fun awọn yiyan ti o rọrun.
  • Fi kun onidakeji tabili iyatọ.

Awọn ohun elo

  • Ṣe afihan, pamọ, ati diẹ sii:
    • Ṣe awọn ohun elo ifihan ni idahun (fun apẹẹrẹ, .d-noneati d-{sm,md,lg,xl}-none).
    • Ju ọpọlọpọ awọn .hidden-*ohun elo fun awọn ohun elo ifihan tuntun . Fun apẹẹrẹ, dipo .hidden-sm-up, lo .d-sm-none. Tunrukọ awọn .hidden-printohun elo naa lati lo ero isọdi ohun elo ifihan. Alaye diẹ sii labẹ apakan Awọn ohun elo Idahun ti oju-iwe yii.
    • Awọn .float-{sm,md,lg,xl}-{left,right,none}kilasi ti a ṣafikun fun awọn leefofo oju omi ti o ṣe idahun ati yọkuro .pull-leftati .pull-rightniwọn igba ti wọn ṣe laiṣe si .float-leftati .float-right.
  • Iru:
    • Ṣafikun awọn iyatọ idahun si awọn kilasi titete ọrọ wa .text-{sm,md,lg,xl}-{left,center,right}.
  • Iṣatunṣe ati aaye:
  • Clearfix ṣe imudojuiwọn lati ju atilẹyin silẹ fun awọn ẹya aṣawakiri agbalagba.

Olutaja ìpele mixins

Bootstrap 3's prefix prefix mixins, eyiti a ti parẹ ni v3.2.0, ti yọkuro ni Bootstrap 4. Niwọn igba ti a lo Autoprefixer , wọn ko ṣe pataki mọ.

Yọ awọn akojọpọ wọnyi kuro animation: _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-timing-functionbackface-visibilitybox-sizingcontent-columnshyphensopacityperspectiveperspective-originrotaterotateXrotateYscalescaleXscaleYskewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Awọn iwe aṣẹ

Awọn iwe-ipamọ wa gba igbesoke kọja igbimọ naa daradara. Eyi ni isalẹ isalẹ:

  • A tun nlo Jekyll, ṣugbọn a ni awọn afikun ninu apopọ:
    • bugify.rbni a lo lati ṣe atokọ daradara awọn titẹ sii lori oju-iwe awọn aṣiṣe aṣawakiri wa .
    • example.rbjẹ orita aṣa ti highlight.rbohun itanna aiyipada, gbigba fun mimu apẹẹrẹ-koodu rọrun.
    • callout.rbjẹ orita aṣa ti o jọra ti iyẹn, ṣugbọn apẹrẹ fun awọn ipe awọn docs pataki wa.
    • jekyll-toc ni a lo lati ṣe agbekalẹ tabili awọn akoonu wa.
  • Gbogbo akoonu docs ni a ti tun kọ ni Markdown (dipo HTML) fun ṣiṣatunṣe rọrun.
  • Awọn oju-iwe ti jẹ atunto fun akoonu ti o rọrun ati ilana ilana isunmọ diẹ sii.
  • A gbe lati CSS deede si SCSS lati lo anfani ni kikun ti awọn oniyipada Bootstrap, mixins, ati diẹ sii.

Awọn ohun elo idahun

Gbogbo @screen-awọn oniyipada ti yọkuro ni v4.0.0. Lo media-breakpoint-up(), media-breakpoint-down(), tabi media-breakpoint-only()Sass mixins tabi $grid-breakpointsmaapu Sass dipo.

Awọn kilasi IwUlO idahun ti yọkuro lọpọlọpọ ni ojurere ti awọn displayohun elo ti o fojuhan.

  • Awọn kilasi .hiddenati .showawọn kilasi ti yọkuro nitori pe wọn tako pẹlu awọn $(...).hide()ọna jQuery $(...).show(). Dipo, gbiyanju lati yi abuda naa pada [hidden]tabi lo awọn aza inline bii style="display: none;"ati style="display: block;".
  • Gbogbo .hidden-awọn kilasi ti yọkuro, fipamọ fun awọn ohun elo titẹjade eyiti o ti fun lorukọmii.
    • Yiyọ kuro lati 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
    • Yiyọ kuro ni 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
  • Awọn ohun elo titẹjade ko bẹrẹ pẹlu .hidden-tabi .visible-, ṣugbọn pẹlu .d-print-.
    • Awọn orukọ atijọ : .visible-print-block, .visible-print-inline,.visible-print-inline-block.hidden-print
    • Awọn kilasi titun : .d-print-block, .d-print-inline,.d-print-inline-block.d-print-none

Dipo lilo awọn .visible-*kilasi ti o fojuhan, o jẹ ki ohun kan han nipa fifipamọ nirọrun ni iwọn iboju yẹn. O le ṣajọpọ .d-*-nonekilasi kan pẹlu .d-*-blockkilasi kan lati ṣafihan ipin kan nikan lori aarin aarin ti awọn iwọn iboju (fun apẹẹrẹ .d-none.d-md-block.d-xl-nonefihan ipin nikan lori awọn ẹrọ alabọde ati nla).

Ṣe akiyesi pe awọn iyipada si awọn aaye fifọ akoj ni v4 tumọ si pe iwọ yoo nilo lati lọ si aaye fifọ kan ti o tobi julọ lati ṣaṣeyọri awọn abajade kanna. Awọn kilasi ohun elo idahun tuntun ko gbiyanju lati gba awọn ọran ti ko wọpọ nibiti hihan eroja ko le ṣe afihan bi iwọn ilawọn kan ti awọn titobi wiwo; o yoo dipo nilo lati lo aṣa CSS ni iru awọn igba miran.