in English

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 iš 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, inlineir none. Stable v4 pridėta flex, inline-flex, table, table-row, ir table-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-transitionkintamasis. 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_modulesaplanką, 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ą, supaprastinant disabledatributo 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-imagetinkintų formų žymimuosius laukelius ir radijo imtuvus. Anksčiau dabar pašalintas .custom-control-indicatorelementas 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::beforeužpildyti ir gradientą bei .custom-control-label::aftertvarkyti piktogramą.

    Norėdami atlikti tinkintą patikrą eilute, pridėkite .custom-control-inline.

  • Atnaujintas įvesties mygtukų grupių parinkiklis. Vietoj [data-toggle="buttons"] { }stiliaus ir elgesio dataatributą naudojame tik JS elgesiui ir pasikliaujame nauja .btn-group-togglestiliaus klase.

  • Pašalinta .col-form-legendšiek tiek patobulinto naudai .col-form-label. Tokiu būdu .col-form-label-smir .col-form-label-lggalima lengvai naudoti <legend>elementus.

  • Pasirinktinių failų įvestis gavo $custom-file-textSass kintamojo pakeitimą. Tai nebėra įdėtas Sass žemėlapis ir dabar veikia tik viena eilutė – Browsemygtukas dabar yra vienintelis pseudoelementas, sugeneruotas iš mūsų Sass. Dabar Choose filetekstas 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-addonir . 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-colorkintamasis ir jo naudojimas .badge. Naudojame spalvų kontrasto funkciją, kad pasirinktume colorpagal background-color, todėl kintamasis nereikalingas.
  • grayscale()Funkcija pervardyta į gray(), kad būtų išvengta konflikto su CSS vietiniu grayscalefiltru.
  • Pervardytas .table-inverse, .thead-inverseir .thead-defaultį .*-darkir .*-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-responsivejūsų naudojama yra panašesnė į .table-responsive-md. Dabar galite naudoti .table-responsivearba .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 ir „v3.x“ turi tam tikrų saugos pataisymų.
  • Pašalinta nenaudojama .form-control-labelklasė. Jei naudojote šią klasę, tai buvo dublikatas .col-form-labelklasės, kuri vertikaliai centre <label>su ja susijusi įvestis horizontaliuose formų išdėstymuose.
  • Pakeistas color-yiqiš maišytuvo, kuriame buvo colorypatybė, į funkciją, kuri grąžina reikšmę, todėl galite ją naudoti bet kuriai CSS nuosavybei. Pavyzdžiui, vietoj color-yiq(#000), rašytumėte color: color-yiq(#000);.

Pabrėžia

  • Įvestas naujas pointer-eventsmodalų naudojimas. Išorinė dalis .modal-dialogpraeina per įvykius naudojant pointer-events: nonetinkintą paspaudimų apdorojimą (suteikia galimybę tiesiog klausytis, ar .modal-backdropnėra paspaudimų), o tada atsveria juos .modal-contentnaudojant pointer-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ų.
  • Iš Less perjungta į Sass mūsų šaltinio CSS failams.
  • Perjungta iš pxį remkaip 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 14pxiki 16px.
  • Atnaujintos tinklelio pakopos, kad būtų pridėta penktoji parinktis (skirta mažesniems 576pxir žemiau esantiems įrenginiams) ir pašalintas -xsįdėklas 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 smtinklelio pakopa, 768pxkad būtų galima tiksliau valdyti. Dabar turime xs, sm, md, lgir xl. Tai taip pat reiškia, kad kiekviena pakopa buvo padidinta vienu lygiu (taigi .col-md-6, 3 versijoje dabar .col-lg-6yra v4).
    • xstinklelio klasės buvo pakeistos, kad nereikėtų įdėklo, kad būtų tiksliau nurodyta, jog jos pradeda taikyti stilius nuo min-width: 0nustatytos pikselio reikšmės, o ne. Vietoj to .col-xs-6, tai dabar .col-6. Visoms kitoms tinklelio pakopoms reikalingas infiksas (pvz., sm).
  • Atnaujinti tinklelio dydžiai, deriniai ir kintamieji.
    • Tinklelio latakai dabar turi Sass žemėlapį, todėl kiekviename lūžio taške galite nurodyti konkrečius latakų plotius.
    • Atnaujinti tinklelio maišytuvai, kad būtų galima naudoti make-col-readyparuošiamąjį maišytuvą ir a make-col, kad būtų galima nustatyti flexir max-widthatskirų 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š 12didžiausio pločio.
    • Tinklelio lūžio taškai ir konteinerių pločiai dabar tvarkomi naudojant Sass žemėlapius ( $grid-breakpointsir $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 verte, 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 šulinėliai naujam visa apimančiam komponentui – kortelėms .
  • Atsisakė Glyphicons piktogramos šrifto. Jei jums reikia piktogramų, yra keletas parinkčių:
  • Atsisakė Affix jQuery papildinio.
    • position: stickyVietoj to rekomenduojame naudoti . Žr. HTML5 Įveskite išsamią informaciją ir konkrečias polifildo rekomendacijas. Vienas iš pasiūlymų yra naudoti @supportstaisyklę jai įgyvendinti (pvz., @supports (position: sticky) { ... })
    • Jei naudojote Affix papildomiems ne positionstiliams 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-boxpakeitimas, perėjimas iš emvienetų rem, nuorodų stilių ir daugelio formos elementų nustatymo iš naujo.

Tipografija

  • Visos komunalinės paslaugos perkeltos .text-į _utilities.scssfailą.
  • Numesta .page-header, nes jo stilius galima pritaikyti per komunalines paslaugas.
  • .dl-horizontalbuvo numestas. Vietoj to naudokite .rowir <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-reverseteksto paslaugų modifikatoriaus.
  • .list-inlinedabar reikalauja, kad antrinio sąrašo elementams būtų taikoma nauja .list-inline-itemklasė.

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-smnuoseklumą.
  • Pridėta nauja .table-inverseparinktis.
  • Pridėta lentelės antraštės modifikatorių: .thead-defaultir .thead-inverse.
  • Pervardytos kontekstinės klasės, kad būtų .table--priešdėlis. Taigi .active, .success, .warning, .dangerir .info, .table-active, .table-success, ir . .table-warning_.table-danger.table-info

Formos

  • Perkeltas elementas iš naujo nustatomas į _reboot.scssfailą.
  • Pervadinta .control-labelį .col-form-label.
  • Pervardyta atitinkamai į .input-lgir ..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-blockir pakeistas .form-textbloko lygio pagalbos tekstu. Norėdami gauti įterptąjį pagalbos tekstą ir kitas lanksčias parinktis, naudokite paslaugų klases, pvz ., .text-muted.
  • Nukrito .radio-inlineir .checkbox-inline.
  • Konsoliduota .checkboxir .radioį .form-checkįvairias .form-check-*klases.
  • Pertvarkytos horizontalios formos:
    • Atsisakė .form-horizontalklasės reikalavimo.
    • .form-groupnebetaiko stilių iš .rowvia mixin, todėl .rowdabar reikalingas horizontaliam tinklelio išdėstymui (pvz., <div class="form-group row">).
    • Pridėta nauja .col-form-labelklasė prie vertikaliai centre esančių etikečių su .form-controls.
    • Pridėta naujų .form-rowkompaktiškų formų išdėstymų su tinklelio klasėmis (pakeiskite savo .rowį a .form-rowir eikite).
  • Pridėtas pasirinktinių formų palaikymas (žymimiesiems laukeliams, radijo imtuvams, pasirinkimams ir failų įvestims).
  • .has-error, .has-warning, ir klasės pakeistos HTML5 .has-successformos patvirtinimu naudojant CSS :invalidir :validpseudoklases.
  • Pervadinta .form-control-staticį .form-control-plaintext.

Mygtukai

  • Pervadinta .btn-defaultį .btn-secondary.
  • Visiškai atmetė .btn-xsklasę, nes .btn-smji proporcingai daug mažesnė nei v3.
  • „ JQuery“ papildinio būsenos mygtuko funkcija button.jsbuvo 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]į :disabledIE9+ palaikomus :disabled. Tačiau fieldset[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.
  • Visiškai nutraukė .btn-group-xsklasę pašalinus .btn-xs.
  • Pašalintas aiškus tarpas tarp mygtukų grupių mygtukų įrankių juostose; naudokite maržos paslaugas dabar.
  • Patobulinta dokumentacija, skirta naudoti su kitais komponentais.
  • 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 meniu galima sukurti naudojant <div>s arba <ul>s dabar.
  • <a>Atnaujinti išskleidžiamųjų meniu stiliai ir žymėjimas, kad būtų lengva , integruota <button>išskleidžiamojo meniu elementų palaikymas.
  • Pervadinta .dividerį .dropdown-divider.
  • Išskleidžiamojo sąrašo elementams dabar reikia .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 576pxtinklelio lūžio taškas kaip sm, tai reiškia, kad dabar iš viso yra penkios pakopos ( xs, sm, md, lgir xl).
  • 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 orderklasėms. Pavyzdžiui, vietoj .col-8.push-4ir .col-4.pull-8naudokite .col-8.order-2ir .col-4.order-1.
  • Pridėtos „flexbox“ naudingumo klasės, skirtos tinklo sistemai ir komponentams.

Išvardykite grupes

  • Perrašė komponentą su „flexbox“.
  • Pakeista a.list-group-itemaiškia klase , .list-group-item-actionskirta sąrašo grupės elementų nuorodų ir mygtukų versijoms formuoti.
  • Pridėta .list-group-flushklasė, skirta naudoti su kortelėmis.
  • 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“ tai nebėra. Atnaujinkite atsisakymo piktogramas, kad jos būtų pataisytos po modalinių pavadinimų.
  • Parinktis remote(kuri gali būti naudojama automatiškai įkelti ir įterpti išorinį turinį į modalą) ir atitinkamas loaded.bs.modalįvykis buvo pašalinti. Vietoj to rekomenduojame naudoti kliento šabloną arba duomenų susiejimo sistemą arba pačiam iškviesti jQuery.load .
  • Perrašė komponentą su „flexbox“.
  • Atmesti beveik visi >parinkikliai, siekiant paprastesnio stiliaus naudojant neįdėtas klases.
  • Vietoj specifinių HTML parinktuvų, pvz .nav > li > a., , naudojame atskiras .navs, .nav-items ir .nav-links klases. Tai daro jūsų HTML lankstesnį ir padidina išplėtimą.

Naršymo juosta buvo visiškai perrašyta „flexbox“ patobulinta suderinimo, reagavimo ir tinkinimo palaikymas.

  • Reaguojantis naršymo juostos elgesys dabar taikomas .navbarklasei 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-defaultyra dabar .navbar-light, nors .navbar-darkišlieka toks pat. Kiekvienoje naršymo juostoje būtinas vienas iš jų. Tačiau šios klasės nebeturi background-colors; vietoj to jie iš esmės veikia tik color.
  • 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“ priemones, kad būtų lengviau suderinti.
  • .navbar-toggleyra dabar .navbar-togglerir turi skirtingus stilius bei vidinį žymėjimą (ne daugiau trijų <span>s).
  • Visiškai išmetė .navbar-formklasę. Tai nebėra būtina; vietoj to tiesiog naudokite .form-inlineir prireikus taikykite maržos paslaugas.
  • Naršymo juostose nebėra margin-bottomarba border-radiuspagal 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 .paginationpalikuonims
  • Visiškai atmetė .pagerkomponentą, nes tai buvo šiek tiek daugiau nei pritaikyti kontūro mygtukai.
  • Aiškioji klasė , .breadcrumb-itemdabar reikalinga s .breadcrumbpalikuonims

Etiketės ir ženkleliai

  • Sujungta .labelir .badgeatskirti nuo <label>elemento bei supaprastinti susijusius komponentus.
  • Pridėta .badge-pillkaip 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-defaultbuvo atmestas ir .badge-secondarypridė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-defaultpašalintas ir nėra pakeistas.
  • .panel-grouppašalintas ir nėra pakeistas. .card-groupnė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-titlenors 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-dangerbuvo atmesti .bg-, .text-, ir .borderkomunalinės paslaugos, sugeneruotos iš mūsų $theme-colorsSass žemėlapio.

Progresas

  • Kontekstinės .progress-bar-*klasės .bg-*pakeistos komunalinėmis paslaugomis. Pavyzdžiui, class="progress-bar progress-bar-danger"tampa class="progress-bar bg-danger".
  • .activeAnimacinėse eigos juostose pakeista .progress-bar-animated.
  • 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, .leftir .rightdabar yra .carousel-item-next, .carousel-item-prev, .carousel-item-left, ir .carousel-item-right.
    • .itemyra ir dabar .carousel-item.
    • Ankstesniems / sekamiems valdikliams .carousel-control.rightir .carousel-control.leftyra dabar .carousel-control-nextir .carousel-control-prev, tai reiškia, kad jiems nebereikia konkrečios bazinės klasės.
  • 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-noneir d-{sm,md,lg,xl}-none).
    • Atsisakė didžiosios dalies .hidden-*komunalinių paslaugų, skirtų naujoms rodymo programoms . Pavyzdžiui, vietoj .hidden-sm-upnaudokite .d-sm-none. Pervardijo .hidden-printkomunalines paslaugas, kad būtų naudojama rodymo paslaugų įvardijimo schema. Daugiau informacijos rasite šio puslapio skiltyje Atsakingos paslaugos .
    • Pridėtos .float-{sm,md,lg,xl}-{left,right,none}klasės, skirtos reaguojančioms plūdėms ir pašalintos .pull-left, .pull-rightnes jos yra perteklinės .float-leftir .float-right.
  • Tipas:
    • Pridėjome reaguojančių variantų į mūsų teksto lygiavimo klases .text-{sm,md,lg,xl}-{left,center,right}.
  • Lygiavimas ir tarpai:
  • „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-transformtranslatetranslate3duser-select

Dokumentacija

Mūsų dokumentai taip pat buvo atnaujinti. Štai žemiausia:

  • Vis dar naudojame Jekyll, bet rinkinyje yra papildinių:
    • bugify.rbnaudojamas norint efektyviai išvardyti įrašus mūsų naršyklės klaidų puslapyje.
    • example.rbyra pasirinktinė numatytojo highlight.rbpapildinio šakutė, leidžianti lengviau tvarkyti pavyzdinį kodą.
    • callout.rbyra 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-breakpointsSass žemėlapį.

Mūsų atsakingos komunalinių paslaugų klasės buvo iš esmės pašalintos aiškių displaykomunalinių paslaugų naudai.

  • Klasės .hiddenir .showbuvo 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;"ir style="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
  • 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

Užuot naudoję aiškias .visible-*klases, elementą padarote matomu tiesiog nepaslėpdami jo tokiu ekrano dydžiu. Galite sujungti vieną .d-*-noneklasę su viena .d-*-blockklase, 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.