V4-e göçmek
“Bootstrap 4” taslamanyň esasy täzeden ýazylmagydyr. Iň görnükli üýtgeşmeler aşakda jemlenýär, soňra degişli komponentlere has anyk üýtgeşmeler girizilýär.
Durnukly üýtgeşmeler
Beta 3-den durnukly v4.x goýberilişimize 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-block
we . Durnukly v4 ,,, we . _inline
none
flex
inline-flex
table
table-row
table-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 diňe goşmaça koddy. - Npm bukjasy indi çeşmämizden we dist faýllaryndan başga faýllary öz içine almaýar; olara bil baglap, skriptlerimizi
node_modules
bukjanyň ü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,disabled
atribut üç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-indicator
elementiň 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::before
doldurmak we gradient.custom-control-label::after
etmek üç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-legend
Biraz gowulaşan peýdasyna aýryldy.col-form-label
. Bu usul.col-form-label-sm
we aňsatlyk bilen elementlerde.col-form-label-lg
ulanylyp bilner .<legend>
-
$custom-file-text
Fileö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 - buBrowse
düwme Sass-dan döredilen ýeke-täk pseudo elementi. TekstChoose file
indi.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-addon
we . 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-color
we ulanylyşy.badge
. Esaslandyrmak üçin reňk kontrast funksiýasyny ulanýaryscolor
,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-inverse
we.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-responsive
ulaný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-label
synpy aýyrdy. Bu synpdan peýdalanan bolsaňyz, gorizontal görnüş düzülişinde baglanyşykly giriş bilen.col-form-label
dikligine merkezleşdirilen synpyň dublikatydy.<label>
color-yiq
Emlägi öz içine alýan garyndydan,color
islendik CSS emlägi üçin ulanmaga mümkinçilik berýän bahany yzyna gaýtaryp berýän funksiýa üýtgetdi . Mysal üçin, ýerinecolor-yiq(#000)
ýazardyňyzcolor: color-yiq(#000);
.
Esasy pursatlar
- Modallarda täze
pointer-events
ulanylyşy hödürledi. Daşky.modal-dialog
wakapointer-events: none
, adaty basmak bilen işlemek üçin (islendik basylanda diňe diňlemäge mümkinçilik.modal-backdrop
döredýär), soň bolsa hakykata garşy.modal-content
çykýarpointer-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 (
576px
aşaky we aşaky kiçi enjamlara ýüzlenmek) gözenek derejeleri täzelendi we-xs
infiksi şol synplardan aýyrdy. Mysal :.col-6.col-sm-4.col-md-3
. - Aýry-aýry islege bagly mowzugy SCSS üýtgeýjileriniň üsti bilen sazlap boljak opsiýalar bilen çalyşdy (mysal üçin
$enable-gradients: true
). - Gruntyň ýerine npm skriptleriniň birnäçesini ulanmak üçin düýpli abatlanan ulgam guruň. Developmenthli
package.json
skriptleri ýa-da ýerli ösüş zerurlyklary üçin taslamamyzy okaň. - “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
sm
gözenek derejesi goşuldy.768px
Bizde indixs
,,, we .sm
_ Bu, şeýle hem, her bir derejäniň bir derejä ýetendigini aňladýar (şonuň üçin v3-de indi v4-de).md
lg
xl
.col-md-6
.col-lg-6
xs
min-width: 0
gö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 üçinsm
).
- Has granuliki gözegçilik üçin aşakda täze
- 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-ready
Taýýar garyndyny we aýratyn sütüniň ululygynymake-col
kesgitlemek üçinflex
gözenek garyndylary täzelendi .max-width
12
Tä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-breakpoints
we ) arkaly işlenýär.$container-max-widths
Bular@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,@supports
ony durmuşa geçirmek üçin düzgüni ulanmak (mysal üçin@supports (position: sticky) { ... }
) - Goşmaça,
position
stil 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.
- Munuň ýerine ulanmagy maslahat berýäris
- 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-box
geçmek , em
baglanyşyk rem
stilleri we köp sanly elementiň täzeden düzülmegi.
Tipografiýa
- Uthli peýdaly
.text-
zatlary_utilities.scss
faýla geçirdi. - Stilleri
.page-header
kommunal hyzmatlar arkaly ulanylyp bilner. .dl-horizontal
taşlandy. Munuň ýerine,.row
we çagalarynda<dl>
gözenek sütün sapaklaryny (ýa-da garyndylary) ulanyň we ulanyň .<dt>
<dd>
- Stillerini
<blockquote>
elementden bir synpa geçirmek üçin täzeden düzülen bloknotlar ,.blockquote
..blockquote-reverse
Tekst enjamlary üçin üýtgedijini taşlady . .list-inline
indi çagalarynyň sanaw elementleriniň täze.list-inline-item
synpyň 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. - Yzygiderlilik üçin
.table-condensed
üýtgedildi ..table-sm
- Täze
.table-inverse
wariant goşuldy. - Tablisa sözbaşysynyň üýtgedijileri goşuldy:
.thead-default
we.thead-inverse
. - “-Prefix ” bolmak üçin kontekst sapaklarynyň adyny
.table-
üýtgetdi. Şeýlelik.active
bilen.success
,,, we.warning
,,, we . _ _ _ _.danger
.info
.table-active
.table-success
.table-warning
.table-danger
.table-info
Formalar
_reboot.scss
Göçürilen element faýla täzeden başlaýar .- Ady üýtgedildi
.control-label
_.col-form-label
- Ady üýtgedildi
.input-lg
we.input-sm
degiş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-block
bilen çalyşdy ..form-text
Içerki kömek teksti we beýleki çeýe opsiýalar üçin peýdaly sapaklary ulanyň.text-muted
. - Taşlandy
.radio-inline
we.checkbox-inline
. - Jebisleşdirilen
.checkbox
we.radio
dürli.form-check
synplara.form-check-*
. - Gorizontal görnüşler düýpli abatlandy:
.form-horizontal
Synp talaplaryny taşlady ..form-group
indi.row
garyndynyň ü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-label
S bilen dikligine belliklere täze synp goşuldy.form-control
..form-row
Panel synplary bilen ykjam forma düzülişleri üçin täze goşuldy (.row
a.form-row
we gidiň).
- 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-xs
bolşy ýaly doly taşlady..btn-sm
- JQuery plugininiň döwlet düwmesi aýratynlygy
button.js
aý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
:disabled
fieldset[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şma hökmünde elementleri gurşap alýan hökmünde ulanyp bilersiňiz.w-100
. .btn-group-xs
Aý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 ibermezlik üçin ýönekeýleşdirilen 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::after
edilýär.dropdown-toggle
.
Grid ulgamy
- Täze
576px
gözenegiň nokady goşuldy ,sm
häzirki wagtda jemi bäş dereje (,,,xs
wesm
) bar .md
lg
xl
- 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
order
synplar üçin üýtgediji synplary taşlamak we çekmek. Mysal üçin, ýerine.col-8.push-4
we.col-4.pull-8
, ulanarsyňyz.col-8.order-2
we.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-item
açan synp bilen çalşyryldy ..list-group-item-action
.list-group-flush
Kartlar bilen ulanmak üçin synp goşuldy .
Modal
- Flexbox bilen komponenti täzeden ýazyň.
- Flexbox-a geçmegi göz öňünde tutup, sözbaşydaky boşatma nyşanlarynyň deňleşdirilmegi, ähtimal, ýüzüjileri ulanmaýandygymyz sebäpli bozulandyr. Floüzýän mazmun ilki bilen gelýär, ýöne flexbox bilen indi beýle däl. Düzediş üçin modal atlardan soň gelmek üçin işden aýyrmak nyşanlaryňyzy täzeläň.
- Görnüş
remote
(daşarky mazmuny awtomatiki usulda ýüklemek we modala girizmek üçin ulanylyp bilner) we degişliloaded.bs.modal
waka 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ňeldip, has giňeldýär..nav
.nav-item
.nav-link
Navbar
Deňiz paneli deňleşdirmek, duýgurlyk we özleşdirmek üçin gowulandyrylan goldaw bilen flexbox-da düýbünden gaýtadan ýazyldy.
- Jogapkärçilikli gämi duralgasynyň özüni alyp barşy, häzirki wagtda 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-default
hä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, diňe täsir edýär ..navbar-dark
background-color
color
- Gämi duralgalary indi haýsydyr bir görnüşiň fon deklarasiýasyny talap edýär. Fon kömekçi enjamlarymyzdan () saýlaň ýa-da däli özleşdirmek üçin
.bg-*
ýokardaky ýeňil / ters synplar 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-toggle
häzir.navbar-toggler
we dürli stilleri we içki belligi bar (mundan üç<span>
s ýok)..navbar-form
Synpy tutuşlygyna taşlady . Indi zerur däl; munuň ýerine,.form-inline
zerur bolanda margin hyzmatlaryny ulanyň we ulanyň.- Gämi duralgalary indi öz içine
margin-bottom
almaýarborder-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
- Konsolidirlenen
.label
we elementden.badge
aýrylmak<label>
we baglanyşykly komponentleri ýönekeýleşdirmek. .badge-pill
Tegelek “tabletka” görnüşi üçin üýtgediji hökmünde goşuldy .- Nyşanlar indi sanaw toparlarynda we beýleki böleklerde awtomatiki ýagdaýda ýüzmeýär. Munuň üçin peýdaly sapaklar indi zerurdyr.
.badge-default
taşlandy we.badge-secondary
baş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
,.card
indi flexbox bilen gurlan..panel-default
aýryldy we çalşylmady..panel-group
aýryldy we çalşylmady..card-group
çalyşmak däl, başgaçarak..panel-heading
to.card-header
.panel-title
to.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-body
to.card-body
.panel-footer
to.card-footer
.panel-primary
,,,.panel-success
we 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ýarclass="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şanlarymyz bar.
- CShli CSS höwürtgesiz edildi we ady üýtgedildi, her synpyň prefiks edilmegini üpjün etdi
.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
.item
häzirem bar.carousel-item
.- Öňki / indiki dolandyryşlar üçin , indi
.carousel-control.right
we belli bir synp talap etmeýär..carousel-control.left
.carousel-control-next
.carousel-control-prev
- Karusel önümleri üçin
- 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 (meselem,
.d-none
wed-{sm,md,lg,xl}-none
). .hidden-*
Täze displeý enjamlary üçin hyzmatlaryň köpüsini taşlady . Mysal üçin, ýerine.hidden-sm-up
ulanyň.d-sm-none
..hidden-print
Ekranyň 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-left
sebäbi.pull-right
olar gaty.float-left
we.float-right
.
- Ekran hyzmatlaryny täsirli etdi (meselem,
- Görnüşi:
- Teksti deňleşdirmek synplarymyza täsirli üýtgeşmeler goşuldy
.text-{sm,md,lg,xl}-{left,center,right}
.
- Teksti deňleşdirmek synplarymyza täsirli üýtgeşmeler goşuldy
- 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-block
Täze.mx-auto
klasa 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
_translate
translate3d
user-select
Resminamalar
Resminamalarymyz tagtada täzelenme aldy. Ine aşakdakylar:
- Jekyll-y henizem ulanýarys, ýöne garyndyda pluginlerimiz bar:
bugify.rb
brauzerimiziň ýalňyşlar sahypasyndaky ýazgylary netijeli sanamak üçin ulanylýar .example.rb
highlight.rb
mysal 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.- jekyll-toc mazmun tablisamyzy döretmek üçin ulanylýar.
- Dochli resminamalaryň mazmuny 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
.
display
Jogapkärçilikli peýdaly synplarymyz aç-açan hyzmatlaryň peýdasyna köplenç aýryldy .
.hidden
JQuery we usullary bilen gapma -.show
garş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
- V3-den aýryldy:
- Ç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
- Köne atlar :
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-*-none
synp 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.