V4-e göçmek

“Bootstrap 4” taslamanyň esasy täzeden ýazylmagydyr. Iň görnükli üýtgeşmeler aşakda jemlenendir, soňra degişli komponentlere has anyk üýtgeşmeler girizilýär.

Durnukly üýtgeşmeler

Beta 3-den durnukly v4.0 çykaryşymyza geçmek bilen, hiç hili üýtgeşiklik ýok, ýöne käbir görnükli üýtgeşmeler bar.

Çap etmek

• Kesilen döwülen çap enjamlary. Ozal bir .d-print-*synp ulanmak garaşylmadyk ýagdaýda beýleki .d-*synplary agdardy. Indi, beýleki görkeziş hyzmatlarymyz bilen gabat gelýär we diňe şol mediýa ( @media print) degişlidir.

• Beýleki kömekçi enjamlara gabat gelýän elýeterli çap displeý enjamlaryny giňeltdi. Beta 3 we ondan uly ýaşlylar diňe block,,, inline-blockwe . Durnukly v4 ,,, we . _inlinenoneflexinline-flextabletable-rowtable-cell

• Görkezýän täze çap stilleri bilen brauzerlerde kesgitlenen çap deslapky syn @page size.

Beta 3 üýtgeýär

Beta 2 beta tapgyrynda bolup geçen üýtgeşmelerimiziň köpüsini gören hem bolsa, Beta 3 goýberilişinde çözülmeli birnäçe zat bar. Beta 3-den Beta 3-e ýa-da Bootstrap-yň köne wersiýasyna täzelenýän bolsaňyz, bu üýtgeşmeler ulanylýar.

Dürli

• Ulanylmaýan $thumbnail-transitionüýtgeýjini aýyrdy. Biz hiç zady geçirmeýärdik, şonuň üçin bu diňe goşmaça koddy.
• Npm paketinde indi çeşmämizden we dist faýllaryndan başga faýllar ýok; olara bil baglap, skriptlerimizi node_modulesbukjanyň üsti bilen işleýän bolsaňyz, iş prosesiňizi uýgunlaşdyrmalysyňyz.

Formalar

• Customörite we adaty bellikleri we radiolary täzeden ýazyň. Indi, ikisinde-de gabat gelýän HTML gurluşy (daşarky <div>dogan <input>we daşarky <label>) we birmeňzeş düzüliş stilleri bar (deslapky görnüşde, üýtgediji synp bilen çyzykly). Bu, belligi giriş ýagdaýyna esaslanyp, disabledatribut üçin goldawy ýönekeýleşdirmäge (ozal ene-atalar synpyny talap edýärdi) we formamyzy tassyklamagy has gowy goldamaga mümkinçilik berýär.

  Munuň bir bölegi hökmünde background-image, ýörite forma belliklerinde we radiolarynda birnäçe s dolandyrmak üçin CSS-ni üýtgetdik. Ozal aýyrylan .custom-control-indicatorelementiň fon reňki, gradient we SVG nyşany bardy. Fon gradiýentini düzmek, her gezek diňe birini üýtgetmek üçin zerur bolanlaryň hemmesini çalyşmagy aňladýardy. Indi, .custom-control-label::beforedoldurmak we gradient .custom-control-label::afteretmek üçin nyşany ulanýarys.

  Checkörite barlag setirini etmek üçin goşuň .custom-control-inline.

• Giriş esasly düwme toparlary üçin täzelenen saýlaýjy. Stil we özüni alyp barşyň ýerine , atributyny diňe JS özüni alyp barşy üçin [data-toggle="buttons"] { }ulanýarys we dizaýn üçin täze synpa bil baglaýarys.data.btn-group-toggle

• .col-form-legendBiraz gowulaşan peýdasyna aýryldy .col-form-label. Bu usul .col-form-label-smwe aňsatlyk bilen elementlerde .col-form-label-lgulanylyp bilner .<legend>

• $custom-file-textFileörite faýl girişleri Sass üýtgeýjisine üýtgeşme aldy . Indi ol ýerleşdirilen Sass kartasy däl we indi diňe bir setiri güýçlendirýär - Browsedüwme indi Sass-dan döredilen ýeke-täk pseudo elementi. Tekst Choose fileindi .custom-file-label.

Giriş toparlary

• Giriş topary goşundylary indi giriş bilen deňeşdirilende ýerleşdirilmegine mahsusdyr. Iki sany täze synp üçin taşladyk .input-group-addonwe . CSS-lerimiziň köpüsini ýönekeýleşdirip, goşmaçany ýa-da goşmaçany aç-açan ulanmaly. Goşmaçanyň ýa-da goşmaçanyň içinde düwmeleriňizi başga ýerlerde bolşy ýaly ýerleşdiriň, ýöne teksti ýazyň ..input-group-btn.input-group-prepend.input-group-append.input-group-text

• Barlag stilleri, köp girişler ýaly goldanýar (her topara diňe bir giriş girizip bilersiňiz).

• .input-groupÖlçeg sapaklary aýratyn forma elementleri däl -de , ene-atada bolmaly .

Beta 2 üýtgeýär

Beta mahalynda hiç hili üýtgeşiklik bolmazlygy maksat edinýäris. Şeýle-de bolsa, zatlar hemişe meýilleşdirilişi ýaly gidenok. Aşakda Beta 1-den Beta 2-e geçeniňizde ýadyňyzda saklamaly üýtgeşmeler.

Döwmek

• Üýtgeýji aýryldy $badge-colorwe ulanylyşy .badge. Esaslandyrmak üçin reňk kontrast funksiýasyny ulanýarys color, background-colorşonuň üçin üýtgeýjiniň zerurlygy ýok.
• CSS ýerli süzgüji bilen gapma-garşylygy bozmazlyk üçin grayscale()funksiýanyň adyny üýtgetdi .gray()grayscale
• Başga bir ýerde ulanylýan reňk shemalarymyzyň adyny .table-inverseüýtgetdiler .thead-inversewe .thead-default..*-dark.*-light
• Jogap beriji tablisalar indi her gözenegiň nokady üçin sapaklar döredýär. Bu, Beta 1-den aýrylýar, sebäbi .table-responsiveulanýanlaryňyz has meňzeýär .table-responsive-md. Indi ulanyp .table-responsiveýa-da .table-responsive-{sm,md,lg,xl}zerur bolanda ulanyp bilersiňiz.
• Bukjanyň dolandyryjysy hökmünde taşlanan Bower goldawy alternatiwalar üçin (meselem, ýüplük ýa-da npm) köneldi. Jikme-jiklikler üçin bower / bower # 2298 serediň.
• Bootstrap henizem jQuery 1.9.1 ýa-da has ýokary talap edýär, ýöne 3.x wersiýasyny ulanmagy maslahat berýärsiňiz, sebäbi v3.x goldaýan brauzerler Bootstrap goldaýan we v3.x-de käbir howpsuzlyk düzedişleri bar.
• Ulanylmaýan .form-control-labelsynpy aýyrdy. Bu synpdan peýdalanan bolsaňyz, gorizontal görnüş düzülişinde baglanyşykly giriş bilen .col-form-labeldikligine merkezleşdirilen synpyň dublikatydy.<label>
• color-yiqEmlägi öz içine alýan garyndydan, colorislendik CSS emlägi üçin ulanmaga mümkinçilik berýän bahany yzyna gaýtaryp berýän funksiýa üýtgetdi . Mysal üçin, ýerine color-yiq(#000)ýazardyňyz color: color-yiq(#000);.

Esasy pursatlar

• Modallarda täze pointer-eventsulanylyşy hödürledi. Daşky görnüş , adaty basmak bilen işlemek (islendik basylanda diňlemek mümkinçiligini berýär ) .modal-dialogbilen wakalardan geçýär , soň bolsa hakykata garşy çykýar .pointer-events: none.modal-backdrop.modal-contentpointer-events: auto

Gysgaça mazmun

Ine, v3-den v4-e geçeniňizde habardar bolmak isleýän uly bilet zatlaryňyz.

Brauzer goldawy

• IE8, IE9 we iOS 6 goldawyny taşlady. v4 indi diňe IE10 + we iOS 7+. Bularyň ikisine-de mätäç saýtlar üçin v3 ulanyň.
• Android v5.0 Lollipop brauzeri we WebView üçin resmi goldaw goşuldy. “Android Browser” we “WebView” -iň öňki wersiýalary diňe resmi däl goldaýar.

Global üýtgeşmeler

• Flexbox deslapky görnüşde işledilýär. Umuman aýdanyňda, ýüzüjilerden we komponentlerimizden has uzaklaşmagy aňladýar.
• Çeşme CSS faýllarymyz üçin “ Less ” -den “ Sass ” -a geçdi.
• Esasy CSS bölümimiz hökmünde üýtgedildi, piksel henizem media soraglary we gözenegiň özüni alyp barşy üçin ulanylýar, sebäbi enjam görnüşleri görnüşiň ululygyna täsir etmeýär px.rem
• Global şriftiň ululygy artdy 14px.16px
• Bäşinji wariant goşmak üçin ( 576pxaşaky we aşaky kiçi enjamlara ýüzlenmek) gözenek derejeleri täzelendi we -xsinfiksi şol synplardan aýyrdy. Mysal : .col-6.col-sm-4.col-md-3.
• Aýry-aýry islege bagly temany SCSS üýtgeýjileriniň üsti bilen sazlap boljak opsiýalar bilen çalyşdy (mysal üçin $enable-gradients: true).
• Grunt ýerine derek npm skriptlerini ulanmak üçin düýpli abatlaýyş ulgamyny guruň. package.jsonDevelopmenterli ösüş zerurlyklary üçin ähli skriptlere ýa-da taslama okamalarymyza serediň .
• “Bootstrap” -yň jogap bermeýän ulanylyşy indi goldanylmaýar.
• Has giňişleýin gurnama resminamalarynyň we ýöriteleşdirilen gurluşlaryň peýdasyna onlaýn Customizer-i taşlady.
• Umumy CSS emläk bahasy jübütleri we margin / padding aralyk gysga ýollary üçin onlarça täze peýdaly synplar goşuldy.

Grid ulgamy

• Flexbox-a geçirildi.
  • Panel garyndylarynda we öňünden kesgitlenen synplarda flexbox üçin goldaw goşuldy.
  • Flexbox-yň bir bölegi hökmünde dik we keseligine deňleşdiriş synplary üçin goldaw bar.
• Täzelenen gözenek synp atlary we täze gözenek derejesi.
  • Has granuliki gözegçilik üçin aşakda täze smgözenek derejesi goşuldy. 768pxBizde indi xs,,, we . sm_ Bu, şeýle hem, her bir derejäniň bir derejä ýetendigini aňladýar (şonuň üçin v3-de indi v4-de).mdlgxl.col-md-6.col-lg-6
  • xsmin-width: 0gözenek synplary , kesgitlenen piksel bahasy däl -de, stilleri ulanyp başlaýandyklaryny has takyk görkezmek üçin infiksiň talap edilmezligi üçin üýtgedildi . Munuň ýerine .col-xs-6, indi .col-6. Beýleki ähli gözenek derejeleri infiksi talap edýär (mysal üçin sm).
• Tor ölçegleri, garyndylar we üýtgeýjiler täzelendi.
  • Grid çukurlarynyň indi Sass kartasy bar, şonuň üçin her kesiş nokadynda belli bir çukur giňligini kesgitläp bilersiňiz.
  • make-col-readyTaýýar garyndyny we aýratyn sütüniň ululygyny make-colkesgitlemek üçin flexgözenek garyndylary täzelendi .max-width
  • 12Täze gözenek derejesini hasaba almak we sütünleriň iň uly ini bilen deň bölünmegini üpjün etmek üçin üýtgedilen gözenek ulgamy media gözleg nokatlary we konteýner giňlikleri .
  • Grid bölekleri we konteýner giňlikleri indi az sanly üýtgeýänleriň ýerine Sass kartalary ( $grid-breakpointswe ) arkaly işlenýär. $container-max-widthsBular @screen-*üýtgeýjileri düýbünden çalyşýar we gözenek derejelerini doly özleşdirmäge mümkinçilik berýär.
  • Mediýa soraglary hem üýtgedi. Mediýa talaplary beýannamalarymyzy her gezek deň baha bilen gaýtalamagyň ýerine, indi bar @include media-breakpoint-up/down/only. Indi ýazmagyň ýerine ýazyp @media (min-width: @screen-sm-min) { ... }bilersiňiz @include media-breakpoint-up(sm) { ... }.

Komponentler

• Täze daş-töweregi öz içine alýan komponent, kartoçkalar üçin paneller, kiçijik suratlar we guýular .
• “Glyphicons” nyşan şriftini taşlady. Nyşanlar gerek bolsa, käbir wariantlar:
  • “ Glyphicons ” -yň ýokarky wersiýasy
  • Oktikonlar
  • Şrift ajaýyp
  • Alternatiwalaryň sanawy üçin Giňeltmek sahypasyna serediň . Goşmaça teklipleriňiz barmy? Bir mesele ýa-da PR açmagyňyzy haýyş edýäris.
• Affix jQuery pluginini taşlady.
  • Munuň ýerine ulanmagy maslahat berýäris position: sticky. HTML5 serediň Jikme-jiklikler we ýörite polifill teklipleri üçin ýazmagyňyzy haýyş edýäris. Bir teklip, @supportsony ýerine ýetirmek üçin düzgüni ulanmak (mysal üçin @supports (position: sticky) { ... }) /
  • Goşmaça, positionstil däl görnüşleri ulanmak üçin “Affix” -i ulanýan bolsaňyz, polifilller ulanyş ýagdaýyňyzy goldap bilmez. Şeýle ulanmak üçin bir wariant, üçünji tarap ScrollPos-Styler kitaphanasydyr.
• Esasan birneme özleşdirilen düwmeler bolany üçin , peýjer komponentini taşlady .
• Artykmaç çagalar saýlaýjylarynyň ýerine has köp ýerleşdirilmedik synp saýlaýjylaryny ulanmak üçin ähli komponentleri diýen ýaly gaýtadan işledi.

Komponent boýunça

Bu sanawda v3.xx bilen v4.0.0 arasyndaky komponent boýunça esasy üýtgeşmeler görkezilýär.

Gaýtadan açyň

“Bootstrap 4” üçin täze “ Reboot ”, öz pikirlerimiziň birneme pikirlenýän täzeden düzmek stilleri bilen “Normalize” -e esaslanýan täze stil sahypasy. Bu faýlda peýda bolan saýlaýjylar diňe elementleri ulanýarlar - bu ýerde sapak ýok. Bu, has modully çemeleşmek üçin täzeden düzmek stillerimizi komponent stillerimizden üzňe saklaýar. Munuň içine iň möhüm täzeden düzülenleriň käbiri, köp elementdäki birliklere box-sizing: border-boxgeçmek , embaglanyşyk remstilleri we köp sanly elementiň täzeden düzülmegi.

Tipografiýa

• Uthli peýdaly .text-zatlary _utilities.scssfaýla geçirdi.
• Serhetden .page-headerbaşga-da, ähli görnüşleri kommunal hyzmatlar arkaly ulanylyp bilner.
• .dl-horizontaltaşlandy. Munuň ýerine, .rowwe çagalarynda <dl>gözenek sütün sapaklaryny (ýa-da garyndylary) ulanyň we ulanyň .<dt><dd>
• Omörite <blockquote>stil sapaklara .blockquotewe .blockquote-reverseüýtgedijä geçdi.
• .list-inlineindi çagalarynyň sanaw elementleriniň täze .list-inline-itemsynpyň ulanylmagyny talap edýär.

Suratlar

• Ady üýtgedildi .img-responsive_.img-fluid
• Ady .img-roundedüýtgedildi.rounded
• Ady .img-circleüýtgedildi.rounded-circle

Tablisa

• Saýlaýjynyň ähli ýagdaýlary diýen ýaly >aýryldy, ýagny ýerleşdirilen tablisalar indi stilleri awtomatiki usulda ene-atalaryndan miras alarlar. Bu, saýlaýjylarymyzy we potensial özleşdirmelerimizi ep-esli aňsatlaşdyrýar.
• Jogap beriji tablisalar indi örtük elementini talap etmeýär. Muňa derek .table-responsivesag tarapy goýuň <table>.
• Yzygiderlilik üçin .table-condensedüýtgedildi ..table-sm
• Täze .table-inversewariant goşuldy.
• Tablisa sözbaşysynyň üýtgedijileri goşuldy: .thead-defaultwe .thead-inverse.
• “-Prefix ” bolmagy üçin kontekst sapaklarynyň adyny .table-üýtgetdi. Şeýlelik .activebilen .success,,, we .warning,,, we . _ _ _ _.danger.info.table-active.table-success.table-warning.table-danger.table-info

Formalar

• _reboot.scssGöçürilen element faýla täzeden başlaýar .
• Ady üýtgedildi .control-label_.col-form-label
• Ady üýtgedildi .input-lgwe .input-smdegişlilikde ..form-control-lg.form-control-sm
• Ityönekeýlik .form-group-*üçin sapaklary taşlady. .form-control-*Munuň ýerine sapaklary ulanyň .
• Taşlandy we blok derejeli kömek teksti .help-blockbilen çalyşdy . .form-textIçerki kömek teksti we beýleki çeýe opsiýalar üçin peýdaly sapaklary ulanyň .text-muted.
• Taşlandy .radio-inlinewe .checkbox-inline.
• Jebisleşdirilen .checkboxwe .radiodürli .form-checksynplara .form-check-*.
• Gorizontal görnüşler düýpli abatlandy:
  • .form-horizontalSynp talaplaryny taşlady .
  • .form-groupindi .rowgaryndynyň üsti bilen stil ulanylmaýar, şonuň .rowüçin indi gorizontal gözenegiň ýerleşişi üçin zerur (meselem <div class="form-group row">).
  • .col-form-labelS bilen dikligine belliklere täze synp goşuldy .form-control.
  • Tor synplary bilen ykjam forma düzülişleri üçin täze .form-rowgoşuldy (özüňizi çalyşyň we gidiň)..row.form-row
• Customörite formalar goldawy goşuldy (bellikler, radiolar, saýlama we faýl girişleri üçin).
• CSS we pseudo .has-error- synplar arkaly HTML5 formasy bilen tassyklanan çalyşmalar we synplar..has-warning.has-success:invalid:valid
• Ady üýtgedildi .form-control-static_.form-control-plaintext

Düwmeler

• Ady üýtgedildi .btn-default_.btn-secondary
• Synagy v3-den has kiçi .btn-xsbolşy ýaly doly taşlady..btn-sm
• JQuery plugininiň döwlet düwmesi aýratynlygy button.jsaýryldy. Bu usullary $().button(string)we $().button('reset')usullary öz içine alýar. Munuň ýerine özüňizi isleýşiňiz ýaly alyp barmagyň peýdasy boljak kiçijik JavaScript ulanmagy maslahat berýäris.
  • Plaginiň beýleki aýratynlyklarynyň (düwme bellikleri, düwme radiolary, bir gezek üýtgetmek düwmeleri) v4-de saklanandygyny ýadyňyzdan çykarmaň.
• Düwmeleri ' IE9 + goldaýan ýaly [disabled]üýtgediň . Şeýle -de bolsa, henizem zerur, sebäbi ýerli maýyp meýdanlar IE11-de henizem ýalňyş .:disabled:disabledfieldset[disabled]

Düwmeler topary

• Flexbox bilen komponenti täzeden ýazyň.
• Aýyryldy .btn-group-justified_ <div class="btn-group d-flex" role="group"></div>Çalyşmak hökmünde elementleriň daşyna örtük hökmünde ulanyp bilersiňiz .w-100.
• .btn-group-xsAýyrmak üçin doly synpy taşlady .btn-xs.
• Düwme gurallar panelindäki düwme toparlarynyň arasyndaky aç-açan aralyk aýryldy; margin hyzmatlaryny ulanyň.
• Beýleki komponentler bilen ulanmak üçin gowulandyrylan resminamalar.

Açylýan ýerler

• Ene-ata saýlaýjylaryndan ähli komponentler, üýtgedijiler we ş.m. üçin ýeke-täk sapaklara geçdi.
• Açylýan menýuda ýokary ýa-da aşak oklar bilen iberilmezligi üçin ýönekeý açylyş stilleri.
• <div>Açylýan ýerler indi s ýa-da s bilen gurlup bilner <ul>.
• <a>Açylýan zatlar üçin aňsat , gurlan goldawy üpjün etmek üçin açylan açylyş stilleri we belligi <button>.
• Ady üýtgedildi .divider_.dropdown-divider
• Açylýan zatlar indi talap edýär .dropdown-item.
• Açylýan açarlary aç-açan talap etmeýär <span class="caret"></span>; indi CSS-iň üsti bilen awtomatiki üpjün ::afteredilýär .dropdown-toggle.

Grid ulgamy

• Täze 576pxgözenegiň nokady goşuldy , smhäzirki wagtda jemi bäş derejeli (,,, xswe sm) bar .mdlgxl
• Has ýönekeý gözenek synplary üçin .col-{breakpoint}-{modifier}-{size}täsirli grid üýtgediji synplarynyň adyny üýtgetdi ..{modifier}-{breakpoint}-{size}
• Täze flexbox bilen işleýän ordersynplar üçin üýtgediji synplary taşlamak we çekmek. Mysal üçin, ýerine .col-8.push-4we .col-4.pull-8, ulanarsyňyz .col-8.order-2we .col-4.order-1.
• Tor ulgamy we komponentleri üçin flexbox peýdaly synplar goşuldy.

Toparlary sanaň

• Flexbox bilen komponenti täzeden ýazyň.
• Sanaw toparlarynyň elementleriniň baglanyşygy we düwme görnüşleri üçin aç- a.list-group-itemaçan synp bilen çalşyryldy ..list-group-item-action
• .list-group-flushKartlar bilen ulanmak üçin synp goşuldy .

Modal

• Flexbox bilen komponenti täzeden ýazyň.
• Flexbox-a geçiş göz öňünde tutulanda, sözbaşydaky boşatma nyşanlarynyň deňleşdirilmegi, ähtimal, ýüzüjileri ulanmaýandygymyz sebäpli bozulandyr. Floüzýän mazmun birinji ýerde durýar, ýöne indi beýle däl flexbox bilen. Düzediş üçin modal atlardan soň gelmek üçin işden aýyrmak nyşanlaryňyzy täzeläň.
• Opsiýa ( remotedaşarky mazmuny awtomatiki usulda ýüklemek we modala girizmek üçin ulanylyp bilner) we degişli loaded.bs.modalwaka aýryldy. Muňa derek müşderi tarapyndaky şablony ýa-da maglumatlary baglanyşdyrýan çarçuwany ulanmagy ýa-da jQuery.load -a jaň etmegi maslahat berýäris .

Deňiz güýçleri

• Flexbox bilen komponenti täzeden ýazyň.
• >Höweslendirilmedik sapaklaryň üsti bilen has ýönekeý dizaýn üçin saýlaýjylaryň hemmesini diýen ýaly taşlady.
• HTML ýaly ýörite saýlaýjylaryň ýerine s, s we s .nav > li > aüçin aýratyn synplary ulanýarys . Bu, HTML-ni has giňeltmek bilen bir hatarda has çeýe edýär..nav.nav-item.nav-link

Navbar

Deňiz paneli deňleşdirmek, duýgurlyk we özleşdirmek üçin gowulaşan goldaw bilen flexbox-da doly ýazyldy.

• Jogapkärçilikli gämi duralgasynyň özüni alyp barşy, deňiz panelini nirede ýykmalydygyny saýlan ýeriňizde zerur.navbar synp arkaly ulanylýar. Ozal bu has az üýtgeýän üýtgeşme bolup, täzeden düzülmegi talap edilýärdi. .navbar-expand-{breakpoint}
• .navbar-defaulthäzirem öňküligine galýar .navbar-light. Bularyň biri her deňiz panelinde talap edilýär. Şeýle-de bolsa, bu synplar indi düzülenok; tersine, olar diňe täsir edýär ..navbar-darkbackground-colorcolor
• Gämi duralgalary indi haýsydyr bir görnüşiň fon deklarasiýasyny talap edýär. Düşünjeli sazlamalarymyz üçin () arka tarapdan saýlaň ýa-da ýokardaky ýeňil / ters synplar.bg-* bilen özüňizi düzüň .
• Flexbox stillerini göz öňünde tutup, gämi duralgalary indi aňsat tekizlemek opsiýalary üçin flexbox kömekçi enjamlaryny ulanyp bilerler.
• .navbar-togglehäzir .navbar-togglerwe dürli stilleri we içki belligi bar (mundan üç <span>s ýok).
• .navbar-formSynpy tutuşlygyna taşlady . Indi zerur däl; ýerine, .form-inlinezerur bolanda margin hyzmatlaryny ulanyň we ulanyň.
• Gämi duralgalary indi öz içine margin-bottomalmaýar border-radius. Zerur bolanda kommunal hyzmatlary ulanyň.
• Gämi duralgalaryny görkezýän ähli mysallar täze belligi goşmak üçin täzelendi.

Sahypa

• Flexbox bilen komponenti täzeden ýazyň.
• S -iň nesillerinde indi açyk synplar ( .page-item, ) talap edilýär.page-link.pagination
• Komponenti .pagerözbaşdak düzülen düwmelerden has az bolany üçin taşlady.

Çörek bölekleri

• S .breadcrumb-item-leriň nesillerinde indi aç- açan synp talap edilýär.breadcrumb

Bellikler we nyşanlar

• Elementden aýrylmak üçin .labelüýtgedildi ..badge<label>
• .badgeEtiketkalara meňzeş bolany üçin komponenti taşlady . .badge-pillŞol tegelek görnüşe derek belligi komponenti bilen üýtgedijini ulanyň .
• Nyşanlar indi sanaw toparlarynda we beýleki böleklerde awtomatiki ýagdaýda ýüzmeýär. Munuň üçin peýdaly sapaklar indi zerurdyr.
• .badge-defaulttaşlandy we .badge-secondarybaşga ýerde ulanylýan komponent üýtgediji synplaryna gabat geldi.

Paneller, suratlar we guýular

Täze kart komponenti üçin düýbünden taşlandy.

Paneller

• .panel, .cardindi flexbox bilen gurlan.
• .panel-defaultaýryldy we çalşylmady.
• .panel-groupaýryldy we çalşylmady. .card-groupçalyşmak däl, başgaçarak.
• .panel-headingto.card-header
• .panel-titleto .card-title. Islenýän görnüşe baglylykda sözbaşy elementlerini ýa-da synplary (meselem <h3>, .h3) ýa-da goýy elementleri ýa-da synplary ( meselem <strong>, ) ulanmak isläp bilersiňiz . Edil şonuň ýaly atlandyrylsa-da, başgaça görünýändigini ýadyňyzdan çykarmaň .<b>.font-weight-bold.card-title.panel-title
• .panel-bodyto.card-body
• .panel-footerto.card-footer
• .panel-primary,,, .panel-successwe Sass kartamyzdan döredilen kommunal hyzmatlar .panel-infoüçin taşlandy ..panel-warning.panel-danger.bg-.text-.border$theme-colors

Ösüş

• Kontekst .progress-bar-*sapaklaryny .bg-*kommunal hyzmatlar bilen çalyşdy. Mysal üçin, class="progress-bar progress-bar-danger"bolýar class="progress-bar bg-danger".
• Animasiýa .activeösüş barlary bilen çalşylýar .progress-bar-animated.

Karusel

• Dizaýny we dizaýny ýönekeýleşdirmek üçin ähli komponenti düýpli abatlady. Youok etmek üçin täze stillerimiz, täze görkezijiler we täze nyşanlar bar.
• CShli CSS höwürtgelenmedi we ady üýtgedildi, her synpyň prefiks edilmegini üpjün edýär .carousel-.
  • Karusel önümleri üçin .next,,, we häzir ,,, we ..prev.left.right.carousel-item-next.carousel-item-prev.carousel-item-left.carousel-item-right
  • .itemhäzirem bar .carousel-item.
  • Öňki / indiki dolandyryşlar üçin , indi .carousel-control.rightwe belli bir synp talap etmeýär..carousel-control.left.carousel-control-next.carousel-control-prev
• Kärhanalara (meselem, belli bir görnüşdäki ýazgylary görkezmek) we zerur bolanda adaty stilleri yza süýşürip, ähli täsirli stilleri aýyrdy.
• Öçürilen surat, karusel önümlerindäki şekiller üçin artykmaçlyk edýär, kömekçi hyzmatlara yza süýşürilýär.
• Täze belligi we stilleri goşmak üçin Karusel mysalyny aldy.

Tablisa

• Stilleşdirilen höwürtge stollary üçin goldaw aýyryldy. Tablehli tablisa stilleri has ýönekeý saýlaýjylar üçin v4-de miras galypdyr.
• Ters tablisanyň görnüşi goşuldy.

Kärhanalar

• Ekran, gizlin we başgalar:
  • Ekran hyzmatlaryny täsirli etdi (mysal üçin .d-nonewe d-{sm,md,lg,xl}-none).
  • .hidden-*Täze displeý enjamlary üçin hyzmatlaryň köpüsini taşlady . Mysal üçin, ýerine .hidden-sm-upulanyň .d-sm-none. .hidden-printEkranyň peýdaly atlandyryş shemasyny ulanmak üçin kömekçi enjamlaryň adyny üýtgetdi . Bu sahypanyň Jogapkärçilikli kömekçi bölüminde has giňişleýin maglumat.
  • .float-{sm,md,lg,xl}-{left,right,none}Düşünjeli ýüzüşler üçin sapaklar goşuldy we aýryldy , .pull-leftsebäbi .pull-rightolar gaty .float-leftwe .float-right.
• Görnüşi:
  • Teksti deňleşdirmek synplarymyza täsirli üýtgeşmeler goşuldy .text-{sm,md,lg,xl}-{left,center,right}.
• Düzediş we aralyk:
  • Sidehli taraplar üçin täze sesli margin we padding enjamlary , wertikal we keseligine gysga setirler goşuldy.
  • “ Flexbox” enjamlarynyň gämi ýükleri goşuldy .
  • .center-blockTäze .mx-autoklasa taşlandy .
• Köne brauzer wersiýalaryna goldaw bermek üçin Clearfix täzelendi.

Satyjy prefiksi garyndylary

“Bootstrap 3” -iň satyjy prefiksi garyndylary, v3.2.0-de köneldi, “Bootstrap 4” -de aýryldy. “ Autoprefixer ” -i ulananymyzdan soň , olar indi zerur däl.

Aşakdaky garyndylary aýyrdy 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_translatetranslate3duser-select

Resminamalar

Resminamalarymyz tagtada täzelenme aldy. Ine aşakdakylar:

• Jekyll-y henizem ulanýarys, ýöne garyndyda pluginlerimiz bar:
  • bugify.rbbrauzerimizdäki näsazlyklar sahypasyndaky ýazgylary netijeli sanamak üçin ulanylýar .
  • example.rbhighlight.rbmysal koduny has aňsat işlemäge mümkinçilik berýän deslapky pluginiň adaty çeňňegi.
  • callout.rbşuňa meňzeş adaty çeňňek, ýöne ýörite resminama çagyryşlarymyz üçin niýetlenendir.
  • markdown-block.rbtablisalar ýaly HTML elementleriniň içinde Markdown parçalaryny görkezmek üçin ulanylýar.
  • jekyll-toc mazmun tablisamyzy döretmek üçin ulanylýar.
• Dochli resminamalaryň mazmuny has aňsat redaktirlemek üçin Markdown-da (HTML ýerine) gaýtadan ýazyldy.
• Sahypalar has ýönekeý mazmun we has ýakyn iýerarhiýa üçin üýtgedildi.
• Bootstrap-yň üýtgeýänlerinden, garyndylaryndan we başga zatlardan doly peýdalanmak üçin adaty CSS-den SCSS-e geçdik.

Jogapkärçilikli kömekçi enjamlar

4hli @screen-üýtgeýjiler v4.0.0-da aýryldy. media-breakpoint-up()Munuň ýerine , media-breakpoint-down()ýa-da media-breakpoint-only()Sass garyndylaryny ýa-da Sass kartasyny ulanyň $grid-breakpoints.

displayJogapkärçilikli peýdaly synplarymyz aç-açan hyzmatlaryň peýdasyna köplenç aýryldy .

• .hiddenJQuery we usullary bilen gapma - .showgarşylygy sebäpli sapaklar aýryldy . Munuň ýerine, atributyny üýtgetmäge synanyşyň ýa - da ýaly içerki stilleri ulanyň .$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
• Classeshli .hidden-synplar aýryldy, adyny üýtgeden çap enjamlaryndan başga.
  • V3-den aýryldy:.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
  • V4 harplaryndan aýryldy:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Çap ediş hyzmatlary indi başlamaz .hidden-ýa-da .visible-däl, eýsem .d-print-.
  • Köne atlar : .visible-print-block,,,.visible-print-inline.visible-print-inline-block.hidden-print
  • Täze synplar : .d-print-block,,,.d-print-inline.d-print-inline-block.d-print-none

Aç-açan .visible-*synplary ulanmagyň ýerine, bir elementi ekranyň ululygynda gizlemän görünýärsiňiz. Bir ekrany diňe belli bir aralykda görkezmek üçin bir synpy bir .d-*-nonesynp bilen birleşdirip bilersiňiz (mysal üçin elementi diňe orta we uly enjamlarda görkezýär)..d-*-block.d-none.d-md-block.d-xl-none

V4-de gözenegiň nokatlaryna girizilen üýtgeşmeleriň, şol bir netijelere ýetmek üçin has uly nokada gitmelidigini aňladýar. Täze jogap beriji peýdaly synplar, elementiň görnükliligini görmek üçin ululyklaryň ýeke-täk diapazony hökmünde görkezip bolmaýan az ýaýran ýagdaýlary ýerleşdirmäge synanyşmaýarlar; munuň ýerine şeýle ýagdaýlarda ýörite CSS ulanmaly bolarsyňyz.