Source

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 prie mūsų stabilios 4.0 versijos, 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, ir 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 savuoju 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, be to, „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į žinyno 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 tinkintų 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 komunalines 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ų 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.

Puslapių rašymas

  • 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.
    • For prev/next controls, .carousel-control.right and .carousel-control.left are now .carousel-control-next and .carousel-control-prev, meaning they no longer require a specific base class.
  • Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.
  • Removed image overrides for images in carousel items, deferring to utilities.
  • Tweaked the Carousel example to include the new markup and styles.

Tables

  • Removed support for styled nested tables. All table styles are now inherited in v4 for simpler selectors.
  • Added inverse table variant.

Utilities

  • Display, hidden, and more:
    • Made display utilities responsive (e.g., .d-none and d-{sm,md,lg,xl}-none).
    • Dropped the bulk of .hidden-* utilities for new display utilities. For example, instead of .hidden-sm-up, use .d-sm-none. Renamed the .hidden-print utilities to use the display utility naming scheme. More info under the Responsive utilities section of this page.
    • Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
  • Type:
    • Added responsive variations to our text alignment classes .text-{sm,md,lg,xl}-{left,center,right}.
  • Alignment and spacing:
  • Clearfix updated to drop support for older browser versions.

Vendor prefix mixins

Bootstrap 3’s vendor prefix mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use Autoprefixer, they’re no longer necessary.

Removed the following mixins: 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

Documentation

Our documentation received an upgrade across the board as well. Here’s the low down:

  • We’re still using Jekyll, but we have plugins in the mix:
    • bugify.rb is used to efficiently list out the entries on our browser bugs page.
    • example.rb is a custom fork of the default highlight.rb plugin, allowing for easier example-code handling.
    • callout.rb is a similar custom fork of that, but designed for our special docs callouts.
    • jekyll-toc is used to generate our table of contents.
  • All docs content has been rewritten in Markdown (instead of HTML) for easier editing.
  • Pages have been reorganized for simpler content and a more approachable hierarchy.
  • We moved from regular CSS to SCSS to take full advantage of Bootstrap’s variables, mixins, and more.

Responsive utilities

All @screen- variables have been removed in v4.0.0. Use the media-breakpoint-up(), media-breakpoint-down(), or media-breakpoint-only() Sass mixins or the $grid-breakpoints Sass map instead.

Our responsive utility classes have largely been removed in favor of explicit display utilities.

  • The .hidden and .show classes have been removed because they conflicted with jQuery’s $(...).hide() and $(...).show() methods. Instead, try toggling the [hidden] attribute or use inline styles like style="display: none;" and style="display: block;".
  • All .hidden- classes have been removed, save for the print utilities which have been renamed.
    • Removed from v3: .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
    • Removed from v4 alphas: .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Print utilities no longer start with .hidden- or .visible-, but with .d-print-.
    • Old names: .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.