Source

Kwimukira kuri v4

Bootstrap 4 niyandikwa rikuru ryumushinga wose. Impinduka zigaragara cyane zavunaguye hepfo, hakurikiraho impinduka zihariye kubice bijyanye.

Impinduka zihamye

Kwimuka uva muri Beta 3 ukajya kurekura v4.0 ihamye, ntamahinduka ahinduka, ariko hariho impinduka zigaragara.

Gucapa

  • Ibikoresho byavunitse byacapwe. Mbere, gukoresha .d-print-*ishuri byateganijwe gutungurana ikindi .d-*cyiciro. Noneho, bahuza nibindi bikoresho byerekana kandi bagakoresha gusa ibyo bitangazamakuru ( @media print).

  • Kwaguka kuboneka byanditse byerekana ibikoresho bihuye nibindi bikorwa. Beta 3 n'abayirengeje gusa bafite block,,, inline-blockna inline. noneV4 ihamye yongeyeho flex,,, inline-flexna table.table-rowtable-cell

  • Icapiro ryibanze ryerekana neza kuri mushakisha hamwe nuburyo bushya bwo gucapa bugaragaza @page size.

Impinduka ya Beta 3

Mugihe Beta 2 yabonye igice kinini cyimpinduka zacu mugihe cyicyiciro cya beta, ariko turacyafite bike bigomba gukemurwa mubisohoka Beta 3. Izi mpinduka zikurikizwa niba urimo kuvugurura Beta 3 kuva Beta 2 cyangwa verisiyo ishaje ya Bootstrap.

Dutandukanye

  • Yakuyeho $thumbnail-transitionimpinduka idakoreshwa. Ntacyo twahinduye, kubwibyo byari code yinyongera.
  • Porogaramu ya npm ntikirimo dosiye iyindi itari isoko yacu na dosiye ya kure; niba warayishingikirije kandi ukoresha inyandiko zacu ukoresheje node_modulesububiko, ugomba guhuza ibikorwa byawe.

Ifishi

  • Ongera wandike agasanduku gasanzwe kandi gasanzwe gasanduku na radio. Noneho, byombi bifite imiterere ya HTML (hanze <div>hamwe na barumuna <input>na <label>) hamwe nuburyo bumwe bwo gutondekanya (gutondekanya bisanzwe, kumurongo hamwe nicyiciro cyo guhindura). Ibi biradufasha gutunganya ikirango gishingiye kumiterere yinjiza, koroshya inkunga disabledkubiranga (mbere bisaba icyiciro cyababyeyi) no gushyigikira neza ifishi yacu yo kwemeza.

    Nkigice cyibi, twahinduye CSS yo gucunga background-images nyinshi kumpapuro zabigenewe kugenzura no kumaradiyo. Mbere, ibyakuweho ubu .custom-control-indicatorbyari bifite ibara ryinyuma, icyiciro, na shusho ya SVG. Guhindura icyiciro cya gradient bivuze gusimbuza ibyo byose igihe cyose ukeneye guhindura imwe gusa. Noneho, dufite .custom-control-label::beforeibyuzuye na gradient kandi dukora .custom-control-label::afterigishushanyo.

    Kugirango ukore igenzura ryihariye, ongeraho .custom-control-inline.

  • Ivugurura ryatoranijwe ryinjiza-rishingiye kuri buto yitsinda. Aho [data-toggle="buttons"] { }kugirango imiterere nimyitwarire, dukoresha dataikiranga kumyitwarire ya JS gusa kandi twishingikiriza kumurongo mushya .btn-group-togglewo kwishushanya.

  • Yakuweho .col-form-legendkugirango ashyigikire gato .col-form-label. Ubu buryo .col-form-label-smkandi .col-form-label-lgburashobora gukoreshwa kubintu <legend>byoroshye.

  • Customer dosiye yinjiza yakiriye impinduka kuri $custom-file-textSass variable. Ntabwo ikiri ikarita ya Sass yubatswe kandi ubu iha imbaraga umugozi umwe- Browsebuto nkuko aribwo noneho pseudo-element yonyine ikomoka kuri Sass yacu. Inyandiko Choose fileubu iva kuri .custom-file-label.

Amatsinda yinjiza

  • Iyinjiza ryitsinda ryinyongera ubu ryihariye kubyo bashyize ugereranije ninjiza. Twataye .input-group-addonkandi kumasomo .input-group-btnabiri mashya, .input-group-prependkandi .input-group-append. Ugomba gukoresha neza umugereka cyangwa prepend ubungubu, koroshya byinshi CSS yacu. Mugereka cyangwa kwitegura, shyira buto yawe nkuko zaba ziri ahandi, ariko uzingire inyandiko .input-group-text.

  • Imiterere yo kwemeza ubu irashyigikiwe, kimwe ninyongeramusaruro nyinshi (nubwo ushobora kwemeza gusa icyinjijwe kuri buri tsinda).

  • Kuringaniza ibyiciro bigomba kuba kubabyeyi .input-groupntabwo ari ibintu bigize imiterere.

Beta 2 ihinduka

Mugihe muri beta, tugamije kutagira impinduka zica. Ariko, ibintu ntabwo buri gihe bigenda nkuko byateganijwe. Hano haribintu byahindutse kugirango uzirikane mugihe wimutse uva Beta 1 ujya Beta 2.

Kumena

  • Yakuweho $badge-colorimpinduka nikoreshwa ryayo kuri .badge. Dukoresha ibara ritandukanya imikorere kugirango duhitemo colordushingiye kuri background-color, bityo impinduka ntabwo ari ngombwa.
  • grayscale()Imikorere yahinduwe gray()kugirango wirinde guca amakimbirane na CSS kavukire grayscale.
  • Yahinduwe .table-inverse, .thead-inversena, na .thead-default,, guhuza ibara ryamabara yakoreshejwe ahandi..*-dark.*-light
  • Imbonerahamwe isubiza noneho itanga amasomo kuri buri grid break point. Ibi biva kuri Beta 1 muburyo .table-responsivewakoresheje birasa .table-responsive-md. Urashobora noneho gukoresha .table-responsivecyangwa .table-responsive-{sm,md,lg,xl}nkuko bikenewe.
  • Inkunga ya Bower inkunga nkumuyobozi wa pake yataye agaciro kubindi bisobanuro (urugero, Yarn cyangwa npm). Reba bower / bower # 2298 kugirango ubone ibisobanuro.
  • Bootstrap iracyasaba jQuery 1.9.1 cyangwa irenga, ariko urasabwa gukoresha verisiyo 3.x kuva mushakisha zishyigikiwe na v3.x nizo Bootstrap ishyigikira wongeyeho v3.x ifite umutekano muke.
  • Yakuyeho icyiciro kidakoreshwa .form-control-label. Niba warakoresheje iri somo, ryari ryigana .col-form-labelryishuri ryerekejeje a <label>hamwe ninjiza ijyanye nuburyo butambitse.
  • Yahinduye color-yiqkuva muri mixin yarimo colorumutungo kumurimo usubiza agaciro, ukwemerera kuyikoresha kumitungo iyo ari yo yose ya CSS. Kurugero, aho color-yiq(#000), wandika color: color-yiq(#000);.

Ingingo z'ingenzi

  • pointer-eventsYerekanye imikoreshereze mishya kuri modal. Inyuma .modal-dialoginyura mubyabaye hamwe pointer-events: noneno gukanda kugikora (bituma bishoboka gutega amatwi gusa kuri .modal-backdropkanda iyo ari yo yose), hanyuma ukayirwanya kubyukuri .modal-contenthamwe na pointer-events: auto.

Incamake

Dore ibintu binini byamatike uzashaka kumenya mugihe wimutse uva kuri v3 ujya kuri v4.

Inkunga ya mushakisha

  • Yahagaritse inkunga ya IE8, IE9, na iOS 6. v4 ubu ni IE10 + na iOS 7+ gusa. Ku mbuga zikeneye kimwe muri ibyo, koresha v3.
  • Wongeyeho inkunga yemewe ya Android v5.0 Browser ya Lollipop na WebView. Ubusanzwe verisiyo ya Android Browser na WebView ikomeza gushyigikirwa gusa.

Impinduka ku isi

  • Flexbox ishoboye kubisanzwe. Muri rusange ibi bivuze kwimuka kureremba nibindi byinshi mubice byacu.
  • Yahinduwe kuva Hasi Kuri Sass kumasoko ya dosiye ya CSS.
  • Yahinduwe kuva pxnkibice rembyibanze bya CSS, nubwo pigiseli iracyakoreshwa kubibazo byitangazamakuru hamwe nimyitwarire ya gride nkibikoresho byabigenewe ntabwo bigira ingaruka kubunini bwubwoko.
  • Imyandikire yisi yose yiyongereye kuva 14pxkuri 16px.
  • Kuvugurura urwego rwa gride kugirango wongere amahitamo ya gatanu (ubariza ibikoresho bito kuri 576pxno hepfo) hanyuma ukuraho -xsinfix muri ayo masomo. Urugero : .col-6.col-sm-4.col-md-3.
  • Yasimbuje insanganyamatsiko itandukanye hamwe nuburyo bugaragara binyuze muri SCSS ihinduka (urugero, $enable-gradients: true).
  • Kubaka sisitemu ivuguruye kugirango ukoreshe urukurikirane rwimyandikire ya npm aho gukoresha Grunt. Reba package.jsoninyandiko zose, cyangwa umushinga wo gusoma kubikorwa bikenewe byiterambere.
  • Kudakoresha imikoreshereze ya Bootstrap ntigikoreshwa.
  • Yahagaritse Customerizer kumurongo kugirango ashyigikire ibyangombwa byinshi byashizweho kandi byubatswe.
  • Wongeyeho ibyiciro byinshi byingirakamaro kumasomo rusange ya CSS umutungo-agaciro kamwe hamwe na margin / padding intera ihinnye.

Sisitemu ya sisitemu

  • Yimuriwe kuri flexbox.
    • Wongeyeho inkunga ya flexbox muri grid ivanga hamwe nibyiciro byateganijwe mbere.
    • Nkigice cya flexbox, harimo inkunga ya vertical na horizontal guhuza amasomo.
  • Ivugurura rya grid urwego rwamazina na gride nshya.
    • Wongeyeho urwego rushya rwa smgride hepfo 768pxkugirango ugenzure byinshi. Ubu dufite xs,,, na . sm_ Ibi bivuze kandi ko buri cyiciro cyatewe hejuru kurwego rumwe ( muri v3 ubu iri muri v4).mdlgxl.col-md-6.col-lg-6
    • xsgrid ibyiciro byahinduwe kugirango bidasaba infix kugirango irusheho kwerekana neza ko batangiye gukoresha stil kuri min-width: 0kandi ntabwo yashizweho pigiseli yagaciro. Aho kugirango .col-xs-6, ubu .col-6. Ibindi bikoresho byose bya gride bisaba infix (urugero, sm).
  • Ivugurura rya gride ingano, ivanga, nibihinduka.
    • Imiyoboro ya gride ubu ifite ikarita ya Sass kuburyo ushobora kwerekana ubugari bwihariye bwimyanda kuri buri gice.
    • Ivugurura rya gride ivanze kugirango ukoreshe make-col-readyibivangwa mbere na a make-colkugirango ushireho flexhamwe no max-widthkugereranya inkingi.
    • Sisitemu yahinduwe ya sisitemu itangazamakuru ryibibazo hamwe nubugari bwa kontineri kugirango ubare urwego rushya rwa gride kandi urebe ko inkingi zigabanywa kuburyo 12bugari.
    • Imiyoboro ya gride hamwe nubugari bwa kontineri ubu bikoreshwa hifashishijwe ikarita ya Sass ( $grid-breakpointsna $container-max-widths) aho kuba intoki zimpinduka zitandukanye. Ibi bisimbuza @screen-*impinduka zose kandi bikwemerera guhitamo neza urwego rwa gride.
    • Ibibazo by'itangazamakuru nabyo byarahindutse. Aho gusubiramo itangazamakuru ryibibazo byabajijwe bifite agaciro kamwe buri gihe, ubu dufite @include media-breakpoint-up/down/only. Noneho, aho kwandika @media (min-width: @screen-sm-min) { ... }, urashobora kwandika @include media-breakpoint-up(sm) { ... }.

Ibigize

  • Ikibaho cyamanutse, igikumwe, n'amariba kubintu bishya byose bikubiyemo, amakarita .
  • Kureka imyandikire ya Glyphicons. Niba ukeneye amashusho, amahitamo amwe ni:
  • Yahagaritse plugin ya Affix jQuery.
    • Turasaba gukoresha position: stickyaho. Reba HTML5 Nyamuneka andika ibisobanuro birambuye hamwe nibyifuzo bya polyfill. Icyifuzo kimwe ni ugukoresha @supportsitegeko ryo kubishyira mubikorwa (urugero, @supports (position: sticky) { ... }) /
    • Niba wakoresheje Affix kugirango ushyireho inyongera, zidasanzwe position, polyfill ntishobora gushyigikira ikibazo cyawe. Uburyo bumwe bwo gukoresha ni isomero rya gatatu ScrollPos-Styler isomero.
  • Yataye ibice bya pager nkuko byari bisanzwe byoroheje buto.
  • Yasubiwemo hafi ibice byose kugirango akoreshe byinshi bitatoranijwe byabatoranijwe aho guhitamo abana batoranijwe.

Kubigize

Uru rutonde rugaragaza impinduka zingenzi mubice hagati ya v3.xx na v4.0.0.

Ongera usubiremo

Gishya kuri Bootstrap 4 ni Reboot , urupapuro rushya rwubaka kuri Normalize hamwe nuburyo bumwe bwo gutekereza gusubiramo uburyo. Abahitamo kugaragara muri iyi dosiye bakoresha gusa ibintu-hano nta masomo hano. Ibi bitandukanya ibyasubiwemo muburyo bwimiterere yuburyo bugaragara. Bimwe mubyingenzi byingenzi gusubiramo ibi birimo impinduka, kwimuka box-sizing: border-boxuva mubice byinshi, guhuza imiterere, hamwe nibintu byinshi bigarura.emrem

Imyandikire

  • Yimuye .text-ibikorwa byose kuri _utilities.scssdosiye.
  • Yataye .page-headernkuburyo bwayo irashobora gukoreshwa hakoreshejwe ibikorwa.
  • .dl-horizontalYashizwe. Ahubwo, koresha kandi .rowukoreshe <dl>gride inkingi (cyangwa ivanga) kuri <dt>hamwe <dd>nabana.
  • Kuvugurura ibibujijwe, kwimura uburyo bwabo kuva <blockquote>mubintu kugera kumurongo umwe , .blockquote. Yahinduye .blockquote-reversemodifier kubikorwa byingirakamaro.
  • .list-inlineubu birasaba ko abana bayo batondekanya ibintu bafite .list-inline-itemicyiciro gishya babakoresheje.

Amashusho

  • Yahinduwe .img-responsivekuri .img-fluid.
  • Yahinduwe .img-roundedkuri.rounded
  • Yahinduwe .img-circlekuri.rounded-circle

Imbonerahamwe

  • Hafi yingero zose >zabatoranije zavanyweho, bivuze ko ameza yatondekanye azahita azungura imiterere kubabyeyi babo. Ibi byoroshya cyane abaduhitamo hamwe nibishobora guhinduka.
  • Yahinduwe .table-condensedkugirango ahamye .table-sm.
  • Wongeyeho uburyo bushya .table-inverse.
  • Wongeyeho imbonerahamwe yumutwe uhindura: .thead-defaultna .thead-inverse.
  • Yahinduwe ibyiciro byamasomo kugirango agire .table--ibisobanuro. Kubwibyo .active,,, na Kuri ,,, na . .success_ .warning_ _ _.danger.info.table-active.table-success.table-warning.table-danger.table-info

Ifishi

  • Ikintu cyimuwe gisubira muri _reboot.scssdosiye.
  • Yahinduwe .control-labelkuri .col-form-label.
  • Yahinduwe .input-lgkandi .input-smkuri .form-control-lgna .form-control-sm.
  • Kureka .form-group-*amasomo kubworoshye. Koresha .form-control-*amasomo aho nonaha.
  • Yataye .help-blockkandi ayisimbuza na .form-textblock-urwego rwo gufasha inyandiko. Kuri inline ifasha inyandiko nubundi buryo bworoshye, koresha amasomo yingirakamaro nka .text-muted.
  • Yataye .radio-inlinekandi .checkbox-inline.
  • Guhuriza .checkboxhamwe no .radiomubyiciro .form-checkbitandukanye .form-check-*.
  • Ifishi ya horizontal yaravuguruwe:
    • Yahagaritse .form-horizontalicyiciro gisabwa.
    • .form-groupntakigikoreshwa muburyo buvuye .rowkuri mixin, .rowubu rero birasabwa kuri horizontal grid imiterere (urugero, <div class="form-group row">).
    • Wongeyeho ibyiciro bishya .col-form-labelkumurongo uhagaze hamwe na .form-controls.
    • Wongeyeho shyashya .form-rowkumpapuro zifatika hamwe na gride ya gride (swap yawe .rowkuri a .form-rowhanyuma ugende).
  • Wongeyeho impapuro zabugenewe zishyigikiwe (kubisanduku, amaradiyo, guhitamo, hamwe ninjiza ya dosiye).
  • Byasimbuwe .has-error, .has-warninghamwe .has-successnamasomo hamwe na HTML5 ifishi yo kwemeza ikoresheje CSS :invalidna :validpseudo-masomo.
  • Yahinduwe .form-control-statickuri .form-control-plaintext.

Utubuto

  • Yahinduwe .btn-defaultkuri .btn-secondary.
  • Kureka .btn-xsicyiciro rwose nkuko .btn-smugereranije ni bito cyane kuruta v3.
  • Akabuto ka leta kerekana ibiranga button.jsjQuery yamanuwe. Ibi birimo $().button(string)uburyo $().button('reset'). Turagira inama yo gukoresha akantu gato ka JavaScript yihariye aho, izaba ifite inyungu zo kwitwara neza nkuko ubishaka.
    • Menya ko ibindi biranga plugin (buto yo kugenzura agasanduku, amaradiyo ya buto, buto imwe yo guhinduranya) yagumishijwe muri v4.
  • Hindura buto ' [disabled]kuri :disablednkuko IE9 + ishyigikira :disabled. Icyakora fieldset[disabled]biracyakenewe kuberako imirima yabamugaye kavukire iracyari buggy muri IE11 .

Itsinda rya buto

  • Ongera wandike ibice hamwe na flexbox.
  • Yakuweho .btn-group-justified. Nkumusimbura urashobora gukoresha <div class="btn-group d-flex" role="group"></div>nkigipfunyika hafi yibintu hamwe .w-100.
  • Kureka .btn-group-xsicyiciro rwose cyatanzwe cyo gukuraho .btn-xs.
  • Yakuweho umwanya utomoye hagati yitsinda rya buto mu bikoresho byifashishwa; koresha margin utanga ubu.
  • Kunoza inyandiko zo gukoresha hamwe nibindi bice.
  • Yahinduwe mubatoranya ababyeyi mubyiciro byihariye kubice byose, abahindura, nibindi.
  • Uburyo bworoshye bwo kumanura uburyo bwo kutongera kohereza hamwe hejuru cyangwa hepfo harebwa imyambi ifatanye na menu yamanutse.
  • Ibitonyanga birashobora kubakwa hamwe na <div>s cyangwa <ul>s ubungubu.
  • Kongera kubaka uburyo bwo kumanura no gushiraho kugirango utange byoroshye, byubatswe mubufasha kubintu <a>bishingiye <button>kumanuka.
  • Yahinduwe .dividerkuri .dropdown-divider.
  • Ibintu bitonyanga ubu birasaba .dropdown-item.
  • Kumanura ibitonyanga ntibigisaba neza <span class="caret"></span>; ubu itangwa mu buryo bwikora binyuze kuri CSS ::afterkuri .dropdown-toggle.

Sisitemu ya sisitemu

  • 576pxWongeyeho urusobekerane rushya nka sm, bivuze ko ubu hari ibice bitanu byose ( xs,,, na sm, ) .mdlgxl
  • Hindura izina rya gride ihindura ibyiciro kuva .col-{breakpoint}-{modifier}-{size}kumurongo .{modifier}-{breakpoint}-{size}woroshye wa gride.
  • Kureka gusunika no gukurura ibyiciro byahinduye amasomo mashya ya flexbox order. Kurugero, aho kugirango .col-8.push-4na .col-4.pull-8, wakoresha .col-8.order-2na .col-4.order-1.
  • Wongeyeho flexbox yingirakamaro ibyiciro bya gride sisitemu nibigize.

Andika amatsinda

  • Ongera wandike ibice hamwe na flexbox.
  • Byasimbuwe a.list-group-itemnicyiciro gisobanutse .list-group-item-action,, kuri styling ihuza na buto verisiyo yurutonde rwibintu.
  • Wongeyeho .list-group-flushicyiciro cyo gukoresha hamwe namakarita.
  • Ongera wandike ibice hamwe na flexbox.
  • Uhaye kwimuka kuri flexbox, guhuza ibishushanyo byo kwirukana mumutwe birashoboka ko byacitse kuko tutagikoresha kureremba. Ibirimo bireremba biza mbere, ariko hamwe na flexbox itakibaho. Kuvugurura amashusho yawe yo kwirukana kugirango aze nyuma yimitwe yuburyo bwo gukosora.
  • Ihitamo remote(rishobora gukoreshwa mu guhita ryikorera no gutera inshinge zo hanze muburyo) hanyuma loaded.bs.modalibyabaye bikurwaho. Turasaba ahubwo gukoresha abakiriya kuruhande rwicyitegererezo cyangwa guhuza amakuru, cyangwa guhamagara jQuery.wikore wenyine.
  • Ongera wandike ibice hamwe na flexbox.
  • Yahagaritse hafi >yabatoranije kugirango boroherezwe muburyo bworoshye binyuze mumashuri adashizwe.
  • Aho kugirango HTML yihariye itoranya nka .nav > li > a, dukoresha ibyiciro bitandukanye kuri .navs, .nav-items, na .nav-links. Ibi bituma HTML yawe ihinduka mugihe uzana kwaguka kwagutse.

Navbar yanditswe rwose muri flexbox hamwe niterambere ryiza ryo guhuza, kwitabira, no kwihindura.

  • Imyitwarire ya navbar isubiza ubu ikoreshwa .navbarmubyiciro ukoresheje ibisabwa .navbar-expand-{breakpoint} aho uhisemo aho gusenyera navbar. Mbere ibi byari bike byahinduwe kandi bisabwa gusubiramo.
  • .navbar-defaultni ubu .navbar-light, nubwo .navbar-darkbikomeza kuba bimwe. Kimwe muri ibyo kirakenewe kuri buri navbar. Ariko, aya masomo ntagishyiraho background-colors; ahubwo bigira ingaruka gusa color.
  • Navbars ubu isaba imenyekanisha ryibanze ryubwoko runaka. Hitamo kumurongo wibikorwa byingenzi ( .bg-*) cyangwa ushireho ibyawe hamwe nurumuri / inverse ibyiciro hejuru kugirango ube umusazi .
  • Uhaye uburyo bwa flexbox, navbars irashobora gukoresha flexbox yingirakamaro kuburyo bworoshye bwo guhuza.
  • .navbar-toggleni ubu .navbar-togglerkandi ifite uburyo butandukanye nibimenyetso byimbere (ntakindi bitatu <span>s).
  • Yahagaritse .navbar-formishuri rwose. Ntibikiri ngombwa; ahubwo, koresha gusa .form-inlinekandi ushyire mubikorwa ibikorwa bikenewe.
  • Navbars ntikirimo margin-bottomcyangwa border-radiuskubisanzwe. Koresha ibikorwa nkibikenewe.
  • Ingero zose zirimo navbars zaravuguruwe kugirango zishyiremo ibimenyetso bishya.

Pagination

  • Ongera wandike ibice hamwe na flexbox.
  • Ibyiciro bisobanutse ( .page-item, .page-link) ubu birasabwa kubakomoka kuri .paginations
  • Kureka .pageribice byose kuko byari bike kurenza urutonde rwabigenewe.
  • Icyiciro gisobanutse ,, .breadcrumb-itemubu kirasabwa kubakomoka kuri .breadcrumbs

Ibirango na badge

  • Guhuriza .labelhamwe .badgeno gutandukanya ibintu <label>no koroshya ibice bifitanye isano.
  • Wongeyeho .badge-pillnka modifier kugirango uzenguruke "ibinini" reba.
  • Ibirango ntibikiri kureremba byikora mumatsinda yurutonde nibindi bice. Ibyiciro byingirakamaro birasabwa kubwibyo.
  • .badge-defaultyajugunywe kandi .badge-secondaryyongeweho guhuza ibice bihindura ibyiciro byakoreshejwe ahandi.

Ikibaho, igikumwe, n'amariba

Yataye rwose kubintu bishya bigize ikarita.

Ikibaho

  • .panelKuri .card, ubu yubatswe na flexbox.
  • .panel-defaultyakuweho kandi nta wasimbuye.
  • .panel-groupyakuweho kandi nta wasimbuye. .card-groupntabwo ari umusimbura, biratandukanye.
  • .panel-headingKuri.card-header
  • .panel-titleKuri .card-title. Ukurikije isura yifuzwa, urashobora kandi gushaka gukoresha imitwe cyangwa amasomo (urugero <h3>, .h3) cyangwa ibintu bitangaje cyangwa amasomo (urugero <strong>, ) <b>. .font-weight-boldMenya ko .card-title, nubwo bisa nkaho, bitanga isura itandukanye na .panel-title.
  • .panel-bodyKuri.card-body
  • .panel-footerKuri.card-footer
  • .panel-primary,,, kandi .panel-success, byajugunywe kuri , hamwe nibikorwa byaturutse ku ikarita yacu ya Sass..panel-info.panel-warning.panel-danger.bg-.text-.border$theme-colors

Iterambere

  • Gusimbuza .progress-bar-*ibyiciro byibanze hamwe .bg-*nibikorwa byingirakamaro. Kurugero, class="progress-bar progress-bar-danger"bihinduka class="progress-bar bg-danger".
  • Byasimbuwe .activekuri animasiyo yiterambere .progress-bar-animated.
  • Kuvugurura ibice byose kugirango byoroshe gushushanya no gutunganya. Dufite uburyo buke kuri wewe kugirango urengere, ibipimo bishya, nibishusho bishya.
  • CSS yose yarashizwemo kandi ihindurwamo izina, yemeza ko buri cyiciro cyashyizwe hamwe .carousel-.
    • Kubintu bya karuseli ,,, na .next, ubu ,,, na ..prev.left.right.carousel-item-next.carousel-item-prev.carousel-item-left.carousel-item-right
    • .itemni na none .carousel-item.
    • Kuri prev / ubutaha igenzura, .carousel-control.rightkandi .carousel-control.leftnubu .carousel-control-nextkandi .carousel-control-prev, bivuze ko batagikeneye icyiciro cyibanze.
  • Yakuyeho imyandikire yose yitabiriwe, yerekeza kubikorwa byingirakamaro (urugero, kwerekana ibisobanuro kuri bimwe mubireba) hamwe nuburyo bwihariye nkuko bikenewe.
  • Ishusho yakuweho irengereye amashusho mubintu bya karuseli, byerekeza kubikorwa byingirakamaro.
  • Tweaked urugero rwa Carousel kugirango ushiremo ibimenyetso bishya nuburyo.

Imbonerahamwe

  • Inkunga yakuweho kumeza yubatswe. Imiterere yimbonerahamwe yose yarazwe muri v4 kubahitamo byoroshye.
  • Wongeyeho imbonerahamwe ihindagurika.

Ibikorwa

  • Erekana, uhishe, nibindi byinshi:
    • Yakozwe yerekana ibikorwa byingirakamaro (urugero, .d-nonena d-{sm,md,lg,xl}-none).
    • Yataye igice kinini cyibikorwa.hidden-* byingirakamaro . Kurugero, aho kugirango , koresha . Yahinduye ibikorwa byingirakamaro kugirango ukoreshe kwerekana ibikorwa byo kwita izina gahunda. Ibisobanuro byinshi munsi yingirakamaro yibikorwa byuru rupapuro..hidden-sm-up.d-sm-none.hidden-print
    • Wongeyeho .float-{sm,md,lg,xl}-{left,right,none}amasomo yo kureremba kureremba no gukurwaho .pull-leftkandi .pull-rightkuva arenze kuri .float-leftna .float-right.
  • Ubwoko:
    • Wongeyeho ibisubizo byitondewe mubyiciro byacu byo guhuza inyandiko .text-{sm,md,lg,xl}-{left,center,right}.
  • Guhuza no gutandukanya:
  • Clearfix yavuguruwe kugirango igabanye inkunga ya verisiyo ishaje.

Abacuruzi prefix ivanze

Bootstrap 3 y'abacuruzi prefix ivanze, yataye agaciro muri v3.2.0, yavanyweho muri Bootstrap 4. Kuva dukoresha Autoprefixer , ntibikiri ngombwa.

Yakuweho ivanga rikurikira : animation,,,,,,,,,,,,,,,,,,,,,,, _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-timing-functionbackface-visibilitybox-sizingcontent-columnshyphensopacityperspectiveperspective-originrotaterotateXrotateYscalescaleXscaleYskewtransform-origintransition-delaytransition-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Inyandiko

Inyandiko zacu zabonye kuzamurwa hejuru yubuyobozi. Dore hasi hasi:

  • Turacyakoresha Jekyll, ariko dufite plugins zivanze:
    • bugify.rbni Byakoreshejwe Kuri Urutonde neza Ibyanditswe Kurupapuro rwa Mucukumbuzi .
    • example.rbni igikoresho cyihariye cya highlight.rbplugin isanzwe, itanga uburyo bworoshye-kode ikora.
    • callout.rbni imigenzo isa nayo, ariko yagenewe abadasanzwe bahamagaye.
    • jekyll-toc ikoreshwa mukubyara imbonerahamwe yibirimo.
  • Ibirimo byose bya doc byongeye kwandikwa muri Markdown (aho kuba HTML) kugirango byoroshye guhinduka.
  • Urupapuro rwongeye kuvugururwa kubintu byoroshye kandi byegereye urwego.
  • Twavuye muri CSS isanzwe tujya muri SCSS kugirango dukoreshe byuzuye impinduka za Bootstrap, ivanga, nibindi byinshi.

Ibikorwa byingirakamaro

Impinduka zose @screen-zavanyweho muri v4.0.0. Koresha ivanga media-breakpoint-up(),, media-breakpoint-down()cyangwa media-breakpoint-only()Sass ivanze cyangwa $grid-breakpointsikarita ya Sass aho.

Ibyiciro byingirakamaro byamasomo byavanyweho ahanini kugirango dushyigikire displayibikorwa byingirakamaro.

  • Amasomo yakuweho kuko bivuguruzanya .hiddennuburyo bwa jQuery . Ahubwo, gerageza uhindure ikiranga cyangwa ukoreshe inline stil nka na ..show$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
  • Ibyiciro byose .hidden-byavanyweho, uzigame kubikorwa byanditse byahinduwe.
    • Yakuwe kuri 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
    • Yakuwe kuri v4 gushimangira:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Gusohora ibikoresho bitagikoreshwa na .hidden-cyangwa .visible-, ariko hamwe .d-print-.
    • Amazina ashaje : .visible-print-block,,,.visible-print-inline.visible-print-inline-block.hidden-print
    • Ibyiciro bishya : .d-print-block,,,.d-print-inline.d-print-inline-block.d-print-none

Aho gukoresha .visible-*amasomo asobanutse, ukora ikintu kigaragara nukutabihisha kuri bunini bwa ecran. Urashobora guhuza .d-*-noneicyiciro kimwe nicyiciro kimwe .d-*-blockkugirango werekane ikintu gusa intera yatanzwe yubunini bwa ecran (urugero .d-none.d-md-block.d-xl-noneyerekana ikintu gusa kubikoresho biciriritse kandi binini).

Menya ko impinduka kuri grid yacitse muri v4 bivuze ko uzakenera kujya munzira imwe kugirango ugere kubisubizo bimwe. Ibyiciro bishya byingirakamaro byingirakamaro ntibigerageza kwakira imanza zidasanzwe aho ikintu kigaragara kidashobora kugaragazwa nkurwego rumwe ruhuza ibipimo byerekana; uzakenera ahubwo gukoresha CSS yihariye mubihe nkibi.