Source

Migrating ka taa v4 la

Bootstrap 4 ye porozɛ bɛɛ sɛbɛncogo kura ye. Yɛlɛma minnu kɔlɔsira kosɛbɛ, olu bɛ lajɛ jukɔrɔ, o kɔfɛ, fɛn kɛrɛnkɛrɛnnenw bɛ kɛ yɔrɔw la minnu bɛ tali kɛ o la.

Yɛlɛma sabatilenw

Ni an bɛ Bɔ Beta 3 la ka Taa an ka v4.0 bɔko sabatilen na, fɛn caman bɛ yen minnu bɛ kari, nka fɛn dɔw bɛ yen minnu bɛ Kɔlɔsi.

Sɛbɛnni kɛli

  • Print utilities tiɲɛnenw labɛnna. Fɔlɔ, baara kɛli ni .d-print-*kalasi ye, o tun bɛna kalansen wɛrɛ bɛɛ tiɲɛ k’a sɔrɔ i ma miiri o .d-*la. Sisan, u bɛ bɛn an ka jiracogo nafama tɔw ma ani u bɛ tali kɛ o kunnafonidilan dɔrɔn de la ( @media print).

  • Sɛbɛnni jiracogo nafama minnu bɛ sɔrɔ, olu bonyalen don walasa u ka bɛn nafamafɛn wɛrɛw ma. Beta 3 ni kɔ dɔrɔn de tun blockbɛ , inline-block, inline, ani none. Stable v4 farala flex, inline-flex, table, table-row, ani table-cell.

  • sɛbɛnni ɲɛbila jiracogo ɲɛnabɔlen nanavigatɛriw kɔnɔ ni sɛbɛnni kɛcogo kura ye minnu b' a jira @page size.

Beta 3 bεε bε Yεlεma

K’a sɔrɔ Beta 2 y’an ka kari caman yeli caman ye beta dakun na, nka hali bi an bɛ dɔw sɔrɔ minnu ka kan ka ɲɛnabɔ Beta 3 bɔko kɔnɔ. O fɛn caman bɛ Kɛ n’i bɛ Beta 3 ladamu ka Bɔ Beta 2 la walima Bootstrap kɔrɔ dɔ la.

Sugu caman

  • A ye fɛn caman sɛgɛsɛgɛli kɛ minnu tɛ baara kɛ ni u $thumbnail-transitionye. An tun tɛ transition (tɛmɛsira) kɛ foyi la, o la, a tun ye extra code (kode wɛrɛ) dɔrɔn de ye.
  • npm foroko kɔnɔ, filen wɛrɛw tɛ yen tugun n’an ka source ani dist filew tɛ; n’i y’i jigi da u kan ani n’i tun bɛ an ka sɛbɛnniw boli node_modulesfoli fɛ, i ka kan k’i ka baarakɛcogo bɛrɛbɛn.

Sɛbɛnw

  • A ye ladamulenw ni kɔrɔlenw bɛɛ sɛbɛn kokura ani arajow. Sisan, u fla bɛɛ ka HTML jɔcogo bɛ Bɛn (kɛnɛma <div>ni balimakɛ <input>ani <label>) ani labɛncogo kelenw (stacked default, inline with modifier class). O b’a to an bɛ se ka labeli cogoya kɛ ka da donta cogoya kan, ka dɛmɛ nɔgɔya disabledfɛntigiya la (a tun bɛ bangebaga ka kalasi de wajibiya fɔlɔ) ani ka an ka foroko tiɲɛni dɛmɛ ka ɲɛ.

    O hukumu kɔnɔ, an ye CSS caman Changé ka ɲɛsin background-images caman ɲɛnabɔli ma custom form checkboxes ani arajow kan. Fɔlɔ, fɛn min bɔra sisan, .custom-control-indicatoro tun bɛ ni kɔkanna kulɛri, gradient ani SVG taamasiyɛn ye. Ka kɔkanna jiginni kɛ ka kɛɲɛ ni i yɛrɛ sago ye, o kɔrɔ tun ye k’o bɛɛ wuli tuma o tuma n’i mago tun bɛ ka kelen dɔrɔn Changer. Sisan, an bɛ .custom-control-label::beforeka fa ni gradient ani .custom-control-label::afterhandles icon.

    Walasa ka ladamu sɛgɛsɛgɛli kɛ inline kɔnɔ, i ka fara .custom-control-inline.

  • Sugandili kura donna butɔni kuluw kama minnu sinsinnen bɛ dontaw kan. Sani [data-toggle="buttons"] { }an ka baara Kɛ ni cogoya ni kɛcogo ye, an bɛ baara Kɛ ni fɛn ye datamin bɛ Kɛ JS taamacogo dɔrɔn de kama ani ka an jigi Da .btn-group-togglekalasi kura kan cogoya la.

  • A bɔra .col-form-legendka ɲɛsin dɔ ma min ɲɛnabɔra dɔɔnin .col-form-label. O cogo la .col-form-label-smani a .col-form-label-lgbɛ se ka baara kɛ ni <legend>fɛnw ye ni nɔgɔya ye.

  • Custom file inputs ye fɛn dɔ sɔrɔ u ka $custom-file-textSass variable na. A tɛ Sass karti nested ye tugun wa sisan a bɛ fanga Di sɛrɛ kelen dɔrɔn de ma— Browsebutɔni i n’a fɔ o de ye sisan pseudo-element kelenpe ye min bɛ Bɔ an ka Sass la. Sɛbɛn in Choose filebɛ bɔ sisan .custom-file-label.

Donanw kuluw

  • Donan kulu farankanw ye sisan kɛrɛnkɛrɛnnenya la u bilali ye ka kɛɲɛ ni donta dɔ ye. An ye jigin .input-group-addonani .input-group-btnka kalan kura fila kɛ, .input-group-prependani .input-group-append. I ka kan ka baara kɛ ni append walima prepend ye k’a jɛya sisan, ka an ka CSS fanba nɔgɔya. Append walima prepend kɔnɔ, i ka butɔni bila i n’a fɔ u bɛna kɛ cogo min na yɔrɔ wɛrɛ la, nka i ka sɛbɛnniw siri .input-group-text.

  • Sisan, dantigɛli kɛcogoyaw bɛ dɛmɛ, i n’a fɔ donnakow caman (hali n’i bɛ se ka doncogo kelen dɔrɔn de dafa kulu kelen-kelen bɛɛ la).

  • Sizing classes ka kan ka kɛ bangebaga kan .input-groupwa a man kan ka kɛ foroko element kelen-kelenw kan.

Beta 2 bεε bε Yεlεma

K’an to beta la, an b’a ɲini ka fɛn caman Changements breaking si sɔrɔ. Nka, kow tɛ taa ɲɛ tuma bɛɛ i n’a fɔ a labɛnna cogo min na. Yɛlɛma karilenw bɛ duguma minnu ka kan ka to i hakili la n’i bɛ bɔ Beta 1 la ka taa Beta 2 la.

Ka kari

  • A bɔra $badge-colorfɛn caman sɛgɛsɛgɛli la ani a baaracogo kan .badge. An bɛ baara Kɛ ni kulɛri danfara baarakɛcogo ye walasa ka pick a colorbased on the background-color, o la variable tɛ mako ɲɛ.
  • Tɔgɔ kura donna grayscale()baarakɛcogo la walasa gray()ka bɛnbaliya tiɲɛ ni CSS native grayscalefilter ye.
  • Tɔgɔ caman dira .table-inverse, .thead-inverse, ani .thead-defaultka taa .*-darkani .*-light, ka bɛn an ka kulɛriw ma minnu bɛ kɛ yɔrɔ wɛrɛw la.
  • Tabali minnu bɛ jaabi di, olu bɛ kalasiw lawuli sisan grid breakpoint kelen-kelen bɛɛ kama. nin bɛ kari ka bɔ Beta 1 la k' a sɔrɔ .table-responsivei bɛ baara kɛ ni min ye , o ka ca ni .table-responsive-md. Aw bɛ se ka baara kɛ ni a ye sisan .table-responsivewalima ni aw .table-responsive-{sm,md,lg,xl}mago bɛ a la.
  • Bower dɛmɛni bilala ka da a kan pake ɲɛmɔgɔ bɛ ban ka ɲɛsin fɛɛrɛ wɛrɛw ma (misali la, Yarn walima npm). Aw ye bower/bower#2298 lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ.
  • Bootstrap bɛ jQuery 1.9.1 walima a sanfɛta de wajibiya hali bi, nka i bɛ ladilikan sɔrɔ ka baara kɛ ni version 3.x ye bawo v3.x ka dɛmɛnanw ye Bootstrap bɛ minnu dɛmɛ ka fara v3.x kan lakana labɛnni dɔw bɛ yen.
  • .form-control-labelA ye kalasi min ma baara kɛ , o bɔ yen. N'i ye baara Kɛ ni nin kàlan in ye, o tùn ye .col-form-labelkalasi duplicate ye min bɛ vertically centered a <label>n'a bɛ tali Kɛ input in horizontal form layouts la.
  • Yɛlɛma don ka color-yiqbɔ mixin dɔ la min tun bɛ colornafolomafɛnw na ka taa baarakɛcogo la min bɛ nafa dɔ segin, min b’a to i bɛ se ka baara kɛ n’a ye CSS nafolomafɛn o nafolomafɛn na. Misali la, sanni color-yiq(#000)i ka sɛbɛn , i tun bɛna sɛbɛnni kɛ color: color-yiq(#000);.

Yɔrɔ kolomaw

  • pointer-eventsA ye baarakɛcogo kura Dabɔ modɛliw kan. Kɛnɛma .modal-dialogbɛ tɛmɛ ko kɛlenw fɛ ni pointer-events: nonefor custom click handling (o b’a to a bɛ se ka dɔrɔn ka lamɛnni kɛ kan .modal-backdropfor any clicks), ka sɔrɔ ka counteract it for the actual .modal-contentwith pointer-events: auto.

Farankan

Nin ye tikiti fɛnbaw ye aw bɛna a fɛ ka minnu dɔn ni aw bɛ bɔ v3 la ka taa v4 la.

Navigatɛri dɛmɛni

  • A ye IE8, IE9, ani iOS 6 dɛmɛni bila. v4 ye sisan IE10+ ni iOS 7+ dɔrɔn de ye. Siti minnu mago bɛ o fila la kelen na, baara kɛ ni v3 ye.
  • A ye dɛmɛ ofisiyali dɔ fara Android v5.0 Lollipop ka Browser ani WebView kan. Android Browser ni WebView bɔko fɔlɔw bɛ to dɔrɔn ka dɛmɛ sɔrɔ cogo la min tɛ foroba ye.

Yɛlɛma donna diɲɛ kɔnɔ

  • Flexbox bɛ baara kɛ ni a daminɛ ye. A bɛɛ lajɛlen na o kɔrɔ ye ka yɔrɔ janya floats la ani ka dɔ fara an ka components kan.
  • A jiginna ka bɔ Less la ka taa Sass la an ka source CSS filew kama.
  • A jiginna ka bɔ pxka na remi n’a fɔ an ka CSS yɔrɔ fɔlɔ, hali ni pixelw bɛ baara kɛ hali bi kunnafonidilanw ɲininkaliw ni grid kɛcogo la bawo minɛnw lajɛyɔrɔw tɛ nɔ bila suguya hakɛ la.
  • Duniya kɔnɔ sɛbɛnnibolow hakɛ cayara ka bɔ 14pxka se 16px.
  • A ye grid tiers (jatebɔlanw) labɛn kokura walasa ka sugandi duurunan fara a kan (ka minɛn misɛnninw ladɛrɛsi 576pxani minnu bɛ duguma) ani ka infix ( -xsinfix) bɔ o kalasiw la. Misali la: .col-6.col-sm-4.col-md-3.
  • A ye sugandili barokun danfaralen bila a nɔ na ni sugandiliw ye minnu bɛ se ka labɛn SCSS fɛn caman sɛgɛsɛgɛli fɛ (misali la, $enable-gradients: true).
  • Build system overhauled ka baara kɛ ni npm sɛbɛnniw ye minnu bɛ tugu ɲɔgɔn na Grunt nɔ na. Aw package.jsonye sɛbɛnniw bɛɛ lajɛ, walima an ka porozɛ readme sigida yiriwali magow kama.
  • Bootstrap baarakɛcogo min tɛ jaabi ye, o tɛ dɛmɛ tugun.
  • A ye ɛntɛrinɛti Customizer bila ka ɲɛsin sigicogo sɛbɛnw ma minnu ka bon kosɛbɛ ani ka fɛnw jɔ minnu bɛ kɛ ka kɛɲɛ ni mɔgɔw sago ye.
  • A ye nafalan kalasi kura tan ni caman fara a kan CSS nafolo-nafa fila jɛlenw kama ani margin/padding spacing shortcuts.

Grid sitɛmu

  • A jiginna ka taa flexbox la.
    • A ye dɛmɛ fara flexbox kan grid mixins kɔnɔ ani kalan minnu ɲɛfɔlen don ka kɔn.
    • I n’a fɔ flexbox yɔrɔ dɔ, dɛmɛni tun bɛ a kɔnɔ ka ɲɛsin vertical ani horizontal alignment classes ma.
  • Grid kalasi tɔgɔ kura ani grid tier kura.
    • smA ye grid tier kura dɔ fara a kan jukɔrɔ 768pxwalasa ka granular control caman sɔrɔ. An bɛ sisan xs, sm, md, lg, ani xl. O fana kɔrɔ ye ko tier bɛɛ bumped up nivo kelen (o .col-md-6la v3 kɔnɔ a .col-lg-6bɛ v4 kɔnɔ sisan).
    • xsgrid classes bεε bεε bεε bε bεn a ma ko infix ka bεnkansεbεn jira ka ɲɛ ko u bε daminε ka styles (dakunw) waleya min-width: 0ni a tε pixel value (pixel) hakɛ sigilen ye. Sani .col-xs-6, a bɛ kɛ sisan .col-6. Grid tier tɔw bɛɛ bɛ infix de wajibiya (misali la, sm).
  • Grid hakɛw, mixins ani variables kurayali.
    • Grid gutters bɛ Sass karti sɔrɔ sisan walasa i ka se ka gutterw bonya kɛrɛnkɛrɛnnenw jira kariyɔrɔ kelen-kelen bɛɛ la.
    • Updated grid mixins ka baara kɛ ni make-col-readyprep mixin ye ani a make-colka set the flexani max-widthfor individual column sizing.
    • Yɛlɛma donna grid system media ɲininkali breakpoints ani container widths walasa ka jatebɔ kɛ grid tier kura kan ani ka a jira ko kolonw bɛ tila cogo kelen na ni 12u max width ye.
    • Grid breakpoints ani container widths bɛ ɲɛnabɔ sisan Sass kartiw fɛ ( $grid-breakpointsani $container-max-widths) sanni ka kɛ fɛn caman ɲɔgɔnna danfaralenw ye. Olu bɛ @screen-*fɛn caman bɛrɛbɛrɛw bila u nɔ na ani k’a to i ka se ka grid tiers (jatebɔlanw) labɛn ka ɲɛ.
    • Kunnafonidila ɲininkaliw fana Changé. Sanni an ka segin an ka kunnafonidilanw ɲininkali fɔlenw kan ni nafa kelen ye waati kelen-kelen bɛɛ la, an bɛ sisan @include media-breakpoint-up/down/only. Sisan, sanni i ka sɛbɛnni kɛ @media (min-width: @screen-sm-min) { ... }, i bɛ se ka sɛbɛnni kɛ @include media-breakpoint-up(sm) { ... }.

A yɔrɔw

  • Panɛliw, ja fitininw ani kɔlɔnw binna walasa ka yɔrɔ kura dɔ sɔrɔ min bɛ fɛn bɛɛ lajɛlen na, n’o ye kartiw ye .
  • A ye Glyphicons taamasiyɛn sɛbɛnnibolo fili. Ni aw mago bɛ taamasiyɛnw na, sugandi dɔw ye:
  • Affix jQuery ka fɛnsɛbɛnni bɔra.
    • An bɛ a fɔ aw ye ko aw ka baara kɛ position: stickyo nɔ na. Aw ye HTML5 Aw ye sɛbɛn lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ ani ka polifilɛli ladilikan kɛrɛnkɛrɛnnenw sɔrɔ. Ladilikan dɔ ye ka baara kɛ ni @supportssariya dɔ ye walasa k’a waleya (misali la, @supports (position: sticky) { ... })/
    • Ni i tun bɛ baara kɛ ni Affix ye walasa ka fɛn wɛrɛw kɛ, minnu tɛ positioncogoyaw ye, a bɛ se ka kɛ ko polifiliw tɛna i ka baarakɛcogo dɛmɛ. O baara suguw sugandicogo dɔ ye ScrollPos-Styler gafemarayɔrɔ sabanan ye.
  • A ye pager component (yɔrɔ) Dòn i n'a fɔ a tùn ye 'butɔni ye min tùn bɛ Labɛn dɔɔnin dɔɔnin.
  • A ye fɛnw bɛɛ lajɛlen labɛn kokura walasa ka baara kɛ ni kalan sugandilanw ye minnu tɛ sigiyɔrɔma caman ye sanni ka baara kɛ ni denmisɛnw sugandili kɛrɛnkɛrɛnnenw ye minnu ka ca kojugu.

Ka kɛɲɛ ni component ye

Nin lisi in bɛ fɛnba dɔw jira minnu bɛ fɛn caman Changements par component (yɔrɔ) minnu bɛ v3.xx ni v4.0.0 cɛ.

Segin ka baara kɛ

Bootstrap 4 kura ye Reboot ye , n’o ye cogoya kura ye min bɛ jɔ Normalize kan n’an yɛrɛ ka hakilinata-jɔ-cogo dɔw ye minnu bɛ Se ka Lasegin u cogo kɔrɔ la. Sugandili minnu bɛ jira nin dosiye in kɔnɔ, olu bɛ baara kɛ ni fɛnw dɔrɔn de ye—kalanso si tɛ yan. O b’an ka reset cogoyaw Bɔ an ka component cogoyaw la walasa ka fɛɛrɛ dɔ Kɛ min ka ca ni modulari ye. Reset nafama dɔw minnu bɛ o la olu ye box-sizing: border-boxfɛn caman yeli ye, ka bɔ emka taa remunitw la fɛn caman kan, link styles, ani form element reset caman.

Typografi (Typografi) (Typographie).

  • .text-A ye nafalanw bɛɛ wuli ka taa _utilities.scssdosiye kɔnɔ.
  • A Dònna .page-headeri n'a fɔ, dancɛ kɔ fɛ, a cogoyaw bɛɛ bɛ Se ka Kɛ nafamafɛnw fɛ.
  • .dl-horizontalye a fili. O nɔ na, ​​aw bɛ baara kɛ ni .rowkan <dl>ani ka baara kɛ ni grid column classes (walima mixins) ye a <dt>ni <dd>denmisɛnw kan.
  • Custom <blockquote>styling jiginna ka taa kalanw na— .blockquoteani .blockquote-reversemodifier.
  • .list-inlinesisan a b’a ɲini a denw fɛ u ka fɛnw lisi kɛ ni .list-inline-itemkalan kura ye min bɛ tali kɛ u la.

Jaw

  • A tɔgɔ jiginna .img-responsiveka kɛ .img-fluid.
  • A tɔgɔ jiginna .img-roundedka kɛ.rounded
  • A tɔgɔ jiginna .img-circleka kɛ.rounded-circle

Tabali minnu bɛ yen

  • Sugandili in misaliw bɛɛ bɛ >ɲini ka Bɔ yen, o kɔrɔ ye ko tabali minnu bɛ 'kɔnɔ, olu bɛna cogoyaw ciyɛnta u bangebagaw fɛ u yɛrɛma sisan. O bɛ an ka sugandilikɛlaw nɔgɔya kosɛbɛ ani fɛn minnu bɛ se ka kɛ ka kɛɲɛ ni mɔgɔw sago ye.
  • Tabali minnu bɛ jaabi di, olu tɛ fɛn dɔ wajibiya tugun min bɛ kɛ ka fɛnw siri. O nɔ na, ​​i ka .table-responsivekininbolo don dɔrɔn <table>.
  • A tɔgɔ jiginna .table-condensedka kɛ walasa a ka .table-smkɛ cogo kelen na.
  • .table-inverseA ye sugandi kura dɔ fara a kan .
  • Tabali kuncɛlanw sɛmɛntiyalanw farala a kan: .thead-defaultani .thead-inverse.
  • A tɔgɔ jiginna contextual classes la walasa ka .table--prefix sɔrɔ. o de kama .active, .success, .warning, .dangerani .infoka .table-active, .table-success, .table-warning, .table-dangerani .table-info.

Sɛbɛnw

  • Eleman min jiginna, o bɛ segin ka kɛ _reboot.scssdosiye kɔnɔ.
  • A tɔgɔ jiginna .control-labelka kɛ .col-form-label.
  • Tɔgɔ caman tigɛra .input-lgani .input-smka taa .form-control-lgani .form-control-sm, o cogo kelen na.
  • Kalansow bilala .form-group-*nɔgɔya kosɔn. Baara kɛ ni .form-control-*kalanw ye o nɔ na sisan.
  • A Dònna .help-blockk'a Blà a nɔ na ni .form-textfor block-level help text ye. Walasa ka dɛmɛ sɛbɛn inline ani sugandi wɛrɛw sɔrɔ minnu bɛ se ka wuli ka bɔ u nɔ na, ​​baara kɛ ni nafalanw ye i n’a fɔ .text-muted.
  • A binna .radio-inlineani .checkbox-inline.
  • Consolidated .checkboxani .radiointo .form-checkani .form-check-*kalasi suguya caman.
  • Formulaire horizontaux minnu bɛ labɛn kokura:
    • A ye .form-horizontalkalan wajibiyalen bila.
    • .form-grouptɛ cogoyaw waleya tugun ka bɔ .rowvia mixin la, o la .rowsisan a wajibiyalen don grid horizontalw labɛncogo la (misali la, <div class="form-group row">).
    • .col-form-labelA ye kalasi kura fara a kan vertically center labels kan ni .form-controls ye.
    • A ye kura fara a kan .form-rowfor compact form layouts ni grid classes (swap your .rowfor a .form-rowani go).
  • A farala ladamu sɛbɛnw dɛmɛni kan (ka ɲɛsin jatebɔyɔrɔw, arajow, sugandiliw, ani dosiye dontaw ma).
  • A .has-errorbɛ , .has-warning, ani .has-successkalasiw bila HTML5 foroko sɛgɛsɛgɛli la CSS'w :invalidni :validpseudo-kalansow fɛ.
  • A tɔgɔ jiginna .form-control-staticka kɛ .form-control-plaintext.

Butɔnw

  • A tɔgɔ jiginna .btn-defaultka kɛ .btn-secondary.
  • A ye .btn-xskalasi Dòn pewu i n'a fɔ .btn-sma ka dɔgɔ kosɛbɛ ka Tɛmɛ v3 ta kan.
  • jQuery plugin ka butɔni cogoya min bɛ cogoya la, button.jso bɔra. O la, $().button(string)ani $().button('reset')fɛɛrɛw fana bɛ yen. An bɛ ladilikan di ka baara kɛ ni JavaScript ladamulen fitinin dɔ ye o nɔ na, ​​min bɛna nafa sɔrɔ ka i yɛrɛ minɛ i b’a fɛ cogo min na tigitigi.
    • A kɔlɔsi ko plugin in ka fɛn tɔw (butɔnw jatebɔyɔrɔw, butɔni arajow, butɔni kelen-kelenw) maralen bɛ v4 kɔnɔ.
  • Butɔnw Changer' [disabled]ka kɛ :disabledi n'a fɔ IE9+ bɛ dɛmɛ :disabledcogo min na . nka fieldset[disabled]hali bi a ka kan bawo foroforobaciyɛn nafamaw bɛ buggy hali bi IE11 kɔnɔ .

Butɔn kulu

  • A ye component sɛbɛn kokura ni flexbox ye.
  • A bɔra .btn-group-justified. I n' a fɔ a nɔnabila i bɛ se ka baara kɛ ni <div class="btn-group d-flex" role="group"></div>a ye i n' a fɔ fɛn minnu bɛ fɛnw lamini ni .w-100.
  • A ye .btn-group-xskalan bila pewu ka bɔli kɛ .btn-xs.
  • Butɔn kuluw ni ɲɔgɔn cɛ danfara jɛlen bɔ butɔni baarakɛminɛnw kɔnɔ; baara kɛ ni margin utilities ye sisan.
  • Sɛbɛn minnu ɲɛnabɔra walasa ka baara kɛ ni yɔrɔ wɛrɛw ye.
  • A bε Yεlεma ka Bɔ bangebagaw ka sugandiliw la ka Taa kàlan kelen-kelenw na yɔrɔw bɛɛ la, fɛn caman bεε la, a ɲɔgɔnnaw.
  • Dropdown styles nɔgɔyalenw walasa u kana ci tugun ni sanfɛla walima dugumalanw ye minnu bɛ nɔrɔ dropdown menu la.
  • Dropdowns bɛ se ka jɔ ni <div>s walima <ul>s ye sisan.
  • Segin-ka-bɔnye cogoyaw ani taamasiyɛnw walasa ka dɛmɛ nɔgɔman, jɔlen di fɛnw ma minnu bɛ jigin <a>ani <button>minnu sinsinnen bɛ fɛnw kan.
  • A tɔgɔ jiginna .dividerka kɛ .dropdown-divider.
  • Fɛn minnu bɛ jigin sisan , olu de bɛ wajibiya .dropdown-item.
  • Dropdown toggles tɛ ɲɛfɔli jɛlen dɔ wajibiya tugun <span class="caret"></span>; nin bɛ di sisan a yɛrɛma CSS'w fɛ ::afteron .dropdown-toggle.

Grid sitɛmu

  • 576pxA ye jatebɔlan kura dɔ fara a kan i n' a fɔ sm, o kɔrɔ ye ko sisan jatebɔsen duuru bɛ ​​yen ( xs, sm, md, lg, ani xl).
  • A ye jaabi-jaabi-yɔrɔ-ko-ɲɛnabɔli-klasiw tɔgɔ caman Da ka Bɔ .col-{breakpoint}-{modifier}-{size}ka Taa .{modifier}-{breakpoint}-{size}jatebɔ-kalanso nɔgɔmanw na.
  • A ye push ani pull modifier kalanw bila ka ɲɛsin flexbox-powered orderkalasi kura ma. Misali la, .col-8.push-4ani nɔ na .col-4.pull-8, ​​i tun bɛna baara kɛ .col-8.order-2ni ani .col-4.order-1.
  • A ye flexbox utility classes fara a kan grid system ani components kan.

Jɛkuluw tɔgɔw sɛbɛn

  • A ye component sɛbɛn kokura ni flexbox ye.
  • A a.list-group-itembɛ bila a nɔ na ni kalasi jɛlen ye, .list-group-item-action, ka ɲɛsin styling link ani button versions ma list group fɛnw na.
  • Kalanso farala a kan .list-group-flushwalasa ka baara kɛ ni kartiw ye.
  • A ye component sɛbɛn kokura ni flexbox ye.
  • Ni an ye 'yɔrɔ Di flexbox ma, a ka c'a la, 'jyɛnnatigɛ-sɛbɛnw 'kɔnɔ 'kɔnɔnafili bɛ Tiɲɛ bari an tɛ baara Kɛ ni flot (floti) ye tugun. Floated content bɛ na fɔlɔ, nka ni flexbox ye o tɛ kɛ tugun. Update i ka dismiss icons ka na kɔfɛ modal titles ka fix.
  • Sugandili remote(min tun bɛ se ka kɛ ka kɛnɛma kɔnɔkow doni a yɛrɛma ani k’u pikiri modal kɔnɔ) ani ko kɛlen min bɛ bɛn o ma loaded.bs.modal, olu bɔra. An bɛ ladilikan di o nɔ na ka baara kɛ ni kliyan fan fɛ jatebɔlan ye walima kunnafoni sirili karamɔgɔya ye, walima ka jQuery.load wele i yɛrɛ ye.
  • A ye component sɛbɛn kokura ni flexbox ye.
  • A ye sugandiliw bɛɛ lajɛlen bila ka surunya >walasa ka cogoya nɔgɔman sɔrɔ kalanw fɛ minnu tɛ nested ye.
  • HTML-kɛrɛnkɛrɛnnenya la sugandiliw nɔ na i n’a fɔ .nav > li > a, an bɛ baara Kɛ ni kalasi danfaralenw ye .navs, .nav-items ani .nav-links kama. O b’a To i ka HTML bɛ Se ka Labɛn ka Tɛmɛ k’a sɔrɔ a bɛ na ni dɔ farali ye.

Navbar sɛbɛnna kokura pewu flexbox kɔnɔ ni dɛmɛ ɲɛnabɔlen ye ɲɔgɔndɛmɛ, jaabiw, ani mɔgɔw labɛnni na.

  • Navbar kɛcogo minnu bɛ jaabi di, olu bɛ waleya sisan .navbarkalasi la wajibiyalen .navbar-expand-{breakpoint} fɛ i bɛ yɔrɔ min sugandi i bɛ navbar dabɔ yɔrɔ min na. Fɔlɔ nin tun ye Less variable modification ye wa a tun bɛ recompiling (daɲɛw labɛncogo kura) de wajibiya.
  • .navbar-defaultye sisan .navbar-light, hali ni .navbar-darka bɛ to a cogo la. Olu dɔ wajibiyalen don navbar kelen-kelen bɛɛ kan. Nka, o kalasi ninnu tɛ s sigi tugun background-color; o nɔ na u jɔyɔrɔba ye nɔ bila dɔrɔn color.
  • Navbarw bɛ ɲini sisan kɔkanna fɔli sugu dɔ la. Sugandili kɛ an ka kɔkanna nafalanw na ( .bg-*) walima ka i yɛrɛ ta sigi ni yeelen/inverse classes ye sanfɛ for mad customization .
  • Ni flexbox cogoyaw dira, navbarw bɛ se ka baara kɛ sisan ni flexbox nafalanw ye walasa ka ɲɔgɔndan sugandiliw nɔgɔya.
  • .navbar-toggleye sisan .navbar-togglerani a cogoyaw ni kɔnɔna taamasiyɛnw tɛ kelen ye ( <span>s saba tɛ tɛmɛ).
  • A ye .navbar-formkalan bila pewu. A tɛ wajibiya tugun; o nɔ na, ​​baara kɛ dɔrɔn ni .form-inlinemargin utilities ye ani ka baara kɛ ni a ye i n’a fɔ a mago bɛ cogo min na.
  • Navbars tɛ don a kɔnɔ tugun margin-bottomwalima border-radiuska da a kan. Baara kɛ ni nafamafɛnw ye i n’a fɔ a mago bɛ cogo min na.
  • Misali bɛɛ minnu bɛ navbarw jira, olu b’u sɛmɛntiya walasa ka taamasiyɛn kuraw don u kɔnɔ.

Ɲɛjirali sɛbɛnw

  • A ye component sɛbɛn kokura ni flexbox ye.
  • Kalanso jɛlenw ( .page-item, .page-link) wajibiyalen don sisan .paginations bɔnsɔnw kan
  • A ye .pagercomponent (yɔrɔ) Dòn pewu i n'a fɔ a tùn ka dɔgɔ dɔɔnin ni customized outline buttons (labɛncogo butɔni) ye.
  • Kalanso jɛlen dɔ, .breadcrumb-item, bɛ ɲini sisan .breadcrumbs bɔnsɔnw kan

Labelw ni badgew

  • Tɔgɔ kura donna .labelka .badgedisambiguate ka bɔ <label>element la.
  • A ye .badgecomponent (yɔrɔ) Dòn k’a sababu Kɛ a ni labels (labeliw) bɛ Taa ɲɔgɔn fɛ cogo min na. Baara kɛ ni .badge-pillfɛn caman sɛmɛntiyalan ye ɲɔgɔn fɛ ni labeli yɔrɔ ye o nɔ na o ɲɛda bulama in kama.
  • Badgew tɛ wuli u yɛrɛma tugun lisi kuluw kɔnɔ ani yɔrɔ wɛrɛw la. Nafama-kalansow de wajibiyalen don sisan o kama.
  • .badge-defaulta bɔra ka .badge-secondaryfara a kan walasa ka bɛn component modifier classes ma minnu bɛ kɛ yɔrɔ wɛrɛw la.

Panɛliw, ja fitininw ani kɔlɔnw

A bɔra pewu ka ɲɛsin karti kura yɔrɔ ma.

Panɛliw

  • .panelka .card, sisan a jɔlen bɛ ni flexbox ye.
  • .panel-defaultbɔra a la ani a tɛ se ka bila a nɔ na.
  • .panel-groupbɔra a la ani a tɛ se ka bila a nɔ na. .card-grouptɛ a nɔnabila ye , a tɛ kelen ye .
  • .panel-headingfɛ.card-header
  • .panel-titleka .card-title. Ka kɛɲɛ ni ɲɛda cogoya ɲininen ye, i bɛ se fana ka baara kɛ ni kuncɛyɔrɔw walima kalansenw ye (misali <h3>la , .h3) walima fɛnw walima kalansenw (misali <strong>la , <b>, .font-weight-bold). A kɔlɔsi ko .card-title, hali ni a tɔgɔ bɛ o cogo kelen na, a bɛ ɲɛda cogoya wɛrɛ lase ni .panel-title.
  • .panel-bodyfɛ.card-body
  • .panel-footerfɛ.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, ani .panel-dangeru bɔra .bg-, .text-, ani .bordernafalanw kama minnu bɔra an ka $theme-colorsSass karti la.

Ɲɛfɛtaali

  • A ye contextual .progress-bar-*classes (dakunw ka kalanw) bila u nɔ na ni .bg-*nafalanw ye. Misali la, class="progress-bar progress-bar-danger"a bɛ kɛ class="progress-bar bg-danger".
  • A bɛ wuli .activeka ɲɛsin ɲɛtaa baraw ɲɛnamaw ma ni .progress-bar-animated.
  • A ye a yɔrɔ bɛɛ labɛn kokura walasa ka dilancogo n’a kɛcogo nɔgɔya. An bɛ cogoya caman sɔrɔ i bolo ka tɛmɛ, taamasiyɛn kuraw, ani taamasiyɛn kuraw.
  • CSS bɛɛ kɛra un-nested ye ani tɔgɔ caman wɛrɛw kɛra, k’a jira ko kalasi kelen-kelen bɛɛ bɛ daminɛ ni .carousel-.
    • Karɔsi fɛnw kama, .next, .prev, .left, ani .rightbɛ sisan .carousel-item-next, .carousel-item-prev, .carousel-item-left, ani .carousel-item-right.
    • .itemye fana sisan .carousel-item.
    • For prev/next controls, .carousel-control.rightand .carousel-control.leftare now .carousel-control-nextand .carousel-control-prev, o kɔrɔ ye ko u tɛ basigi kalasi kɛrɛnkɛrɛnnen de wajibiya tugun.
  • A ye jaabi cogoya bɛɛ bɔ yen, ka nafalanw bila kɔfɛ (misali la, ka sɛbɛnniw jira filɛlikɛyɔrɔ dɔw kan) ani cogoya ladamulenw i n’a fɔ a mago bɛ cogo min na.
  • Jaw bɔlenw bɛ wuli ka bɔ jaw la minnu bɛ carousel fɛnw kɔnɔ, ka bila kɔfɛ ka taa nafamafɛnw na.
  • Tweaked Carousel misali la walasa ka markup kura ni cogoyaw don a kɔnɔ.

Tabali minnu bɛ yen

  • A ye dɛmɛ bɔ tabali nested styled la. Tabali cogoyaw bɛɛ bɛ ciyɛn ta sisan v4 kɔnɔ sugandili nɔgɔmanw kama.
  • A ye inverse table variant fara a kan.

Nafamafɛnw

  • A jira, dogolen ani fɛn wɛrɛw:
    • A kɛra jiracogo nafamafɛnw ye minnu bɛ jaabi di (misali la, .d-noneani d-{sm,md,lg,xl}-none).
    • a ye nafamafɛnw fanba bɔ jiralan nafamafɛn.hidden-* kuraw kama . Misali la, , baara kɛ ni . A ye nafalanw tɔgɔ caman wɛrɛ da walasa ka baara kɛ ni jiracogo nafama tɔgɔdacogo ye. Kunnafoni wɛrɛw bɛ sɔrɔ Responsive utilities yɔrɔ la nin ɲɛ in kan..hidden-sm-up.d-sm-none.hidden-print
    • A .float-{sm,md,lg,xl}-{left,right,none}ye kalanw fara a kan ka ɲɛsin jaabiw ma ani ka bɔ .pull-leftani .pull-rightkabini u ye redundant ye ka .float-leftani .float-right.
  • Ka sɛbɛen masin na:
    • jaabi caman farala an ka sɛbɛnniw labɛncogo kalanw .text-{sm,md,lg,xl}-{left,center,right}kan .
  • Labɛnni ni ɲɔgɔn cɛ:
    • A ye jaabi-marge kura fara a kan ani padding utilities fan bɛɛ fɛ, ka fara vertical ani horizontal shorthands kan.
    • A farala kurunba kan flexbox nafamafɛnw kan .
    • A jiginna .center-blockka taa kalan kura .mx-autola.
  • Clearfix kurayara walasa ka dɛmɛ bɔ navigatɛri kɔrɔw la.

Feerekɛla ka ɲɛbila mixins

Bootstrap 3 ka feerekɛlaw ka ɲɛbila mixins, minnu tun ma baara kɛ v3.2.0 kɔnɔ, olu bɔra Bootstrap 4. Kabini an bɛ baara kɛ ni Autoprefixer ye, u tɛ wajibiya tugun.

A ye nin mixin ninnu bɔ : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, , animation-iteration-count, animation-name, , animation-timing-function, backface-visibility, , box-sizing, content-columns, , hyphens, opacity, , perspective, , perspective-origin, rotate, , rotateX, rotateY, , scale, , scaleX, scaleY, , skew, transform-origin, , transition-delay, transition-duration, , transition-property, transition-timing-function, , transition-transform, translate, translate3d,user-select

Sɛbɛnw sɛbɛnni

An ka sɛbɛnw ye 'sèn Sɔrɔ 'sènfɛ-sɛbɛnw 'kɔnɔ fana. Nin ye low down ye:

  • An bɛ baara Kɛ ni Jekyll ye halibi, nka an bɛ ni plugins ye mix la:
    • bugify.rbbɛ kɛ ka sɛbɛnniw jira ka ɲɛ an ka navigatɔrɔ bugs ɲɛ kan.
    • example.rbye fork ladamu ye min bɛ highlight.rbplugin default la, min bɛ sira Di misali-kode ɲɛnabɔli nɔgɔya ma.
    • callout.rbye o ɲɔgɔnna ladamu foroko ye, nka a dabɔra an ka docs kɛrɛnkɛrɛnnenw weleli kama.
    • markdown-block.rbbɛ kɛ ka Markdown snippets jira HTML kɔnɔfɛnw kɔnɔ i n’a fɔ tabali.
    • jekyll-toc bɛ kɛ ka an ka kɔnɔkow tabali labɛn.
  • Docs kɔnɔkow bɛɛ sɛbɛnna kokura Markdown kɔnɔ (HTML nɔ na) walasa ka sɛgɛsɛgɛli nɔgɔya.
  • Ɲɛw labɛnna kokura walasa ka kunnafoni nɔgɔmanw sɔrɔ ani ka se ka gɛrɛ ɲɔgɔn na cogo min na.
  • An bɔra CSS kɔrɔlen na ka taa SCSS la walasa ka nafa bɛrɛbɛrɛ sɔrɔ Bootstrap ka fɛn caman sɛgɛsɛgɛli la, mixins ani fɛn wɛrɛw.

Nafamafɛnw minnu bɛ jaabi di

Yɛlɛma bɛɛ @screen-bɔra v4.0.0 kɔnɔ. Baara kɛ ni media-breakpoint-up(), media-breakpoint-down(), walima media-breakpoint-only()Sass mixins walima $grid-breakpointsSass karti ye o nɔ na.

An ka jaabi-danfara-kalansow bɔra ka caya ka ɲɛsin displaynafamafɛn jɛlenw ma.

  • A .hiddenni .showkalasiw Bɔra bawo u ni jQuery's $(...).hide()ni $(...).show()fɛɛrɛw bɛ ɲɔgɔn sɔsɔ. O nɔ na, ​​i k’a ɲini ka fɛn in sɛgɛsɛgɛli kɛ [hidden]walima ka baara kɛ ni inline styles ye i n’a fɔ style="display: none;"ani style="display: block;".
  • Kalanso bɛɛ .hidden-bɔra, fo sɛbɛnni nafamafɛnw minnu tɔgɔ jiginna.
    • A bɔra v3 la:.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
    • A bɔra v4 alphas kɔnɔ:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • sɛbɛnnikɛlanw tɛ daminɛ tugun ni .hidden-walima .visible-ye , nka ni .d-print-.
    • Tɔgɔ kɔrɔw: .visible-print-block, .visible-print-inline, .visible-print-inline-block, ..hidden-print
    • Kalanso kuraw: .d-print-block, .d-print-inline, .d-print-inline-block, ..d-print-none

Sanni i ka baara Kɛ ni .visible-*kalasi jɛlenw ye, i bɛ fɛn dɔ Kɛ fɛn ye min bɛ Ye ni i t’a dogo dɔrɔn o ɛkran hakɛ la. Aw bɛ se ka kalasi kelen .d-*-noneni kalasi kelen fara ɲɔgɔn kan .d-*-blockwalasa ka fɛn dɔ jira dɔrɔn ɛkran hakɛw cɛmancɛ dilen dɔ kan (misali .d-none.d-md-block.d-xl-nonela, a bɛ fɛn jira minɛn cɛmancɛw ni minɛnbaw dɔrɔn kan).

A kɔlɔsi ko bεnkan minnu bε jε ka bεnkansεbεnw ka bεnkanw na v4 kɔnɔ, o kɔrɔ ye ko i bεna Taa bεnkansεbεn kelen na ka bonya walasa ka o jaabi kelenw Sɔrɔ. Jaabi nafama kalasi kuraw t’a ɲini ka ko minnu man ca, n’olu ye fɛn dɔ yecogo tɛ se ka jira i n’a fɔ filɛlikɛyɔrɔ hakɛw hakɛ kelen min bɛ ɲɔgɔn kan; aw bɛna a ɲini o nɔ na ka baara kɛ ni CSS ladamulen ye o ko suguw la.