Source

Na-akwaga na v4

Bootstrap 4 bụ nnukwu idegharị nke ọrụ ahụ dum. A na-achịkọta mgbanwe ndị kachasị ama ama n'okpuru, na-esote mgbanwe ndị ọzọ akọwapụtara na ihe ndị dị mkpa.

Mgbanwe kwụsiri ike

Site na Beta 3 gaa na ntọhapụ v4.0 anyị kwụsiri ike, enweghị mgbanwe ọ bụla na-emebi emebi, mana enwere mgbanwe ụfọdụ ama ama.

Na-ebi akwụkwọ

  • Ngwa ebipụta agbajiri agbaji. Na mbụ, iji .d-print-*klas ga-emebi klaasị ọ bụla na mberede .d-*. Ugbu a, ha dabara na ihe ngosi anyị ndị ọzọ ma tinye naanị na mgbasa ozi ahụ ( @media print).

  • Urụ ọrụ ngosi mbipụta agbasawanye ka ọ dabara na ngwa ndị ọzọ. Beta 3 na karịa nwere naanị block, inline-block, inline, na none. Stable v4 agbakwunyere flex, inline-flex, table, table-rowna table-cell.

  • Ngosipụta nhụchalụ ebipụta edobere n'ofe ihe nchọgharị nwere ụdị mbipụta ọhụrụ na-akọwapụta @page size.

Beta 3 gbanwere

Ọ bụ ezie na Beta 2 hụrụ ọtụtụ mgbanwe mgbanwe anyị n'oge oge beta, mana anyị ka nwere ole na ole achọrọ ka a gwa ya na ntọhapụ Beta 3. Mgbanwe ndị a na-emetụta ma ọ bụrụ na ị na-emelite na Beta 3 site na Beta 2 ma ọ bụ ụdị Bootstrap ochie ọ bụla.

Dị iche iche

  • Wepụrụ $thumbnail-transitionmgbanwe ejighi ya. Anyị anaghị agbanwe ihe ọ bụla, yabụ na ọ bụ naanị koodu mgbakwunye.
  • Ngwungwu npm anaghịzi agụnye faịlụ ọ bụla na-abụghị isi iyi na faịlụ dist; Ọ bụrụ na ị dabere na ha ma na-agba ọsọ edemede anyị site na node_modulesnchekwa, ị kwesịrị ịmegharị usoro ọrụ gị.

Ụdị

  • Degharịa ma igbe nrịbama omenala na nke ndabara na redio. Ugbu a, ha abụọ nwere nhazi HTML dakọtara (mpụta <div>ya na nwanne ya <input>na <label>) yana otu ụdị nhazi ahụ (nhazi nke etinyere, inline na klas modifier). Nke a na-enye anyị ohere ịke akara akara dabere na steeti ntinye, na-eme ka nkwado dị mfe maka disablednjirimara ahụ (na mbụ chọrọ klas nne na nna) yana ịkwado nkwado nke ọma ụdị anyị.

    Dịka akụkụ nke nke a, anyị agbanweela CSS maka ijikwa ọtụtụ background-images na igbe nlele na redio. Na mbụ, ihe ewepụrụ ugbu a .custom-control-indicatornwere agba ndabere, gradient na akara SVG. Ịhazi gradient n'azụ pụtara ịdochi ndị ahụ niile oge ọ bụla ịchọrọ ịgbanwe naanị otu. Ugbu a, anyị nwere .custom-control-label::beforemaka njupụta na gradient na .custom-control-label::afterejiri akara ngosi.

    Ka ịmee nleba anya n'ahịrị, tinye .custom-control-inline.

  • Onye nhọpụta emelitere maka otu bọtịnụ ndenye. Kama [data-toggle="buttons"] { }maka ụdị na omume, anyị na-eji datanjirimara naanị maka omume JS ma dabere na .btn-group-toggleklas ọhụrụ maka ịke.

  • Wepụrụ .col-form-legendna ihu ọma nke dịtụ mma .col-form-label. N'ụzọ dị otú a .col-form-label-smna .col-form-label-lgike ga-eji na <legend>ọcha na mfe.

  • Ntinye faịlụ omenala nwetara mgbanwe na mgbanwe $custom-file-textSass ha. Ọ bụghịzi maapụ Sass akwụ ụgwọ ma na-enye naanị otu eriri - Browsebọtịnụ dịka nke ahụ bụ naanị ihe pseudo-emepụtara na Sass anyị. Ederede Choose filea si na .custom-file-label.

Otu ntinye

  • Addons otu ntinye bụ kpọmkwem maka ntinye ha n'ihe metụtara ntinye. Anyị adaala .input-group-addonna .input-group-btnklaasị abụọ ọhụrụ, .input-group-prependna .input-group-append. Ị ga-ejirịrị ngwa ngwa ma ọ bụ prepend ugbu a, na-eme ka ọtụtụ CSS anyị dị mfe. N'ime ngwa mgbakwunye ma ọ bụ prepend, tinye bọtịnụ gị ka ha ga-adị ebe ọ bụla ọzọ, mana kechie ederede na .input-group-text.

  • A na-akwado ụdị nkwado ugbu a, dịka ọtụtụ ntinye (n'agbanyeghị na ị nwere ike kwado naanị otu ntinye n'otu otu).

  • klaasị nha ga-adịrịrị na nne .input-groupma ọ bụ nna ọ bụghị n'ụdị nke ọ bụla.

Beta 2 gbanwere

Mgbe anyị nọ na beta, ebumnuche anyị enweghị mgbanwe ọ bụla na-emebi emebi. Otú ọ dị, ọ bụghị mgbe nile ka ihe na-aga ka e mere atụmatụ. N'okpuru bụ mgbanwe nbibi ị ga-eburu n'uche mgbe ị na-esi na Beta 1 gaa Beta 2.

Na-agbaji

  • Wepụrụ $badge-colormgbanwe na ojiji ya na .badge. Anyị na-eji ọrụ ọdịiche agba were were colordabere na background-color, yabụ mgbanwe adịghị mkpa.
  • Ọrụ akpọgharịrị aha grayscale()ya ka ịzenarị imebi esemokwu na nzacha gray()ala CSS .grayscale
  • Akpọgharịrị aha .table-inverse, .thead-inverse, na .thead-defaultna .*-darkna .*-light, dabara na atụmatụ agba anyị ejiri ebe ọzọ.
  • Tebụl na-anabata ihe ugbu a na-ewepụta klaasị maka ebe nkwụsị grid ọ bụla. Nke a na-agbaji na Beta 1 n'ihi na nke .table-responsiveị na-eji dị ka .table-responsive-md. Ị nwere ike iji ugbu a .table-responsivema ọ bụ .table-responsive-{sm,md,lg,xl}dị ka achọrọ.
  • Nkwado Bower ewedara dị ka onye njikwa ngwugwu ewepụla maka ihe ọzọ (dịka, Yarn ma ọ bụ npm). Lee bower/bower#2298 maka nkọwa.
  • Bootstrap ka chọrọ jQuery 1.9.1 ma ọ bụ karịa, mana a na-adụ gị ọdụ ka ị jiri ụdị 3.x ebe ọ bụ na ihe nchọgharị v3.x na-akwado bụ ndị Bootstrap na-akwado gbakwunyere v3.x nwere ụfọdụ ndozi nchekwa.
  • Wepụrụ .form-control-labelklaasị ejighi ya. Ọ bụrụ na ị jiri klaasị a, ọ bụ oyiri nke .col-form-labelklaasị ahụ gbadoro ụkwụ <label>na ya na ntinye ejikọta ya na nhazi ụdị kwụ ọtọ.
  • Gbanwee ihe color-yiqsite na mixin nke gụnyere akụrụngwa ka colorọ bụrụ ọrụ na-eweghachite uru, na-enye gị ohere iji ya maka akụrụngwa CSS ọ bụla. Dịka ọmụmaatụ, kama color-yiq(#000)ị ga-ede color: color-yiq(#000);.

Isi ihe

  • Ewebata pointer-eventsojiji ọhụrụ na modal. Mpụta .modal-dialogna-agafe mmemme na pointer-events: nonemaka njikwa ọpịpị omenala (na-eme ka o kwe omume ịge ntị naanị .modal-backdropmaka ọpịpị ọ bụla), wee .modal-contentwere pointer-events: auto.

Nchịkọta

Nke a bụ nnukwu ihe tiketi ị ga-achọ ịma mgbe ị na-esi na v3 gaa v4.

Nkwado ihe nchọgharị

  • Wepụrụ nkwado IE8, IE9 na iOS 6. v4 bụ naanị IE10+ na iOS 7+. Maka saịtị chọrọ nke ọ bụla n'ime ndị ahụ, jiri v3.
  • Nkwado gọọmentị agbakwunyere maka ihe nchọgharị gam akporo v5.0 Lollipop na WebView. Ụdị ihe nchọgharị gam akporo na WebView gara aga ka na-akwado naanị na-akwadoghị.

Mgbanwe zuru ụwa ọnụ

  • Agbanyere Flexbox site na ndabara. N'ozuzu nke a pụtara ịpụnarị ụgbọ mmiri na ihe ndị ọzọ n'ofe akụkụ anyị.
  • Si na Obere gaa na Sass maka faịlụ CSS isi iyi anyị.
  • Si pxna ya rembụrụ ngalaba CSS bụ isi anyị, n'agbanyeghị na a ka na-eji pikselụ maka ajụjụ mgbasa ozi yana omume grid ka ụdị nha anaghị emetụta ihe nlele ngwaọrụ.
  • Ogo mkpụrụedemede zuru ụwa ọnụ si 14pxna 16px.
  • Tiers grid emegharịrị ka ịgbakwunye nhọrọ nke ise (na-agwa obere ngwaọrụ na 576pxna n'okpuru) wee wepụ -xsinfix na klaasị ndị ahụ. Ọmụmaatụ .col-6.col-sm-4.col-md-3:.
  • Dochie isiokwu nhọrọ dị iche na nhọrọ nhazi site na mgbanwe SCSS (dịka ọmụmaatụ, $enable-gradients: true).
  • Mepụta sistemu arụrụ iji jiri usoro npm script kama Grunt. Hụ package.jsonmaka scripts niile, ma ọ bụ readme ọrụ anyị maka mkpa mmepe obodo.
  • Anaghị akwado ojiji Bootstrap anaghị anabata ya.
  • Wepụrụ ihe nhazi ọnlaịnụ iji kwado akwụkwọ ntọlite ​​n'ọba yana ihe arụrụ arụ.
  • Agbakwunyere ọtụtụ klaasị akụrụngwa ọhụrụ maka ụzọ mkpirisi uru ihe onwunwe CSS na oke/padding spacing.

Sistemụ grid

  • Ebugara na flexbox.
    • Nkwado agbakwunyere maka flexbox na grid mixins na klaasị akọpụtagoro.
    • Dịka akụkụ nke flexbox, gụnyere nkwado maka klaasị kwụ n'ahịrị na kwụ n'ahịrị.
  • Aha klas grid emelitere yana ọkwa grid ọhụrụ.
    • smEtinyere ọkwa grid ọhụrụ n'okpuru 768pxmaka njikwa granular ọzọ. Anyị nwere ugbu a xs, sm, md, lgna xl. Nke a pụtakwara na ọkwa ọ bụla agbadala otu ọkwa (ya mere .col-md-6na v3 dị ugbu a .col-lg-6na v4).
    • xsemegharịla klaasị grid ka ọ ghara ịchọ infix ka ọ gosipụta nke ọma na ha na-amalite itinye ụdị na min-width: 0ọ bụghị uru pixel atọrọ. Kama .col-xs-6, ọ bụ ugbu a .col-6. Ọkwa grid ndị ọzọ chọrọ infix (dịka ọmụmaatụ, sm).
  • Nha grid emelitere, mixins na mgbanwe.
    • Ọwa mmiri grid ugbu a nwere maapụ Sass ka ị nwee ike ịkọwapụta obosara gọta n'ebe nkwụsịtụ ọ bụla.
    • Ngwakọta grid emelitere ka make-col-readyijiri mixin prep yana make-colka ịtọọ flexna max-widthmaka nha kọlụm nke ọ bụla.
    • Gbanwee njụta ​​ajụjụ mgbasa ozi usoro grid na obosara akpa ka ọ bụrụ ọkwa grid ọhụrụ wee hụ na a na-ekewa kọlụm n'otu n'otu site 12na oke obosara ha.
    • A na-edozi ebe nkwụsịtụ grid na obosara akpa site na maapụ Sass ( $grid-breakpointsna $container-max-widths) kama ntakịrị mgbanwe dị iche iche. Ndị a na-edochi @screen-*mgbanwe kpamkpam ma na-enye gị ohere ịhazi nke ọma grid tiers.
    • Ajụjụ mgbasa ozi agbanweela. Kama ikwughachi nkwupụta ajụjụ mgbasa ozi anyị n'otu uru oge ọ bụla, anyị nwere ugbu a @include media-breakpoint-up/down/only. Ugbu a, kama ide @media (min-width: @screen-sm-min) { ... }, ị nwere ike dee @include media-breakpoint-up(sm) { ... }.

Ngwa

  • Ogwe ndị wụfuru, obere mkpịsị aka, na olulu mmiri maka akụrụngwa nwere ihe niile, kaadị .
  • Wepụrụ mkpụrụedemede akara ngosi Glyphicons. Ọ bụrụ na ịchọrọ akara ngosi, ụfọdụ nhọrọ bụ:
  • Wepụrụ ngwa mgbakwunye Affix jQuery.
    • Anyị na-akwado iji position: stickykama. Hụ HTML5 Biko tinye maka nkọwa yana ndụmọdụ polyfill akọwapụtara. Otu ntụnye bụ iji @supportsiwu iji mejuputa ya (dịka ọmụmaatụ, @supports (position: sticky) { ... })/
    • Ọ bụrụ na ị na-eji Affix tinye mgbakwunye, ụdị na-abụghị positionụdị, polyfills nwere ike ọ gaghị akwado ikpe ojiji gị. Otu nhọrọ maka ojiji dị otú ahụ bụ ọba akwụkwọ ScrollPos-Styler nke ndị ọzọ .
  • Wepụrụ akụrụngwa pager ka ọ bụ bọtịnụ ahaziri nke ọma.
  • Emegharịrị ihe fọrọ nke nta ka ọ bụrụ ihe niile iji jiri ndị ahọpụtara klaasị na-enweghị akwụghị karịa karịa ndị ahọpụtara ụmụaka akọwapụtara nke ọma.

Site na akụrụngwa

Ndepụta a na-egosipụta mgbanwe isi site na mpaghara n'etiti v3.xx na v4.0.0.

Malitegharịa ekwentị

Ọhụrụ na Bootstrap 4 bụ Reboot , ụdị ụdị ọhụrụ nke na-ewulite na Normalize na ụdị nrụpụta nke echiche nke anyị nwere. Ndị na-ahọpụta ndị na-apụta na faịlụ a na-eji naanị ọcha-enweghị klaasị ebe a. Nke a na-ewepụ ụdị nrụpụta anyị na ụdị akụrụngwa anyị maka ụzọ modular ka ukwuu. Ụfọdụ n'ime ihe nrụpụta kachasị mkpa nke a gụnyere bụ box-sizing: border-boxmgbanwe, na-aga site emna remnkeji na ọtụtụ ihe, ụdị njikọ, na ọtụtụ ụdị nrụpụta.

Ederede

  • Bugharịa akụrụngwa niile .text-na _utilities.scssfaịlụ ahụ.
  • Etufuru .page-headerka enwere ike itinye ụdị ya site na akụrụngwa.
  • .dl-horizontalagbahapụla. Kama, jiri .rowma <dl>jiri klaasị kọlụm grid (ma ọ bụ mixins) na ya <dt>na <dd>ụmụaka.
  • Ihe mgbochi ndị emegharịrị, na-ebugharị ụdị ha site na <blockquote>mmewere gaa na otu klas, .blockquote. Wepụrụ ihe .blockquote-reversemgbanwe maka akụrụngwa ederede.
  • .list-inlineugbu a na-achọ ka ụmụ ya depụta ihe ka .list-inline-itemetinyere klas ọhụrụ n'ọrụ.

Onyonyo

  • Akpọgharịrị aha .img-responsiveya ka .img-fluid.
  • Akpọgharịrị aha .img-roundedya.rounded
  • Akpọgharịrị aha .img-circleya.rounded-circle

Tebụl

  • Ihe fọrọ nke nta ka ọ bụrụ oge niile nke onye >ahọpụtara ewepụla, nke pụtara na tebụl akwụ ụgwọ ga-eketa ụdị n'aka nne na nna ha ozugbo. Nke a na-eme ka ndị na-ahọrọ anyị dị mfe na nhazi nke nwere ike ime.
  • A kpọgharịrị aha .table-condensedya .table-smmaka ịdịgide.
  • Agbakwunyere .table-inversenhọrọ ọhụrụ.
  • Ihe ndozi nkụnye eji isi mee tebụl agbakwunyere: .thead-defaultna .thead-inverse.
  • Edegharịrị aha klaasị gburugburu ka ọ nwee .table-prefix. N'ihi ya .active, .success, .warning, .dangerna .info, .table-active, .table-success, .table-warningna .table-danger..table-info

Ụdị

  • Ntọgharị mmewere ebugharị na _reboot.scssfaịlụ ahụ.
  • Akpọgharịrị aha .control-labelya ka .col-form-label.
  • A kpọgharịrị aha .input-lgna .input-smnye .form-control-lgna .form-control-sm, n'otu n'otu.
  • Wepụrụ .form-group-*klaasị maka ịdị mfe. Jiri .form-control-*klaasị ugbu a.
  • Wepu .help-blockma jiri dochie ya .form-textmaka ederede enyemaka ngọngọ. Maka ederede enyemaka inline na nhọrọ ndị ọzọ na-agbanwe agbanwe, jiri klas ịba uru dị ka .text-muted.
  • Wepụrụ .radio-inlinena .checkbox-inline.
  • Ejikọtara .checkboxna .radion'ime .form-checkna klaasị dị iche .form-check-*iche.
  • E megharịala ụdị kwụ ọtọ:
    • Wepụrụ .form-horizontalklas chọrọ.
    • .form-groupanaghịzi emetụta ụdị si na .rowmixin, yabụ .rowachọrọ ugbu a maka nhazi grid kwụ ọtọ (dịka ọmụmaatụ, <div class="form-group row">).
    • Agbakwunyere klaasị ọhụrụ .col-form-labelna akara n'etiti kwụ ọtọ nwere .form-controls.
    • Agbakwunyere ọhụrụ .form-rowmaka nhazi ụdị kọmpat yana klaasị grid (gbanwee gị .rowmaka a .form-rowwee gaa).
  • Nkwado ụdị omenala agbakwunyere (maka igbe nlele, redio, nhọrọ na ntinye faịlụ).
  • Dochiri .has-error, .has-warning, na .has-successklaasị jiri HTML5 ụdị nkwado site na klaasị CSS :invalidna :validpseudo-class.
  • Akpọgharịrị aha .form-control-staticya ka .form-control-plaintext.

Bọtịnụ

  • Akpọgharịrị aha .btn-defaultya ka .btn-secondary.
  • Wepụrụ .btn-xsklaasị ahụ kpamkpam dịka .btn-smọ dị obere karịa v3's.
  • Ahapụla atụmatụ bọtịnụ steeti nke button.jsngwa mgbakwunye jQuery. Nke a gụnyere usoro $().button(string)na $().button('reset')usoro. Anyị na-adụ ọdụ ka iji obere Javascript omenala, nke ga-erite uru nke ịme otu ị chọrọ ka ọ mee.
    • Rịba ama na njirimara ndị ọzọ nke ngwa mgbakwunye ahụ (igbe nlele bọtịnụ, redio bọtịnụ, bọtịnụ otu ngbanwe) ka edobere na v4.
  • Gbanwee bọtịnụ [disabled]ka ọ :disabledbụrụ IE9+ na-akwado :disabled. Otú ọ dị , ọ fieldset[disabled]ka dị mkpa n'ihi na oghere ndị nwere nkwarụ ka na-akpa ike na IE11 .

Otu bọtịnụ

  • Jiri flexbox degharịa akụrụngwa.
  • Ewepụrụ .btn-group-justified. Dị ka nnọchi ị nwere ike iji <div class="btn-group d-flex" role="group"></div>dị ka ihe mkpuchi gburugburu ihe nwere .w-100.
  • Wepụrụ .btn-group-xsklaasị ahụ kpamkpam ewepụrụ .btn-xs.
  • Wepụrụ oghere doro anya n'etiti otu bọtịnụ na bọtịnụ ngwaọrụ; jiri oke utilities ugbu a.
  • Akwụkwọ emelitere maka iji ya na ihe ndị ọzọ.
  • Agbanwere site na ndị nne na nna ahọpụtara gaa na klaasị otu maka akụrụngwa niile, ndị mgbanwe, wdg.
  • Ụdị mwụda dị mfe ka agaghịzi eji akụ chere ihu elu ma ọ bụ ala agbakwunyere na menu ndọpụta.
  • Enwere ike iji <div>s ma ọ bụ <ul>s wulite mkpọda ugbu a.
  • Ewugharịrị ụdị mwụda na akara iji nye nkwado dị mfe, arụnyere n'ime <a>yana <button>ihe mgbada dabere.
  • Akpọgharịrị aha .dividerya ka .dropdown-divider.
  • Ihe mwepu chọrọ ugbu a .dropdown-item.
  • Mgbanwe mkpọda anaghịzi achọ ihe doro anya <span class="caret"></span>; A na-enye nke a na-akpaghị aka site na CSS ::afterna .dropdown-toggle.

Sistemụ grid

  • 576pxAgbakwunyere ebe nkwụsịtụ grid ọhụrụ dị ka sm, nke pụtara na enwere ngụkọta ọkwa ise ( xs, sm, md, lg, na xl).
  • A kpọgharịrị klaasị mgbanwe grid na-anabata aha .col-{breakpoint}-{modifier}-{size}maka .{modifier}-{breakpoint}-{size}klaasị grid dị mfe.
  • Ewepụla ma dọpụta klaasị mgbanwe maka klaasị nwere ike flexbox ọhụrụ order. Dịka ọmụmaatụ, kama .col-8.push-4na .col-4.pull-8, ị ga-eji .col-8.order-2na .col-4.order-1.
  • Klas flexbox agbakwunyere maka sistemụ grid na akụrụngwa.

Ndepụta otu

  • Jiri flexbox degharịa akụrụngwa.
  • Dochie a.list-group-itemya na klas doro anya, .list-group-item-action, maka nhazi nhazi na ụdị bọtịnụ nke ndepụta ihe otu.
  • Klas agbakwunyere .list-group-flushmaka iji kaadị.
  • Jiri flexbox degharịa akụrụngwa.
  • N'iburu ịkwaga na flexbox, nhazi nke akara ngosi nchụpụ na nkụnye eji isi mee nwere ike agbajikwa ebe anyị anaghịzi eji floats. Ọdịnaya na-ese n'elu na-abịa na mbụ, mana yana flexbox nke ahụ abụghịzi ikpe. Melite akara ngosi ịchụpụ gị ka ọ bịa na aha modal iji dozie.
  • Nhọrọ remote(nke enwere ike iji buo ya na ntinye ọdịnaya mpụga n'ime modal) na loaded.bs.modalwepụrụ ihe omume kwekọrọ. Anyị na-akwado kama iji templating-akụkụ ndị ahịa ma ọ bụ usoro njikọ data, ma ọ bụ kpọọ jQuery.load onwe gị.
  • Jiri flexbox degharịa akụrụngwa.
  • Wepụrụ ihe fọrọ nke nta ka ọ bụrụ ndị niile >na-ahọpụta maka ịke dị mfe site na klaasị enweghị akwụ.
  • Kama HTML-kpọmkwem nhọrọ dị ka .nav > li > a, anyị na-eji iche iche klaasị maka .navs, .nav-items, na .nav-links. Nke a na-eme ka HTML gị gbanwee ka ọ na-ebute mmụba dị ukwuu.

Edegharịrị navbar kpamkpam na flexbox site na nkwado emelitere maka nhazi, nzaghachi na nhazi.

  • A na-etinye omume navbar na-anabata ugbu a na .navbarklaasị site na achọrọ .navbar-expand-{breakpoint} ebe ịhọrọ ebe ị ga-adaba navbar. Na mbụ, nke a bụ mgbanwe dị obere na nchikota achọrọ.
  • .navbar-defaultbụ ugbu a .navbar-light, ezie .navbar-darkna-anọgide otu. A chọrọ otu n'ime ihe ndị a na ụgbọ mmiri nke ọ bụla. Agbanyeghị, klaasị ndị a anaghịzi edobe background-colors; kama ha na-emetụta naanị color.
  • Navbars chọrọ ugbu a nkwupụta ndabere nke ụdị ụfọdụ. Họrọ site na akụrụngwa ndabere anyị ( .bg-*) ma ọ bụ tinye nke gị na klaasị ọkụ/inverse dị n'elu maka ịhazi ara ara .
  • Nyere ụdị flexbox, navbars nwere ike iji ngwa flexbox ugbu a maka nhọrọ nhazi dị mfe.
  • .navbar-toggledị ugbu a .navbar-togglerma nwee ụdị dị iche iche na akara n'ime (ọkwaghị atọ <span>s).
  • Wepụrụ .navbar-formklas ahụ kpamkpam. Ọ dịghịzi mkpa; kama, jiri naanị .form-inlinetinye akụrụngwa oke dị ka ọ dị mkpa.
  • Navbars anaghịzi agụnye margin-bottomma ọ bụ border-radiusna ndabara. Jiri akụrụngwa dịka ọ dị mkpa.
  • A na-emelite ihe atụ niile na-egosi navbars ka ịgụnye akara ọhụrụ.

Pagination

  • Jiri flexbox degharịa akụrụngwa.
  • Klas ndị doro anya ( .page-item, .page-link) ka achọrọ ugbu a na ụmụ ụmụ .paginations
  • Wepụrụ .pagerakụrụngwa kpamkpam n'ihi na ọ dị ntakịrị karịa bọtịnụ ndetu ahaziri.
  • klaasị doro anya, .breadcrumb-item, chọrọ ugbu a na ụmụ ụmụ .breadcrumbs

Akara na baajị

  • Ejikọtara .labelna .badgeiji mebie na <label>mmewere ma mee ka ihe ndị metụtara ya dị mfe.
  • Agbakwunyere .badge-pilldị ka ihe mgbanwe maka anya “ọgwụ” gbara okirikiri.
  • A naghị ebugharị baajị na-akpaghị aka na otu ndetu na ihe ndị ọzọ. Achọrọ klaasị ịba uru maka nke ahụ.
  • .badge-defaultEwetula ma .badge-secondarytinye ya na klaasị mgbanwe akụrụngwa ejiri ebe ọzọ.

Panel, thumbnails, na olulu mmiri

Etufuru kpamkpam maka akụrụngwa kaadị ọhụrụ.

Ogwe

  • .panelka .card, ejiri flexbox arụ ya ugbu a.
  • .panel-defaultwepụrụ na enweghị nnọchi.
  • .panel-groupwepụrụ na enweghị nnọchi. .card-groupabụghị nnọchi, ọ dị iche.
  • .panel-headingka.card-header
  • .panel-titleka .card-title. Dabere n'ọdịdị ịchọrọ, ị nwekwara ike iji isi ihe ma ọ bụ klaasị (dịka <h3>, .h3) ma ọ bụ ihe nkwuwa okwu ma ọ bụ klaasị (dịka <strong>, <b>, .font-weight-bold). Rịba ama na .card-title, ebe aha ya bụ aha ya, na-emepụta ọdịdị dị iche karịa .panel-title.
  • .panel-bodyka.card-body
  • .panel-footerka.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, ma .panel-dangerwepụrụ ya maka .bg-, .text-, na .borderakụrụngwa emepụtara na $theme-colorsmap Sass anyị

Ọganihu

  • Jiri akụrụngwa dochie .progress-bar-*klaasị gburugburu .bg-*. Dị ka ihe atụ, class="progress-bar progress-bar-danger"na-aghọ class="progress-bar bg-danger".
  • Dochiri .activemaka ogwe ọganihu animated na .progress-bar-animated.
  • Mechie akụkụ ahụ niile iji mee ka imewe na nhazi dị mfe. Anyị nwere ụdị dị ole na ole ka ị ga-ewepụ, ihe ngosi ọhụrụ na akara ngosi ọhụrụ.
  • CSS niile enwebeghị ọnụ ma nyegharịa aha ha, na-ahụ na etinyere klaasị ọ bụla na prefixed .carousel-.
    • Maka ihe carousel, .next, .prev, .left, ma .rightdị ugbu a .carousel-item-next, .carousel-item-prev, .carousel-item-left, na .carousel-item-right.
    • .itemdịkwa ugbu a .carousel-item.
    • Maka njikwa gara aga/ na-esote, .carousel-control.rightma .carousel-control.leftdị ugbu a .carousel-control-nextna .carousel-control-prev, nke pụtara na ha anaghị achọkwa klas ntọala akọwapụtara.
  • Wepụrụ ụdị niile na-anabata ya, na-aga n'ihu na akụrụngwa (dịka ọmụmaatụ, na-egosi nkọwa okwu na ụfọdụ ebe nlele) na ụdị omenala dị ka achọrọ.
  • Oyiyi ewepụrụ na-agafe maka onyonyo dị n'ime ihe carousel, na-ebugharị na akụrụngwa.
  • Tweaked ihe atụ Carousel iji tinye akara ọhụrụ na ụdị.

Tebụl

  • E wepụrụ nkwado maka tebụl akwụ akwụrụ. A na-eketa ụdị tebụl niile na v4 maka ndị na-ahọpụta ndị dị mfe.
  • Ụdị tebụl dị iche agbakwunyere.

Ngwa ọrụ

  • Gosipụta, zoro ezo na ndị ọzọ:
    • Emere ka ngwa ngosi na-anabata (dịka, .d-nonena d-{sm,md,lg,xl}-none).
    • Wepụrụ ọtụtụ .hidden-*ngwa maka ngwa ngosi ọhụrụ . Dị ka ihe atụ, kama .hidden-sm-up, jiri .d-sm-none. A gbanwegharịrị aha ndị .hidden-printọrụ ahụ ka ọ jiri atụmatụ ịkpọ aha njirimara ngosi. Ozi ndị ọzọ n'okpuru ngalaba akụrụngwa na-anabata nke ibe a.
    • Klas agbakwunyere .float-{sm,md,lg,xl}-{left,right,none}maka ịse n'elu na-anabata ma wepụ ya .pull-leftna .pull-rightebe ọ bụ na ha anaghị arụ ọrụ .float-leftna .float-right.
  • Ụdị:
    • Etinyere ndịiche na-anabata na klaasị nhazi ederede anyị .text-{sm,md,lg,xl}-{left,center,right}.
  • Nhazi na oghere:
  • Clearfix emelitere iji wedata nkwado maka ụdị ihe nchọgharị ochie.

Ngwakọta ndị na-ere ihe nrịbama

Ndị na- ere ahịa prefix mixins nke Bootstrap 3 , bụ ndị a kwụsịrị na v3.2.0, ewepụla na Bootstrap 4. Ebe ọ bụ na anyị na-eji Autoprefixer , ha adịghịzi mkpa.

Wepụrụ ngwakọta ndị a : 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-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Akwụkwọ

Akwụkwọ anyị nwetara nkwalite n'ofe bọọdụ. Nke a bụ ala ala:

  • Anyị ka na-eji Jekyll, mana anyị nwere plugins na ngwakọta:
    • bugify.rba na-eji iji depụta nke ọma ndenye na ibe mperi ihe nchọgharị anyị .
    • example.rbbụ ndụdụ omenala nke highlight.rbngwa mgbakwunye ndabara, na-enye ohere ijikwa ihe atụ-koodu dị mfe.
    • callout.rbbụ ndụdụ omenala yiri nke ahụ, mana emebere ya maka ịkpọ oku docs anyị pụrụ iche.
    • a na-eji jekyll-toc ewepụta tebụl ọdịnaya anyị.
  • Edegharịrị ọdịnaya docs niile na Markdown (kama HTML) maka ndezi dị mfe.
  • Ahazigharịrị ibe akwụkwọ maka ọdịnaya dị mfe yana usoro ndị nwere ike ịbịaru nso.
  • Anyị si na CSS oge niile gaa SCSS iji nweta ohere nke mgbanwe Bootstrap, mixins, na ndị ọzọ.

Ngwa na-anabata

E @screen-wepụrụ mgbanwe niile na v4.0.0. Jiri media-breakpoint-up(), media-breakpoint-down(), ma ọ bụ media-breakpoint-only()Sass mixins ma ọ bụ $grid-breakpointsmaapụ Sass kama.

E wepụrụ klaasị ngwa ọrụ anyị na-anabata nke ọma maka ịkwado akụrụngwa doro anya display.

  • Ewepụla klaasị .hiddenna .showklaasị n'ihi na ha megidere jQuery $(...).hide()na $(...).show()usoro. Kama, gbalịa gbanwee [hidden]àgwà ahụ ma ọ bụ jiri ụdị inline dị ka style="display: none;"na style="display: block;".
  • Ewepụla klaasị niile .hidden-, chekwaa maka ngwa mbipụta nke akpọgharịrị aha.
    • E wepụrụ na v3:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
    • E wepụrụ na 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
  • Ejikwa .hidden-ma ọ bụ .visible-, ma ọ bụ , bipụta akụrụngwa bipụta .d-print-.
    • Aha ochie : .visible-print-block, .visible-print-inline,.visible-print-inline-block.hidden-print
    • Klas ọhụrụ : .d-print-block, .d-print-inline,.d-print-inline-block.d-print-none

Kama iji .visible-*klaasị doro anya, ị na-eme ka ihe ahụ na-ahụ anya site na ịghara izobe ya na nha ihuenyo ahụ. Ị nwere ike ijikọ otu .d-*-noneklaasị na otu .d-*-blockklaasị iji gosi mmewere naanị na etiti oge nke nha ihuenyo (dịka ọmụmaatụ .d-none.d-md-block.d-xl-nonena-egosi mmewere naanị na ọkara na ngwaọrụ buru ibu).

Rịba ama na mgbanwe na ebe nkwụsịtụ grid na v4 pụtara na ị ga-achọ ịga otu nkwụsịtụ buru ibu iji nweta otu nsonaazụ ahụ. Klas ọhụrụ na-anabata nke ọma anaghị anwa ịnabata ikpe ndị na-adịkarị obere ebe enweghị ike igosipụta visibiliti ihe dị ka otu ihe na-aga n'ihu nke nha nlele anya; Kama ị ga-achọ iji CSS omenala n'ụdị ikpe ahụ.