Perkeliama į v4
„Bootstrap 4“ yra pagrindinis viso projekto perrašymas. Žymiausi pakeitimai apibendrinti toliau, o po to pateikiami konkretesni atitinkamų komponentų pakeitimai.
Stabilūs pokyčiai
Pereinant nuo 3 beta versijos į stabilų v4.x leidimą, nėra jokių stabdančių pakeitimų, tačiau yra keletas reikšmingų pakeitimų.
Spausdinimas
-
Ištaisytos sugedusios spausdinimo paslaugos. Anksčiau
.d-print-*
klasės naudojimas netikėtai panaikindavo bet kurią kitą.d-*
klasę. Dabar jie atitinka kitas rodymo paslaugas ir galioja tik tai laikmenai (@media print
). -
Išplėstos galimos spausdinimo rodymo priemonės, kad atitiktų kitas paslaugas. Beta 3 ir senesnės versijos turėjo tik
block
,inline-block
,inline
, irnone
. Stable v4 pridėtaflex
,inline-flex
,table
,table-row
, irtable-cell
. -
Ištaisytas spaudinio peržiūros atvaizdavimas visose naršyklėse su naujais spausdinimo stiliais, kurie nurodo
@page
size
.
Beta 3 pakeitimai
Nors „Beta 2“ beta versijos etapo metu pastebėjome didžiąją dalį mūsų lūžtančių pakeitimų, vis dar turime keletą, kuriuos reikia išspręsti beta 3 versijoje. Šie pakeitimai taikomi, jei atnaujinate į 3 beta versiją iš Beta 2 arba bet kurios senesnės „Bootstrap“ versijos.
Įvairūs
- Pašalintas nenaudojamas
$thumbnail-transition
kintamasis. Mes nieko neperkėlėme, todėl tai buvo tik papildomas kodas. - Į npm paketą nebėra jokių kitų failų, išskyrus mūsų šaltinio ir dist failus; jei pasitikėjote jais ir vykdėte mūsų scenarijus per
node_modules
aplanką, turėtumėte pritaikyti savo darbo eigą.
Formos
-
Perrašė pasirinktinius ir numatytuosius žymimuosius laukelius ir radijas. Dabar abu turi atitinkamą HTML struktūrą (išorinė
<div>
su seserimi<input>
ir<label>
) ir tuos pačius išdėstymo stilius (numatytasis sudėtinis, įtrauktas į modifikatoriaus klasę). Tai leidžia mums nustatyti etiketės stilių pagal įvesties būseną, supaprastinantdisabled
atributo palaikymą (anksčiau reikėjo pirminės klasės) ir geriau palaikyti mūsų formos patvirtinimą.Taip pat pakeitėme CSS, kad būtų galima valdyti kelis
background-image
tinkintų formų žymimuosius laukelius ir radijo imtuvus. Anksčiau dabar pašalintas.custom-control-indicator
elementas turėjo fono spalvą, gradientą ir SVG piktogramą. Tinkinant fono gradientą, reikėjo pakeisti visus juos kiekvieną kartą, kai reikėjo pakeisti tik vieną. Dabar turime.custom-control-label::before
užpildyti ir gradientą bei.custom-control-label::after
tvarkyti piktogramą.Norėdami atlikti tinkintą patikrą eilute, pridėkite
.custom-control-inline
. -
Atnaujintas įvesties mygtukų grupių parinkiklis. Vietoj
[data-toggle="buttons"] { }
stiliaus ir elgesiodata
atributą naudojame tik JS elgesiui ir pasikliaujame nauja.btn-group-toggle
stiliaus klase. -
Pašalinta
.col-form-legend
šiek tiek patobulinto naudai.col-form-label
. Tokiu būdu.col-form-label-sm
ir.col-form-label-lg
lengvai gali būti naudojamas<legend>
elementams. -
Pasirinktinių failų įvestis gavo
$custom-file-text
Sass kintamojo pakeitimą. Tai nebėra įdėtas Sass žemėlapis ir dabar veikia tik viena eilutė –Browse
mygtukas dabar yra vienintelis pseudoelementas, sukurtas iš mūsų Sass. DabarChoose file
tekstas yra iš.custom-file-label
.
Įvesties grupės
-
Įvesties grupės priedai dabar yra būdingi jų vietai, palyginti su įvestimi. Atsisakėme dviejų naujų užsiėmimų
.input-group-addon
ir . Dabar turite aiškiai naudoti priedą arba priedą, kad supaprastintumėte didžiąją dalį mūsų CSS. Įdėkite mygtukus į priedą arba priedą taip, kaip jie būtų bet kur kitur, bet apvyniokite tekstą į ..input-group-btn
.input-group-prepend
.input-group-append
.input-group-text
-
Dabar palaikomi patvirtinimo stiliai, kaip ir kelios įvestys (nors vienoje grupėje galite patvirtinti tik vieną įvestį).
-
Dydžio klasės turi būti pagrindinės
.input-group
, o ne atskirų formos elementų.
Beta 2 pakeitimai
Būdami beta versijoje, siekiame, kad nebūtų stabdančių pakeitimų. Tačiau viskas ne visada vyksta taip, kaip planuota. Toliau pateikiami esminiai pakeitimai, į kuriuos reikia atsižvelgti pereinant nuo 1 beta versijos prie 2 versijos.
Lūžęs
- Pašalintas
$badge-color
kintamasis ir jo naudojimas.badge
. Naudojame spalvų kontrasto funkciją, kad pasirinktumecolor
pagalbackground-color
, todėl kintamasis nereikalingas. grayscale()
Funkcija pervardyta įgray()
, kad būtų išvengta konflikto su CSS vietiniugrayscale
filtru.- Pervardytas
.table-inverse
,.thead-inverse
ir.thead-default
į.*-dark
ir.*-light
, atitinkantis mūsų kitur naudojamas spalvų schemas. - Interaktyvios lentelės dabar sukuria klases kiekvienam tinklelio lūžio taškui. Tai skiriasi nuo 1 beta versijos, nes
.table-responsive
jūsų naudojama yra panašesnė į.table-responsive-md
. Dabar galite naudoti.table-responsive
arba.table-responsive-{sm,md,lg,xl}
pagal poreikį. - Atšauktas „Bower“ palaikymas, nes paketų tvarkyklė nebenaudojama dėl alternatyvų (pvz., „Yarn“ arba „npm“). Norėdami gauti daugiau informacijos, žr. bower/bower#2298 .
- „Bootstrap“ vis dar reikalauja „jQuery 1.9.1“ ar naujesnės versijos, tačiau patariama naudoti 3.x versiją, nes „Bootstrap“ palaiko „v3.x“ palaikomas naršykles, be to, „v3.x“ turi tam tikrų saugos pataisymų.
- Pašalinta nenaudojama
.form-control-label
klasė. Jei naudojote šią klasę, tai buvo dublikatas.col-form-label
klasės, kuri vertikaliai centre<label>
su ja susijusi įvestis horizontaliuose formų išdėstymuose. - Pakeistas
color-yiq
iš maišytuvo, kuriame buvocolor
ypatybė, į funkciją, kuri grąžina reikšmę, todėl galite ją naudoti bet kuriai CSS nuosavybei. Pavyzdžiui, vietojcolor-yiq(#000)
, rašytumėtecolor: color-yiq(#000);
.
Pabrėžia
- Įvestas naujas
pointer-events
modalų naudojimas. Išorinė dalis.modal-dialog
praeina per įvykius naudojantpointer-events: none
tinkintą paspaudimų apdorojimą (suteikia galimybę tiesiog klausytis, ar.modal-backdrop
nėra paspaudimų), o tada atsveria juos.modal-content
naudojantpointer-events: auto
.
Santrauka
Štai pagrindiniai bilietų elementai, kuriuos turėtumėte žinoti pereidami nuo 3 versijos prie 4 versijos.
Naršyklės palaikymas
- Atsisakė IE8, IE9 ir iOS 6 palaikymo. v4 dabar yra tik IE10+ ir iOS 7+. Svetainėms, kurioms reikia bet kurio iš jų, naudokite v3.
- Pridėtas oficialus Android v5.0 Lollipop naršyklės ir WebView palaikymas. Ankstesnės „Android“ naršyklės ir „WebView“ versijos palaikomos tik neoficialiai.
Globalūs pokyčiai
- „Flexbox“ įjungta pagal numatytuosius nustatymus. Apskritai tai reiškia, kad reikia atsisakyti plūdinių ir daugiau mūsų komponentų.
- Mūsų šaltinio CSS failams perjungta iš Less į Sass .
- Perjungta iš
px
įrem
kaip pagrindinį CSS rinkinį, nors pikseliai vis dar naudojami medijos užklausoms ir tinklelio veikimui, nes įrenginio peržiūros sritys neturi įtakos tipo dydžiui. - Bendras šrifto dydis padidintas nuo
14px
iki16px
. - Atnaujintos tinklelio pakopos, kad būtų pridėta penktoji parinktis (skirta mažesniems
576px
ir žemiau esantiems įrenginiams) ir pašalintas-xs
infiksas iš tų klasių. Pavyzdys.col-6.col-sm-4.col-md-3
:. - Atskira pasirenkama tema buvo pakeista konfigūruojamomis parinktimis naudojant SCSS kintamuosius (pvz.,
$enable-gradients: true
). - Sukurta sistema buvo kapitaliai suremontuota, kad vietoj Grunt būtų naudojami npm scenarijai. Žr
package.json
. visus scenarijus arba mūsų projekto readme vietinės plėtros poreikiams. - Nereaguojantis „Bootstrap“ naudojimas nebepalaikomas.
- Atsisakė internetinės tinkinimo priemonės, o ne platesnė sąrankos dokumentacija ir pritaikytos versijos.
- Pridėta dešimtys naujų naudingumo klasių , skirtų įprastoms CSS nuosavybės ir vertės poroms ir paraštės / užpildymo tarpų nuorodoms.
Tinklelio sistema
- Perkelta į „flexbox“.
- Pridėtas „flexbox“ palaikymas tinklelio mišiniuose ir iš anksto nustatytose klasėse.
- Kaip „flexbox“ dalis, įtraukta vertikalių ir horizontalių lygiavimo klasių palaikymas.
- Atnaujinti tinklelio klasių pavadinimai ir nauja tinklelio pakopa.
- Toliau pridėta nauja
sm
tinklelio pakopa,768px
kad būtų galima tiksliau valdyti. Dabar turimexs
,sm
,md
,lg
irxl
. Tai taip pat reiškia, kad kiekviena pakopa buvo padidinta vienu lygiu (taigi.col-md-6
, 3 versijoje dabar.col-lg-6
yra v4). xs
tinklelio klasės buvo pakeistos, kad nereikėtų įdėklo, kad būtų tiksliau nurodyta, jog jos pradeda taikyti stilius nuomin-width: 0
nustatytos pikselio reikšmės, o ne. Vietoj to.col-xs-6
, tai dabar.col-6
. Visoms kitoms tinklelio pakopoms reikalingas infiksas (pvz.,sm
).
- Toliau pridėta nauja
- Atnaujinti tinklelio dydžiai, deriniai ir kintamieji.
- Tinklelio latakai dabar turi Sass žemėlapį, todėl kiekviename lūžio taške galite nurodyti konkretų latakų plotį.
- Atnaujinti tinklelio maišytuvai, kad būtų galima naudoti
make-col-ready
paruošiamąjį maišytuvą ir amake-col
, kad būtų galima nustatytiflex
irmax-width
atskirų stulpelių dydžiams. - Pakeisti tinklelio sistemos medijos užklausų lūžio taškai ir sudėtinio rodinio plotis, kad būtų atsižvelgta į naują tinklelio pakopą ir užtikrinta, kad stulpeliai būtų tolygiai dalijami iš
12
didžiausio pločio. - Tinklelio lūžio taškai ir konteinerių pločiai dabar tvarkomi naudojant Sass žemėlapius (
$grid-breakpoints
ir$container-max-widths
), o ne keletą atskirų kintamųjų. Jie visiškai pakeičia@screen-*
kintamuosius ir leidžia visiškai pritaikyti tinklelio pakopas. - Keitėsi ir žiniasklaidos užklausos. Užuot kiekvieną kartą kartoję žiniasklaidos užklausų deklaracijas su ta pačia reikšme, dabar turime
@include media-breakpoint-up/down/only
. Dabar užuot rašę@media (min-width: @screen-sm-min) { ... }
, galite rašyti@include media-breakpoint-up(sm) { ... }
.
Komponentai
- Panaikintos plokštės, miniatiūros ir šuliniai naujam visa apimančiam komponentui – kortelėms .
- Atsisakė Glyphicons piktogramos šrifto. Jei jums reikia piktogramų, yra keletas parinkčių:
- „ Glyphicons “ versija
- Oktikonai
- Šriftas Nuostabus
- Alternatyvų sąrašą rasite puslapyje Išplėsti . Turite papildomų pasiūlymų? Atidarykite problemą arba PR.
- Atsisakė Affix jQuery papildinio.
position: sticky
Vietoj to rekomenduojame naudoti . Žr. HTML5 Įveskite išsamią informaciją ir konkrečias polifildo rekomendacijas. Vienas iš pasiūlymų yra naudoti@supports
taisyklę jai įgyvendinti (pvz.,@supports (position: sticky) { ... }
)- Jei naudojote Affix papildomiems ne
position
stiliams pritaikyti, polifills gali nepalaikyti jūsų naudojimo atvejo. Viena iš tokio naudojimo galimybių yra trečiosios šalies „ScrollPos-Styler“ biblioteka.
- Atmetė gaviklio komponentą , nes tai iš esmės buvo šiek tiek pritaikyti mygtukai.
- Beveik visi komponentai buvo pertvarkyti , kad būtų naudojami daugiau neįdėtų klasių parinktuvų, o ne pernelyg specifiniai antriniai parinkikliai.
Pagal komponentą
Šiame sąraše išryškinami pagrindiniai pakeitimai pagal komponentą nuo v3.xx iki v4.0.0.
Perkraukite
„Bootstrap 4“ naujiena yra „ Reboot “ – naujas stiliaus lapas, pagrįstas „Normalize“ ir mūsų pačių šiek tiek apgalvotais atstatymo stiliais. Šiame faile esantys parinkikliai naudoja tik elementus – čia nėra klasių. Tai išskiria mūsų atstatymo stilius nuo komponentų stilių, kad būtų labiau modulinis požiūris. Kai kurie iš svarbiausių nustatymų iš naujo yra daugelio elementų box-sizing: border-box
pakeitimas, perėjimas iš em
vienetų rem
, nuorodų stilių ir daugelio formos elementų nustatymo iš naujo.
Tipografija
- Visos komunalinės paslaugos perkeltos
.text-
į_utilities.scss
failą. - Numesta
.page-header
, nes jo stilius galima pritaikyti per komunalines paslaugas. .dl-horizontal
buvo numestas. Vietoj to naudokite.row
ir<dl>
naudokite tinklelio stulpelių klases (arba mišinius) jo<dt>
ir<dd>
vaikams.- Pertvarkytos blokinės kabutės, perkeliant jų stilius iš
<blockquote>
elemento į vieną klasę,.blockquote
. Atsisakė.blockquote-reverse
teksto paslaugų modifikatoriaus. .list-inline
dabar reikalaujama, kad antrinio sąrašo elementams būtų taikoma nauja.list-inline-item
klasė.
Vaizdai
- Pervadinta
.img-responsive
į.img-fluid
. - Pervadinta
.img-rounded
į.rounded
- Pervadinta
.img-circle
į.rounded-circle
Lentelės
- Beveik visi
>
parinkiklio egzemplioriai buvo pašalinti, o tai reiškia, kad įdėtos lentelės dabar automatiškai paveldės stilius iš savo tėvų. Tai labai supaprastina mūsų parinkiklius ir galimus pritaikymus. - Pervardyta
.table-condensed
į.table-sm
nuoseklumą. - Pridėta nauja
.table-inverse
parinktis. - Pridėta lentelės antraštės modifikatorių:
.thead-default
ir.thead-inverse
. - Pervardytos kontekstinės klasės, kad būtų
.table-
-priešdėlis. Taigi.active
,.success
,.warning
,.danger
ir.info
,.table-active
,.table-success
, ir ..table-warning
_.table-danger
.table-info
Formos
- Perkeltas elementas iš naujo nustatomas į
_reboot.scss
failą. - Pervadinta
.control-label
į.col-form-label
. - Pervardyta atitinkamai į
.input-lg
ir ..input-sm
.form-control-lg
.form-control-sm
- Paprastumo
.form-group-*
dėlei pamokos buvo nutrauktos. Vietoj to naudokite.form-control-*
klases dabar. - Jis buvo atmestas
.help-block
ir pakeistas.form-text
bloko lygio pagalbos tekstu. Norėdami gauti įterptąjį žinyno tekstą ir kitas lanksčias parinktis, naudokite paslaugų klases, pvz .,.text-muted
. - Nukrito
.radio-inline
ir.checkbox-inline
. - Konsoliduota
.checkbox
ir.radio
į.form-check
įvairias.form-check-*
klases. - Pertvarkytos horizontalios formos:
- Atsisakė
.form-horizontal
klasės reikalavimo. .form-group
nebetaiko stilių iš.row
via mixin, todėl.row
dabar reikalingas horizontaliam tinklelio išdėstymui (pvz.,<div class="form-group row">
).- Pridėta nauja
.col-form-label
klasė prie vertikaliai centre esančių etikečių su.form-control
s. - Pridėta naujų
.form-row
kompaktiškų formų išdėstymų su tinklelio klasėmis (pakeiskite savo.row
į a.form-row
ir eikite).
- Atsisakė
- Pridėtas tinkintų formų palaikymas (žymimiesiems laukeliams, radijo imtuvams, pasirinkimams ir failų įvestims).
.has-error
,.has-warning
, ir klasės pakeistos HTML5.has-success
formos patvirtinimu naudojant CSS:invalid
ir:valid
pseudoklases.- Pervadinta
.form-control-static
į.form-control-plaintext
.
Mygtukai
- Pervadinta
.btn-default
į.btn-secondary
. - Numetė
.btn-xs
klasę, nes.btn-sm
ji proporcingai daug mažesnė nei v3. - „ jQuery“ papildinio būsenos mygtuko funkcija
button.js
buvo atmesta. Tai apima$().button(string)
ir$().button('reset')
metodus. Vietoj to patariame naudoti nedidelį tinkintą „JavaScript“, nes tai bus naudinga, nes elgsis tiksliai taip, kaip norite.- Atminkite, kad kitos papildinio funkcijos (mygtukų žymės langeliai, mygtukų radijas, vieno perjungimo mygtukai) buvo išsaugoti 4 versijoje.
- Pakeiskite mygtukus
[disabled]
į:disabled
IE9+ palaikomus:disabled
. Tačiaufieldset[disabled]
vis tiek būtina, nes vietiniai išjungti laukų rinkiniai vis dar yra klaidingi IE11 .
Mygtukų grupė
- Perrašė komponentą su „flexbox“.
- Pašalinta
.btn-group-justified
. Kaip pakaitalą galite naudoti<div class="btn-group d-flex" role="group"></div>
kaip apvyniojimą aplink elementus su.w-100
. - Išmetė
.btn-group-xs
klasę visiškai pašalinus.btn-xs
. - Pašalintas aiškus tarpas tarp mygtukų grupių mygtukų įrankių juostose; naudokite maržos komunalines paslaugas dabar.
- Patobulinta dokumentacija, skirta naudoti su kitais komponentais.
Išskleidžiamieji meniu
- Perjungta iš pirminių parinktuvų į vienaskaitos klases visiems komponentams, modifikatoriams ir kt.
- Supaprastinti išskleidžiamojo meniu stiliai, kad nebebūtų pristatomos aukštyn arba žemyn nukreiptomis rodyklėmis, pritvirtintomis prie išskleidžiamojo meniu.
- Išskleidžiamuosius sąrašus galima sukurti naudojant
<div>
s arba<ul>
s dabar. - Atnaujinti išskleidžiamieji stiliai ir žymėjimas, kad būtų lengva, integruota pagalba
<a>
ir<button>
išskleidžiamojo meniu elementų palaikymas. - Pervadinta
.divider
į.dropdown-divider
. - Dabar reikalingi išskleidžiamieji elementai
.dropdown-item
. - Išskleidžiamiesiems perjungimams nebereikia aiškaus
<span class="caret"></span>
; tai dabar teikiama automatiškai per CSS::after
..dropdown-toggle
Tinklelio sistema
- Pridėtas naujas
576px
tinklelio lūžio taškas kaipsm
, tai reiškia, kad dabar iš viso yra penkios pakopos (xs
,sm
,md
,lg
irxl
). - Pervardytos reaguojančios tinklelio modifikavimo klasės iš
.col-{breakpoint}-{modifier}-{size}
į.{modifier}-{breakpoint}-{size}
į paprastesnes tinklelio klases. - Panaikintos stūmimo ir traukimo modifikatorių klasės, skirtos naujoms „flexbox“ varomoms
order
klasėms. Pavyzdžiui, vietoj.col-8.push-4
ir.col-4.pull-8
naudokite.col-8.order-2
ir.col-4.order-1
. - Pridėtos „flexbox“ naudingumo klasės, skirtos tinklo sistemai ir komponentams.
Išvardykite grupes
- Perrašė komponentą su „flexbox“.
- Pakeistas
a.list-group-item
aiškia klase,.list-group-item-action
skirta sąrašo grupės elementų nuorodų ir mygtukų versijoms formuoti. - Pridėta
.list-group-flush
klasė, skirta naudoti su kortelėmis.
Modalinis
- Perrašė komponentą su „flexbox“.
- Perėjus prie „flexbox“, atmetimo piktogramų išlygiavimas antraštėje greičiausiai bus pažeistas, nes nebenaudojame plūduriuojančių elementų. Slankusis turinys yra pirmoje vietoje, tačiau naudojant „flexbox“ to nebėra. Atnaujinkite atsisakymo piktogramas, kad jos būtų po modalinių pavadinimų, kuriuos reikia pataisyti.
- Parinktis
remote
(kuri gali būti naudojama automatiškai įkelti ir įterpti išorinį turinį į modalą) ir atitinkamasloaded.bs.modal
įvykis buvo pašalinti. Vietoj to rekomenduojame naudoti kliento šabloną arba duomenų susiejimo sistemą arba pačiam iškviesti jQuery.load .
Navs
- Perrašė komponentą su „flexbox“.
- Nukrito beveik visi
>
parinkikliai, siekiant paprastesnio stiliaus naudojant neįdėtas klases. - Vietoj specifinių HTML parinktuvų, pvz
.nav > li > a
., , naudojame atskiras.nav
s,.nav-item
s ir.nav-link
s klases. Tai daro jūsų HTML lankstesnį ir padidina išplečiamumą.
Navigacijos juosta
Naršymo juosta buvo visiškai perrašyta „flexbox“ patobulinta suderinimo, reagavimo ir tinkinimo palaikymas.
- Reaguojantis naršymo juostos elgesys dabar taikomas
.navbar
klasei per būtiną.navbar-expand-{breakpoint}
vietą, kurioje pasirenkate, kur sutraukti naršymo juostą. Anksčiau tai buvo mažiau kintama modifikacija ir reikėjo perkompiliuoti. .navbar-default
yra dabar.navbar-light
, nors.navbar-dark
išlieka toks pat. Kiekvienoje naršymo juostoje būtinas vienas iš jų. Tačiau šios klasės nebeturibackground-color
s; vietoj to jie iš esmės tik paveikiacolor
.- Dabar naršymo juostoms reikalinga tam tikra fono deklaracija. Pasirinkite iš mūsų foninių paslaugų (
.bg-*
) arba nustatykite savo naudodami aukščiau pateiktas šviesos / atvirkštines klases, kad galėtumėte tinkinti . - Atsižvelgiant į „flexbox“ stilius, naršymo juostose dabar galima naudoti „flexbox“ paslaugų programas, kad būtų lengviau suderinti.
.navbar-toggle
yra dabar.navbar-toggler
ir turi skirtingus stilius bei vidinį žymėjimą (ne daugiau trijų<span>
s).- Visiškai išmetė
.navbar-form
klasę. Tai nebėra būtina; vietoj to tiesiog naudokite.form-inline
ir prireikus taikykite maržos paslaugas. - Naršymo juostose nebėra
margin-bottom
arbaborder-radius
pagal numatytuosius nustatymus. Jei reikia, naudokite komunalines paslaugas. - Visi pavyzdžiai su naršymo juostomis buvo atnaujinti, kad būtų įtrauktas naujas žymėjimas.
Puslapiai
- Perrašė komponentą su „flexbox“.
- Aiškios klasės (
.page-item
,.page-link
) dabar reikalingos s.pagination
palikuonims - Visiškai atmetė
.pager
komponentą, nes tai buvo šiek tiek daugiau nei pritaikyti kontūro mygtukai.
Duonos trupiniai
- Aiškioji klasė ,
.breadcrumb-item
dabar reikalinga s.breadcrumb
palikuonims
Etiketės ir ženkleliai
- Sujungta
.label
ir.badge
atskirti nuo<label>
elemento bei supaprastinti susijusius komponentus. - Pridėta
.badge-pill
kaip suapvalintos „tabletės“ išvaizdos modifikatorius. - Ženkliukai nebebus automatiškai iškeliami sąrašų grupėse ir kituose komponentuose. Dabar tam reikalingos komunalinių paslaugų klasės.
.badge-default
buvo atmestas ir.badge-secondary
pridėtas, kad atitiktų kitur naudojamas komponentų modifikavimo klases.
Plokštės, miniatiūros ir šuliniai
Visiškai atsisakyta naujojo kortelės komponento.
Plokštės
.panel
į.card
, dabar sukurta naudojant „flexbox“..panel-default
pašalintas ir nėra pakeistas..panel-group
pašalintas ir nėra pakeistas..card-group
nėra pakaitalas, jis skiriasi..panel-heading
į.card-header
.panel-title
į.card-title
. Atsižvelgiant į norimą išvaizdą, taip pat galite naudoti antraštės elementus arba klases (pvz<h3>
., ,.h3
) arba paryškintus elementus ar klases (pvz<strong>
.,<b>
, ,.font-weight-bold
). Atminkite, kad.card-title
nors ir pavadintas panašiai, jis atrodo kitaip nei.panel-title
..panel-body
į.card-body
.panel-footer
į.card-footer
.panel-primary
,.panel-success
,.panel-info
,.panel-warning
, ir.panel-danger
buvo atmesti.bg-
,.text-
, ir.border
komunalinės paslaugos, sugeneruotos iš mūsų$theme-colors
Sass žemėlapio.
Progresas
- Kontekstinės
.progress-bar-*
klasės.bg-*
pakeistos komunalinėmis paslaugomis. Pavyzdžiui,class="progress-bar progress-bar-danger"
tampaclass="progress-bar bg-danger"
. .active
Animacinėse eigos juostose pakeista.progress-bar-animated
.
Karuselė
- Peržiūrėtas visas komponentas, siekiant supaprastinti dizainą ir stilių. Turime mažiau stilių, kuriuos galite nepaisyti, naujų indikatorių ir naujų piktogramų.
- Visas CSS buvo išjungtas ir pervardytas, užtikrinant, kad kiekvienos klasės priešdėlis būtų
.carousel-
.- Karuselės elementams ,
.next
,.prev
,.left
ir.right
dabar yra.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
, ir.carousel-item-right
. .item
yra ir dabar.carousel-item
.- Ankstesniems / sekamiems valdikliams
.carousel-control.right
ir.carousel-control.left
yra dabar.carousel-control-next
ir.carousel-control-prev
, tai reiškia, kad jiems nebereikia konkrečios bazinės klasės.
- Karuselės elementams ,
- Pašalintas visas interaktyvus stilius, atidėtas komunalinėms paslaugoms (pvz., antraštėms rodyti tam tikrose peržiūros srityse) ir pasirinktinius stilius, jei reikia.
- Pašalintas karuselės elementų vaizdų nepaisymas, atidedant komunalines paslaugas.
- Patikslino karuselės pavyzdį, kad būtų įtrauktas naujas žymėjimas ir stiliai.
Lentelės
- Pašalintas stilizuotų įdėtųjų lentelių palaikymas. Visi lentelių stiliai dabar yra paveldimi 4 versijoje, kad būtų lengviau pasirinkti.
- Pridėtas atvirkštinis lentelės variantas.
Komunalinės paslaugos
- Rodyti, paslėpti ir daugiau:
- Ekrano paslaugų programos tapo jautrios (pvz.,
.d-none
ird-{sm,md,lg,xl}-none
). - Atsisakė didžiosios dalies
.hidden-*
komunalinių paslaugų, skirtų naujoms rodymo programoms . Pavyzdžiui, vietoj.hidden-sm-up
naudokite.d-sm-none
. Pervardijo.hidden-print
komunalines paslaugas, kad būtų naudojama rodymo paslaugų įvardijimo schema. Daugiau informacijos rasite Responsive Utilities rasite šio puslapio skiltyje - Pridėtos
.float-{sm,md,lg,xl}-{left,right,none}
klasės, skirtos reaguojančioms plūdėms ir pašalintos.pull-left
,.pull-right
nes jos yra perteklinės.float-left
ir.float-right
.
- Ekrano paslaugų programos tapo jautrios (pvz.,
- Tipas:
- Pridėjome reaguojančių variantų į mūsų teksto lygiavimo klases
.text-{sm,md,lg,xl}-{left,center,right}
.
- Pridėjome reaguojančių variantų į mūsų teksto lygiavimo klases
- Lygiavimas ir tarpai:
- Pridėtos naujos jautrios paraštės ir užpildymo priemonės visoms pusėms, taip pat vertikalios ir horizontalios santrumpos.
- Pridėta „ flexbox“ komunalinių paslaugų gausa .
- Iškrito
.center-block
į naują.mx-auto
klasę.
- „Clearfix“ atnaujinta, kad būtų panaikintas senesnių naršyklės versijų palaikymas.
Pardavėjo priešdėlių mišiniai
„Bootstrap 3“ tiekėjo prefiksų rinkiniai, kurie buvo nebenaudojami 3.2.0 versijoje, buvo pašalinti iš „Bootstrap 4“. Kadangi naudojame Autoprefixer , jie nebereikalingi.
Pašalinti šie mišiniai : 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
Dokumentacija
Mūsų dokumentai taip pat buvo atnaujinti. Štai žemiausia:
- Vis dar naudojame Jekyll, bet rinkinyje yra papildinių:
bugify.rb
naudojamas norint efektyviai išvardyti įrašus mūsų naršyklės klaidų puslapyje.example.rb
yra pasirinktinė numatytojohighlight.rb
papildinio šakutė, leidžianti lengviau tvarkyti pavyzdinį kodą.callout.rb
yra panaši pasirinktinė šakutė, bet skirta mūsų specialioms dokumentų figūrinėms išnašoms.- jekyll-toc naudojamas mūsų turiniui sukurti.
- Visas dokumentų turinys buvo perrašytas naudojant Markdown (vietoj HTML), kad būtų lengviau redaguoti.
- Puslapiai buvo pertvarkyti siekiant paprastesnio turinio ir lengviau pasiekiamos hierarchijos.
- Perėjome nuo įprasto CSS prie SCSS, kad išnaudotume visas „Bootstrap“ kintamųjų, mišinių ir kt.
Atsakingos komunalinės paslaugos
Visi @screen-
kintamieji buvo pašalinti iš 4.0.0 versijos. Vietoj to naudokite media-breakpoint-up()
, media-breakpoint-down()
, arba media-breakpoint-only()
Sass mišinius arba $grid-breakpoints
Sass žemėlapį.
Mūsų atsakingos komunalinių paslaugų klasės buvo iš esmės pašalintos aiškių display
paslaugų naudai.
- Klasės
.hidden
ir.show
buvo pašalintos, nes jos nesuderinamos su jQuery$(...).hide()
ir$(...).show()
metodais. Vietoj to pabandykite perjungti[hidden]
atributą arba naudokite eilutinius stilius, pvz .,style="display: none;"
irstyle="display: block;"
. - Visos
.hidden-
klasės buvo pašalintos, išskyrus spausdinimo paslaugas, kurios buvo pervardytos.- Pašalinta iš 3 versijos:
.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
- Pašalinta iš 4 alfa versijos:
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
- Pašalinta iš 3 versijos:
- Spausdinimo paslaugos prasideda ne
.hidden-
arba.visible-
, o.d-print-
.- Seni vardai:
.visible-print-block
,.visible-print-inline
,.visible-print-inline-block
,.hidden-print
- Naujos klasės:
.d-print-block
,.d-print-inline
,.d-print-inline-block
,.d-print-none
- Seni vardai:
Užuot naudoję aiškias .visible-*
klases, elementą padarote matomu tiesiog nepaslėpdami jo tokiu ekrano dydžiu. Galite sujungti vieną .d-*-none
klasę su viena .d-*-block
klase, kad elementas būtų rodomas tik tam tikru ekrano dydžių intervalu (pvz .d-none.d-md-block.d-xl-none
., elementas rodomas tik vidutiniuose ir dideliuose įrenginiuose).
Atminkite, kad 4 versijos tinklelio lūžio taškų pakeitimai reiškia, kad norint pasiekti tokius pačius rezultatus, turėsite padidinti vienu lūžio tašku. Naujosios reaguojančios naudingumo klasės nesistengia pritaikyti retesnių atvejų, kai elemento matomumas negali būti išreikštas kaip vienas gretimas peržiūros srities dydžių diapazonas; tokiais atvejais turėsite naudoti pasirinktinį CSS.