Source

Koçberî bo v4

Bootstrap 4 nûvekirinek sereke ya tevahiya projeyê ye. Guhertinên herî berbiçav li jêr têne kurt kirin, li dûv wan guheztinên taybetî yên li ser pêkhateyên têkildar.

Guhertinên stabîl

Ji Beta 3-ê berbi serbestberdana meya domdar v4.0 ve diçin, tu guhartinên şikestî tune, lê hin guhertinên berbiçav hene.

Çapnivîs

  • Karûbarên çapê yên şikestî rast kirin. Berê, bikaranîna .d-print-*çînekê dê ji nişka ve çînek din serûbin bike .d-*. Naha, ew karûbarên me yên din ên pêşandanê li hev dikin û tenê li ser wê medyayê ( @media print).

  • Karûbarên pêşandana çapê yên berdest berfireh kirin da ku bi karûbarên din re li hev bikin. Beta 3 û kevintir tenê hebû block, inline-block, inline, û none. Stable v4 added ,,,,, flexû inline-flex.tabletable-rowtable-cell

  • Bi şêwazên çapê yên nû yên ku diyar dikin renderandina pêşdîtina çapê di nav gerokan de rast kir @page size.

Guhertinên Beta 3

Dema ku Beta 2 di qonaxa betayê de piraniya guheztinên me yên şikestî dît, lê dîsa jî çend me hene ku hewce ne ku di berdana Beta 3 de werin çareser kirin. Heke hûn ji Beta 2-ê an guhertoyek kevntir a Bootstrap-ê Beta 3-ê nûve dikin, ev guhertin derbas dibin.

Lihevket

  • $thumbnail-transitionGuherbara nebikaranîn rakirin . Me tiştek veguhezand, ji ber vê yekê ew tenê kodek zêde bû.
  • Di pakêta npm de ji xeynî pelên me yên çavkanî û dûr tu pelên din tune; heke we pişta xwe da wan û nivîsarên me bi node_modulespeldankê dimeşandin, divê hûn tevgera xebata xwe biguncînin.

Forms

  • Hem qutiyên kontrolê û hem jî radyoyên xwerû û xwerû ji nû ve nivîsandin. Naha, her du jî xwedan strukturên HTML-ê yên lihevhatî (derveyî <div>bi xwişk û bira <input>û <label>) û heman şêwazên sêwiranê hene (xweserî stûxwarî, bi çîna guhêrbar ve girêdayî). Ev rê dide me ku em etîketê li gorî rewşa têketinê şêwaz bikin, piştgirîya disabledtaybetmendiyê hêsan bike (berê çînek dêûbav hewce dike) û erêkirina forma me baştir piştgirî bike.

    Wekî beşek ji vê yekê, me CSS-ya ji bo birêvebirina gelek background-images li ser qutiyên kontrolê û radyoyên xwerû guhertiye. Berê, .custom-control-indicatorhêmana ku nuha hatî rakirin xwedan rengê paşîn, gradient û îkona SVG bû. Xweserkirina gradienta paşîn tê vê wateyê ku her gava ku hûn hewce ne ku tenê yekê biguhezînin hemî wan biguhezînin. Naha, me .custom-control-label::beforeji bo dagirtin û gradientê heye û .custom-control-label::afterîkonê bi dest dixe.

    Ji bo ku di hundurê de kontrolek xwerû çêbikin, lê zêde .custom-control-inlinebikin.

  • Hilbijêrek nûvekirî ji bo komên bişkojka-bingeha têketinê. Li şûna [data-toggle="buttons"] { }şêwaz û tevgerê, em datataybetmendiyê tenê ji bo tevgerên JS bikar tînin û ji bo şêwazê xwe dispêrin .btn-group-toggleçînek nû.

  • Di berjewendiya .col-form-legendhinekî çêtirkirî de hate rakirin .col-form-label. Bi vî rengî .col-form-label-smû bi hêsanî .col-form-label-lgli ser <legend>hêmanan tê bikar anîn.

  • Kevirên pelê yên xwerû guheztinek di $custom-file-textguherbara xweya Sass de wergirtin. Ew êdî ne nexşeyek Sass a hêlîn e û naha tenê rêzek hêzdar dike - Browsebişkojka ku naha tenê pseudo-hêmanek e ku ji Sass-a me hatî çêkirin. Nivîsar Choose fileniha ji .custom-file-label.

komên Input

  • Pêvekên koma têketinê naha ji bo cîhkirina wan li gorî têketinek taybetî ne. Em daketin .input-group-addonû .input-group-btnji bo du dersên nû, .input-group-prependû .input-group-append. Pêdivî ye ku hûn nuha pêvekek an pêvekek eşkere bikar bînin, pir ji CSS-ya me hêsan bikin. Di nav pêvekek an pêvekekê de, bişkokên xwe bi cîh bikin ku ew ê li cîhek din hebin, lê nivîsê tê de bipêçin .input-group-text.

  • Naha şêwazên erêkirinê têne piştgirî kirin, wekî çend têketin jî têne piştgirî kirin (her çend hûn dikarin her komê tenê yek têketinê rast bikin).

  • Divê dersên mezinbûnê li ser dêûbav .input-groupû ne li ser hêmanên forma kesane bin.

Beta 2 guhertin

Dema ku di betayê de ye, me armanc dike ku tu guhertinên şikestî nebin. Lêbelê, tişt her gav wekî plansaziyê naçin. Li jêr guheztinên şikestî hene ku divê di hişê xwe de gava ku ji Beta 1 berbi Beta 2 ve diçin.

Şikandin

  • Guherbar $badge-colorû karanîna wê li ser rakirin .badge. Em fonksiyonek berevajî reng bikar tînin da ku colorli ser bingehê hilbijêrin background-color, ji ber vê yekê guhêrbar nepêwist e.
  • Navê grayscale()fonksiyonê hate guheztin da gray()ku nakokî bi grayscaleparzûna xwemalî ya CSS-ê re têk neçe.
  • Navê .table-inverse, .thead-inverse, û .thead-defaultbi .*-darkû .*-light, lihevhatina nexşeyên rengên me yên ku li cîhek din têne bikar anîn.
  • Tabloyên bersivdar naha ji bo her xala veqetîna torê polan çêdikin. Ev ji Beta 1 vediqete ji ber ku ya ku .table-responsivewe bikar tîne bêtir mîna .table-responsive-md. Hûn dikarin nuha bikar bînin .table-responsivean jî .table-responsive-{sm,md,lg,xl}wekî ku hewce ne.
  • Piştgiriya Bower ji ber ku rêveberê pakêtê ji bo alternatîfan (mînak, Yarn an npm) hate betal kirin. Ji bo hûragahiyan li bower/bower#2298 binêre.
  • Bootstrap hîn jî jQuery 1.9.1 an mezintir hewce dike, lê ji we re tê pêşniyar kirin ku hûn guhertoya 3.x bikar bînin ji ber ku gerokên piştgirî yên v3.x yên ku Bootstrap piştgirî dike plus v3.x hin sererastkirinên ewlehiyê hene.
  • Çîna bêkaran rakirin .form-control-label. Ger we vê polê bikar anîbe, ew dûpatî ya .col-form-labelpola bû ku navendek vertîkal bi têketina <label>wê ve girêdayî di sêwiranên formên horizontî de ye.
  • Ji mixînek color-yiqku colortaybetmendiyê tê de vediguhere fonksiyonek ku nirxek vedigerîne, ku dihêle hûn wê ji bo her taybetmendiyek CSS bikar bînin. Mînakî, li şûna color-yiq(#000), hûn ê binivîsin color: color-yiq(#000);.

Highlights

  • Bikaranîna nû pointer-eventsli ser modalan destnîşan kir. Derveyî .modal-dialogdi bûyeran de pointer-events: noneji bo guheztina klîk a xwerû re derbas dibe (dibe ku meriv tenê li klîkekê guhdarî bike .modal-backdrop), û dûv re ji bo ya rastîn .modal-contentbi pointer-events: auto.

Berhevkirinî

Li vir tiştên bilêtê yên mezin hene ku hûn dixwazin haya wan jê hebe dema ku ji v3 ber v4 ve diçin.

Piştgiriya gerokê

  • Piştgiriya IE8, IE9, û iOS 6 hilweşand. v4 naha tenê IE10+ û iOS 7+ e. Ji bo malperên ku hewceyê yek ji wan in, v3 bikar bînin.
  • Piştgiriya fermî ji bo gerok û WebView ya Android v5.0 Lollipop zêde kir. Guhertoyên berê yên Geroka Android û WebView tenê bi nefermî piştgirî dimînin.

Guhertinên gerdûnî

  • Flexbox ji hêla xwerû ve hatî çalak kirin. Bi gelemperî ev tê wateya dûrketina ji floatan û bêtir li ser pêkhateyên me.
  • Ji bo pelên me yên çavkaniya CSS-ê ji Kêmtir veguherî Sass .
  • Ji wekî yekîneya meya CSS ya bingehîn ve pxhatî remveguheztin, her çend pîxel hîn jî ji bo pirsên medyayê û tevgera torê têne bikar anîn ji ber ku dîmenderên cîhazê ji hêla mezinahiya celebê ve nayên bandor kirin.
  • Mezinahiya tîpên gerdûnî ji bo zêde 14pxbû 16px.
  • Rêzên torê nûve kirin da ku vebijarkek pêncemîn zêde bike (navnîşankirina cîhazên piçûk li 576pxjêr û li jêr) û -xsînfîks ji wan çînan derxist. Mînak .col-6.col-sm-4.col-md-3:.
  • Mijara vebijarkî ya cihêreng bi vebijarkên mîhengbar bi navgîniya guhêrbarên SCSS (mînak, $enable-gradients: true).
  • Pergala ava kirin ji nû ve hatî sererast kirin da ku li şûna Grunt rêzek nivîsarên npm bikar bîne. Ji package.jsonbo hewcedariyên pêşkeftina herêmî hemî nivîsan, an projeya me readme bibînin.
  • Bikaranîna ne-bersiv a Bootstrap êdî nayê piştgirî kirin.
  • Xweseriya serhêl ji bo belgeyên sazkirinê yên berfirehtir û avahiyên xwerû daxist.
  • Bi dehan dersên karûbar ên nû ji bo cotên taybetmendî-nirxa CSS-ê yên hevpar û kurtebirên cihêreng ên marjînal/padding lê zêde kirin.

sîstema Grid

  • Veguhest bo flexbox.
    • Piştgiriya ji bo flexbox-ê di tevlihevkirina torê û dersên pêşwext de zêde kir.
    • Wekî beşek ji flexbox, piştgirî ji bo dersên hevrêziya vertîkal û horizontî vedihewîne.
  • Navên pola torê ya nûvekirî û rêzek torê ya nû.
    • Ji bo kontrolkirina hûrgelek tîrêjek torê ya nû smli jêr 768pxzêde kir. Niha em hene xs, sm, md, lgû xl. Ev di heman demê de tê vê wateyê ku her ast bi yek astê ve hatî hilkişandin (ji ber vê yekê .col-md-6di v3 de naha .col-lg-6di v4 de ye).
    • xsçînên torê hatine guheztin da ku ne hewce bike ku infix bi awayekî rasttir nîşan bide ku ew dest bi sepandina şêwazan li min-width: 0û ne nirxek pîxelek diyarkirî dikin. Li şûna .col-xs-6wê, niha ye .col-6. Hemî qatên torê yên din pêvekê hewce dikin (mînak, sm).
  • Mezinahiyên torê, mixîn, û guhêrbar nûve kirin.
    • Naha naha nexşeyek Sass-a gemarê heye, ji ber vê yekê hûn dikarin di her xala veqetandinê de firehiyên gûzê yên taybetî diyar bikin.
    • Miksên torê yên nûve kirin da ku tevliheviyek amadekar make-col-readyû a make-colji bo danîna pîvana stûnê ya kesane flexbikar bînin.max-width
    • Xalên veqetandinê yên pirsiyariya medyaya pergala torê û firehiyên konteynerê guheztin da ku asta torê ya nû hesab bike û piştrast bike ku stûn bi firehiya 12xwe ya herî zêde bi yeksan ve têne dabeş kirin.
    • Xalên şikestinê û firehiyên konteynerê naha li şûna çend guhêrbarên cihêreng bi nexşeyên Sass ( $grid-breakpointsû ) têne rêve kirin. $container-max-widthsVan guhêrbaran @screen-*bi tevahî diguhezînin û dihêlin hûn bi tevahî rêzikên torê xweş bikin.
    • Pirsên medyayê jî hatine guhertin. Li şûna ku her carê daxuyaniyên xwe yên lêpirsîna medyayê bi heman nirxê dubare bikin, me niha heye @include media-breakpoint-up/down/only. Niha, li şûna nivîsandinê @media (min-width: @screen-sm-min) { ... }, hûn dikarin binivîsin @include media-breakpoint-up(sm) { ... }.

Components

  • Ji bo parçeyek nû ya tev-hevgirtî, qertên panel, piçûk û kanî daketin .
  • Fontê îkonê Glyphicons avêtin. Heke hûn hewceyê îkonan in, hin vebijark ev in:
  • Pêveka Affix jQuery avêtin.
    • Em pêşniyar dikin ku li şûna wê bikar position: stickybînin. Ji bo hûragahiyan û pêşniyarên taybetî yên polyfillê ji kerema xwe têketina HTML5 bibînin. Yek pêşniyar ev e ku meriv @supportsqaîdeyek ji bo pêkanîna wê bikar bîne (mînak, @supports (position: sticky) { ... })/
    • Ger we Affix bikar anîbû ku hûn şêwazên din, ne position-stil bicîh bikin, dibe ku polyfills doza karanîna we piştgirî nekin. Vebijarkek ji bo karanîna weha pirtûkxaneya ScrollPos-Styler- ya sêyemîn e.
  • Ji ber ku ew bi bingehîn bişkokên piçek xwerû bû , hêmana pager davêje .
  • Nêzîkî hemî pêkhateyan ji nû ve verast kirin da ku li şûna hilbijarkên zarokan ên zêde-taybet, hilbijêrên pola ne-hêlîn bêtir bikar bînin.

Ji hêla pêkhatî ve

Ev navnîş guheztinên sereke ji hêla pêkhateyên di navbera v3.xx û v4.0.0 de ronî dike.

Reboot

Bootstrap 4- a nû Reboot e , şêwazek nû ya ku li ser Normalîzekirinê bi şêwazên meyên vesazkirinê yên hinekî ramanbar ava dibe. Hilbijêrên ku di vê pelê de xuya dibin tenê hêmanan bikar tînin — li ​​vir ders tune. Ev ji bo nêzîkbûnek modulartir şêwazên meya vesazkirinê ji şêwazên pêkhateya me vediqetîne. Hin ji nûvekirinên herî girîng ên ku ev tê de box-sizing: border-boxguheztin in, çûna ji emyekîneyên remli ser gelek hêmanan, şêwazên girêdanê, û gelek vesazkirina hêmanên formê.

Tîpografi

  • Hemî .text-karûbar bar kir _utilities.scsspelê.
  • Ji .page-headerber ku şêwazên wê dikarin bi navgîniya karûbaran ve werin sepandin.
  • .dl-horizontalhatiye avêtin. Di şûna wê de, .rowli ser wê û zarokan <dl>dersên stûnên torê (an jî tevliheviyan) bikar bînin û bikar bînin .<dt><dd>
  • Blockquotes ji nû ve dîzayn kirin, şêwazên xwe ji <blockquote>hêmanê berbi çînek yekane veguhezînin .blockquote. Guherkerê .blockquote-reverseji bo karûbarên nivîsê avêtin.
  • .list-inlinenaha hewce dike ku zarokên wê lîsteyên tomar bikin ku .list-inline-itempola nû li ser wan were sepandin.

Images

  • .img-responsiveNavê xwe guhert .img-fluid.
  • Navê .img-roundedguherandin.rounded
  • Navê .img-circleguherandin.rounded-circle

Tables

  • Hema hema hemî nimûneyên >hilbijêrê hatine rakirin, yanî tabloyên hêlînkirî dê nuha bixweber şêwazên ji dêûbavên xwe mîras bistînin. Ev hilbijêrên me û xwerûyên potansiyel pir hêsan dike.
  • Ji bo hevgirtinê navê .table-condensedxwe .table-smguhert.
  • Vebijarkek nû lê .table-inversezêde kir.
  • Guherkerên sernavê tabloyê lê zêde kirin: .thead-defaultû .thead-inverse.
  • Navê dersên konteksual ji bo ku .table--pêşgirek hebe. Ji ber vê yekê .active, .success, .warning, .dangerû .infoji .table-active, .table-success, .table-warning, .table-dangerû .table-info.

Forms

  • Hêmana barkirî li _reboot.scsspelê vedigere.
  • .control-labelNavê xwe guhert .col-form-label.
  • Bi rêzê ve navê xwe .input-lgû .input-smto .form-control-lgû .form-control-smguherand.
  • .form-group-*Ji bo sadebûnê ders avêtin . .form-control-*Li şûna wê niha dersan bikar bînin.
  • Daxistin .help-blockû li şûna wê .form-textji bo nivîsa alîkariyê ya asta blokê hate danîn. Ji bo nivîsa alîkariyê ya hundurîn û vebijarkên din ên maqûl, dersên karûbar ên mîna .text-muted.
  • Daketin .radio-inlineû .checkbox-inline.
  • Hevgirtî .checkboxû .radionav .form-checkû .form-check-*çînên cihê.
  • Formên horizontî yên nûvekirî:
    • Pêdiviya .form-horizontalpolê derxist.
    • .form-groupêdî şêwazên ji .rowvia mixin-ê naxebite, ji ber vê .rowyekê naha ji bo sêwiranên tora horizontal (mînak, <div class="form-group row">).
    • Çîna nû .col-form-labelli etîketên navendê yên vertical bi .form-controls zêde kir.
    • .form-rowBi dersên torê re ji bo sêwiranên forma kompakt nû hate zêdekirin (xwe biguhezînin .rowû biçin .form-row).
  • Piştgiriya formên xwerû (ji bo qutiyên kontrolê, radyo, hilbijartî û têketina pelan) zêde kirin.
  • Li şûna .has-error, .has-warning, û .has-successçînên bi pejirandina forma HTML5 bi navgîniya CSS :invalidû :validpseudo-class ve hatî veguheztin.
  • .form-control-staticNavê xwe guhert .form-control-plaintext.

Buttons

  • .btn-defaultNavê xwe guhert .btn-secondary.
  • Sinif bi .btn-xstevahî daxist ji ber ku .btn-smbi nîsbet ji ya v3-ê pir piçûktir e.
  • Taybetmendiya bişkojka dewletî ya button.jspêveka jQuery hate avêtin. Di vê yekê de rêbaz $().button(string)û $().button('reset')rêbaz hene. Em şîret dikin ku li şûna wê piçek JavaScript-a xwerû bikar bînin, ku dê feydeya vê yekê hebe ku hûn bi awayê ku hûn dixwazin tevbigerin.
    • Hişyar bikin ku taybetmendiyên din ên pêvekê (qutiyên kontrolê yên bişkojkê, radyoyên bişkojkê, bişkokên yek-veguheztinê) di v4 de hatine parastin.
  • Bişkojkên 'biguherînin [disabled]wekî :disabledku IE9+ piştgirî dike :disabled. Lêbelê fieldset[disabled]hîn jî pêdivî ye ji ber ku komên zeviyên neçalak ên xwemalî hîn jî di IE11 de xelet in .

Koma bişkokê

  • Parçeyek bi flexbox ve hatî nivîsandin.
  • Rakirin .btn-group-justified. Wekî cîhgirek hûn dikarin <div class="btn-group d-flex" role="group"></div>wekî pêçek li dora hêmanan bi kar bînin .w-100.
  • Ders davêje bi .btn-group-xstevahî jêbirina .btn-xs.
  • Cûrahiya eşkere ya di navbera komên bişkokê de di darê toolbarên bişkokê de hate rakirin; niha karûbarên margin bikar bînin.
  • Belgekirina çêtirîn ji bo karanîna bi pêkhateyên din re.
  • Ji hilbijêrên dêûbav ji bo hemî pêkhate, guhêrbar, hwd veguherî dersên yekjimar.
  • Şêweyên dakêşanê yên hêsankirî ku êdî bi tîrên ber bi jor an berjêr ên ku bi menuya daketinê ve girêdayî ne neşînin.
  • Dropdowns niha bi <div>s an <ul>s-yê têne çêkirin.
  • Şêweyên dakêşanê û nîşankirinê ji nû ve ava kirin da ku ji bo hêmanên dakêşanê yên bingehîn <a>û hêsan piştgirîya çêkirî peyda bikin.<button>
  • .dividerNavê xwe guhert .dropdown-divider.
  • Tiştên dakêşanê naha hewce ne .dropdown-item.
  • Veguheztinên dakêşanê êdî hewceyî eşkereyek ne diyar <span class="caret"></span>in; ev nuha bixweber bi navgîniya CSS-ê ::afterli ser tê peyda kirin .dropdown-toggle.

sîstema Grid

  • 576pxXaleke veqetîna torê ya nû wekî sm, tê vê wateyê ku naha bi tevahî pênc ast hene ( xs, sm, md, lg, û xl).
  • Navê çînên guhêrbar tora bersivdar ji .col-{breakpoint}-{modifier}-{size}bo çînên torê yên sadetir hate guhertin .{modifier}-{breakpoint}-{size}.
  • Ji bo dersên nû yên ku bi hêza flexbox-ê ve orderdersên guhêrbar ên push û kişandinê avêtin. Mînakî, li şûna .col-8.push-4û .col-4.pull-8, hûn ê bikar bînin .col-8.order-2û .col-4.order-1.
  • Ji bo pergal û hêmanên torê dersên karanîna flexbox zêde kirin.

Lîsteya komên

  • Parçeyek bi flexbox ve hatî nivîsandin.
  • Bi çînek a.list-group-itemeşkere, .list-group-item-action, ji bo guhertoyên stenbolê û bişkojka tomarên komê yên navnîşê ve hatî guhertin.
  • .list-group-flushJi bo karanîna bi kartên polê zêde kir .
  • Parçeyek bi flexbox ve hatî nivîsandin.
  • Ji ber ku berbi flexbox ve diçin, rêzkirina îkonên betalkirinê di serî de îhtîmal e ku şikestî be ji ber ku em êdî floatan bikar naynin. Naveroka Floated yekem tê, lê bi flexbox re ew êdî ne wusa ye. Îkonên xweyên betalkirinê nûve bikin da ku piştî sernavên modal werin sererast kirin.
  • Vebijêrk remote(ku dikaribû were bikar anîn da ku bixweber naverokek ji derve were barkirin û xêzkirina modalekê) û loaded.bs.modalbûyera têkildar hatin rakirin. Em li şûna vê yekê pêşniyar dikin ku şablonek ji hêla xerîdar an çarçoveyek girêdana daneyê bikar bînin, an ji xwe re gazî jQuery.load bikin.
  • Parçeyek bi flexbox ve hatî nivîsandin.
  • Hema hema hemî >hilbijêran ji bo şêwazek hêsan bi navgîniya dersên ne-hêlîn avêtin.
  • Li şûna hilbijêrên HTML-taybet ên mîna , em ji bo s, s, û s .nav > li > açînên cuda bikar tînin . Ev HTML-a we maqûltir dike û di heman demê de berfirehbûna zêde bi xwe re tîne..nav.nav-item.nav-link

Navbar bi tevahî di flexbox-ê de bi piştgirîya pêşkeftî ji bo hevrêzî, bersivdayîn, û xwerûkirinê ji nû ve hatî nivîsandin.

  • Tevgerên navbarê yên bersivdar naha li ser .navbarpolê bi navgîniya ku .navbar-expand-{breakpoint} hûn hilbijêrin cîhê ku navbarê hilweşînin ve têne sepandin. Berê ev guhertoyek Kêm guhêrbar bû û ji nû ve berhevkirina pêdivî bû.
  • .navbar-defaultniha ye .navbar-light, her çend wekî .navbar-darkxwe dimîne. Yek ji van li ser her navbarek pêdivî ye. Lebê, van çînên êdî set background-colors; di şûna wan de ew di bingeh de tenê bandor colordikin.
  • Navbar naha hewceyê daxuyaniyek paşnavê ya bi rengekî ye. Ji karûbarên meya paşîn ( .bg-*) hilbijêrin an jî xwe bi dersên sivik/berevajî yên jorîn ji bo xwerûkirina dîn saz bikin .
  • Ji ber şêwazên flexbox-ê, navbar naha dikarin ji bo vebijarkên lihevhatina hêsan karûbarên flexbox bikar bînin.
  • .navbar-toggleniha ye .navbar-togglerû xwedan şêwazên cihêreng û nîşankirina hundurîn e (bêtir sê <span>s).
  • Bi tevayî .navbar-formders davêje. Êdî ne hewce ye; li şûna wê, tenê .form-inlinewekî ku hewce be karûbarên marjînal bikar bînin û bicîh bikin.
  • Navbar êdî ne tê de margin-bottoman border-radiusji hêla xwerû ve ne. Li gorî hewcedariyên amûran bikar bînin.
  • Hemî mînakên ku navbaran vedigirin hatine nûve kirin da ku nîşana nû tê de hebe.

Pagination

  • Parçeyek bi flexbox ve hatî nivîsandin.
  • Çînên eşkere ( .page-item, .page-link) niha li ser dûndana .paginations hewce ne
  • .pagerJi ber ku ew ji bişkokên nexşeyê yên xwerû hindiktir bû, hêman bi tevahî daxist.
  • Çînek eşkere, .breadcrumb-item, niha li ser dûndana .breadcrumbs hewce ye

Etîket û nîşan

  • Hevgirtî .labelû .badgeji <label>hêmanê veqetandin û hêmanên têkildar hêsan kirin.
  • .badge-pillJi bo xuyangê "pîlan"ê wekî guhêrbar hate zêdekirin .
  • Nîşan êdî bixweber di komên navnîş û pêkhateyên din de nayên rijandin. Ji bo wê niha dersên karûbar hewce ne.
  • .badge-defaulthatiye avêtin û .badge-secondarylê zêde kirin li gorî dersên guhêrbar ên ku li cîhek din têne bikar anîn.

Panel, thumbnails, û kanî

Ji bo pêkhateya qerta nû bi tevahî hate avêtin.

Panels

  • .panelto .card, niha bi flexbox ve hatî çêkirin.
  • .panel-defaultrakirin û bê şûna.
  • .panel-grouprakirin û bê şûna. .card-groupne cîgir e, cuda ye.
  • .panel-headingber.card-header
  • .panel-titleto .card-title. Bi awira xwestinê ve girêdayî, dibe ku hûn bixwazin hêmanên sernavê an çînên (mînak <h3>, .h3) an hêmanên stûr an çînên (mînak <strong>, <b>, .font-weight-bold) bikar bînin. Bala xwe bidinê ku .card-title, dema ku bi heman navî tê binav kirin, xuyangek cûda ji .panel-title.
  • .panel-bodyber.card-body
  • .panel-footerber.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, û .panel-dangerji bo .bg-, .text-, û .borderkarûbarên ku ji $theme-colorsnexşeya meya Sassê hatine çêkirin hatine avêtin.

Pêşverûtî

  • .progress-bar-*Li şûna dersên konteksual bi .bg-*karûbaran. Mînak, class="progress-bar progress-bar-danger"dibe class="progress-bar bg-danger".
  • Ji .activebo barên pêşveçûnê yên anîmasyon bi .progress-bar-animated.
  • Tevahiya pêkhatê ji nû ve sererast kir da ku sêwirandin û şêwazê hêsan bike. Kêmtir şêwazên me hene ku hûn lêbixin, nîşaneyên nû, û îkonên nû.
  • Hemî CSS-ê nehatine hêlîn kirin û navê wî hate guheztin, ku her çîn bi pêşgira .carousel-.
    • Ji bo tiştên carousel, .next, .prev, .left, û .rightniha .carousel-item-next, .carousel-item-prev, .carousel-item-left, û .carousel-item-right.
    • .itemniha jî heye .carousel-item.
    • Ji bo kontrolên berê / paşerojê, .carousel-control.rightû .carousel-control.leftniha .carousel-control-nextû ne .carousel-control-prev, tê vê wateyê ku ew êdî hewceyê çînek bingehîn a taybetî ne.
  • Hemî şêwazên bersivdar rakirin, li gorî hewcedariyên karûbaran (mînak, nîşankirina sernivîsan li ser hin dîmenderan) û şêwazên xwerû rakir.
  • Wêneyê jêkirî ji bo wêneyên di hêmanên karûselê de, berbi karûbaran ve diçe.
  • Mînaka Carousel tweak kir ku nîşankirin û şêwazên nû tê de hebe.

Tables

  • Piştgiriya ji bo tabloyên hêlînkirî yên stîlkirî rakirin. Hemî şêwazên tabloyê naha di v4 de ji bo hilbijêrên hêsan têne mîras kirin.
  • Guhertoya tabloya berevajî lê zêde kir.

Utilities

  • Nîşan, veşartî, û bêtir:
    • Karûbarên pêşandanê bersivdar çêkir (mînak, .d-noneû d-{sm,md,lg,xl}-none).
    • .hidden-*Ji bo karûbarên nû yên pêşandanê piraniya karûbaran avêtin . Mînakî, li şûna .hidden-sm-up, bikar bînin .d-sm-none. Navê karûbaran guherand da ku nexşeya navdêriya kargêriya .hidden-printpêşandanê bikar bîne. Zêdetir agahdarî di binê beşa karûbarên Bersiv a vê rûpelê de.
    • Çînên ji bo floatên .float-{sm,md,lg,xl}-{left,right,none}bersivdar û jêbirin .pull-leftû .pull-rightji ber ku ew zêde ne .float-leftû .float-right.
  • Awa:
    • Guhertoyên bersivdar li dersên hevrêzkirina nivîsa me zêde kirin .text-{sm,md,lg,xl}-{left,center,right}.
  • Lihevkirin û dûrbûn:
  • Clearfix hate nûve kirin da ku piştgirî ji guhertoyên geroka kevntir rabike.

Pêşgira vendor tevlihev dike

Miksên pêşgira firoşkar ên Bootstrap 3 , yên ku di v3.2.0-ê de hatine betal kirin, di Bootstrap 4-ê de hatine rakirin. Ji ber ku em Autoprefixer bikar tînin , ew êdî ne hewce ne.

Miksên jêrîn rakirin : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility_ box-sizing_ content-columns_ hyphens_ opacity_ perspective_ perspective-origin_ rotate_ rotateX_ rotateY_ scale_ scaleX_ scaleY_ skew_ transform-origin_ transition-delay_ transition-duration_ transition-property_ transition-timing-function_transition-transformtranslatetranslate3duser-select

Documentation

Belgeyên me di heman demê de nûvekirinek wergirt. Li vir jêrîn kêm e:

  • Em hîn jî Jekyll bikar tînin, lê di tevliheviyê de pêvekên me hene:
    • bugify.rbji bo navnîşkirina navnîşên li ser rûpela xeletiyên geroka me bi bandor tê bikar anîn.
    • example.rbforkek xwerû ya highlight.rbpêveka xwerû ye, ku rê dide karanîna nimûne-kodê hêsantir.
    • callout.rbForkek xwerû ya mîna wê ye, lê ji bo bangên belgeyên me yên taybetî hatî çêkirin.
    • jekyll-toc ji bo hilberandina tabloya naveroka me tê bikar anîn.
  • Hemî naveroka belgeyan ji bo sererastkirina hêsantir di Markdown de (li şûna HTML) ji nû ve hatî nivîsandin.
  • Rûpel ji bo naverokek hêsantir û hiyerarşiyek nêzîktir ji nû ve hatine organîze kirin.
  • Em ji CSS-ya birêkûpêk derbasî SCSS-ê bûn da ku ji guhêrbarên Bootstrap, mixîn û hêj bêtir sûd werbigirin.

Karûbarên bersivdar

Hemî @screen-guhêrbar di v4.0.0 de hatine rakirin. Di şûna wê de mîksên media-breakpoint-up(), media-breakpoint-down(), an media-breakpoint-only()Sass an jî $grid-breakpointsnexşeya Sass bikar bînin.

Dersên karûbarên me yên bersivdar bi piranî di berjewendiya karûbarên eşkere de hatine rakirin display.

  • Çînên .hiddenû ji ber ku ew bi jQuery û rêbazan .showre nakokî ne hatine rakirin . Di şûna wê de, hewl bidin ku taybetmendiyê biguherînin an şêwazên hundurîn ên mîna û bikar bînin .$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
  • Hemî .hidden-çîn hatine rakirin, ji bo karûbarên çapkirinê yên ku hatine guhertin.
    • Ji v3 hate rakirin:.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
    • Ji alfayên v4 hate derxistin:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Karûbarên çapkirinê êdî ne bi .hidden-an .visible-, lê bi dest pê .d-print-dikin.
    • Navên kevn: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Dersên nû: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Li şûna ku hûn dersên eşkere bikar bînin .visible-*, hûn hêmanek xuya dikin ku bi tenê di wê mezinahiya ekranê de veneşêrin. Hûn dikarin yek .d-*-nonepolê bi yek .d-*-blockpolê re bikin yek ku hêmanek tenê li ser navberek diyarkirî ya mezinahiyên ekranê .d-none.d-md-block.d-xl-nonenîşan bide (mînak, hêmanê tenê li ser cîhazên navîn û mezin nîşan dide).

Bala xwe bidinê ku guheztinên xalên veqetandinê yên di v4 de tê vê wateyê ku hûn ê hewce bikin ku yek xala veqetînê mezintir bikin da ku heman encaman bi dest bixin. Çînên karûbarên nû yên bersivdar hewl nadin ku rewşên kêm hevpar ên ku xuyabûna hêmanek wekî yek rêzikek hevgirtî ya mezinahiyên dîmendera xuyangê neyê xuyang kirin; hûn ê li şûna wê hewce ne ku di rewşên weha de CSS-ya xwerû bikar bînin.