Siirtyminen versioon 4

Bootstrap 4 on koko projektin merkittävä uudelleenkirjoitus. Alla on yhteenveto merkittävimmistä muutoksista, joita seuraa tarkemmat muutokset asiaankuuluviin komponentteihin.

Vakaat muutokset

Siirtyminen Beta 3 -versiosta vakaaseen v4.x-julkaisuumme ei sisällä murtuvia muutoksia, mutta siinä on joitain merkittäviä muutoksia.

Tulostus

• Korjattu rikkinäiset tulostusapuohjelmat. Aikaisemmin .d-print-*luokan käyttö ohitti odottamatta minkä tahansa muun .d-*luokan. Nyt ne vastaavat muita näyttöapuohjelmiamme ja koskevat vain kyseistä mediaa ( @media print).

• Laajennettu käytettävissä olevia tulostusnäyttöapuohjelmia vastaamaan muita apuohjelmia. Beta 3:ssa ja sitä vanhemmissa oli vain block, inline-block, inlineja none. Vakaa v4 lisätty flex, inline-flex, table, table-rowja table-cell.

• Korjattu tulostuksen esikatselun renderöinti eri selaimissa uusilla tulostustyyleillä, jotka määrittävät @page size.

Beta 3 muutokset

Vaikka Beta 2 näki suurimman osan murtuvista muutoksistamme beta-vaiheen aikana, meillä on silti muutamia, jotka on korjattava Beta 3 -julkaisussa. Nämä muutokset ovat voimassa, jos päivität Beta 3:een Beta 2:sta tai mistä tahansa Bootstrapin vanhemmasta versiosta.

Sekalaista

• $thumbnail-transitionKäyttämätön muuttuja poistettiin . Emme siirtäneet mitään, joten se oli vain lisäkoodi.
• Npm-paketti ei enää sisällä muita tiedostoja kuin lähde- ja dist-tiedostomme; Jos luotit niihin ja suoritit komentosarjojamme node_moduleskansion kautta, sinun tulee mukauttaa työnkulkuasi.

Lomakkeet

• Kirjoitti uudelleen sekä mukautetut että oletusvalintaruudut ja radiot. Nyt molemmilla on vastaava HTML-rakenne (ulompi <div>ja sisarus <input>ja <label>) ja samat asettelutyylit (pinottu oletusarvo, rivissä muokkausluokan kanssa). Tämän avulla voimme muotoilla nimiön syötteen tilan perusteella, mikä yksinkertaistaa disabledattribuutin tukea (aikaisemmin edellytti yläluokkaa) ja tukee paremmin lomakkeen vahvistusta.

  Osana tätä olemme muuttaneet CSS:ää useiden background-imagemukautettujen lomakkeiden valintaruutujen ja radioiden hallintaan. Aiemmin nyt poistetulla .custom-control-indicatorelementillä oli taustaväri, liukuväri ja SVG-kuvake. Taustagradientin mukauttaminen merkitsi kaikkien niiden vaihtamista aina, kun piti vaihtaa vain yksi. Nyt meillä on .custom-control-label::beforetäyttö ja kaltevuus ja .custom-control-label::afterkäsittelee kuvaketta.

  Jos haluat tehdä mukautetun sekin rivissä, lisää .custom-control-inline.

• Päivitetty valitsin syöttöpohjaisille painikeryhmille. Tyylin ja käyttäytymisen sijaan [data-toggle="buttons"] { }käytämme dataattribuuttia vain JS-käyttäytymiseen ja luotamme uuteen .btn-group-toggletyyliluokkaan.

• Poistettu .col-form-legendhyväksi hieman parannettu .col-form-label. Tällä tavalla .col-form-label-smja .col-form-label-lgsitä voidaan käyttää <legend>elementeissä helposti.

• Mukautetut tiedostosyötteet saivat muutoksen $custom-file-textSass-muuttujaansa. Se ei ole enää sisäkkäinen Sass-kartta, ja se käyttää nyt vain yhtä merkkijonoa – Browsepainike, koska se on nyt ainoa Sassistamme luotu pseudoelementti. Teksti Choose filetulee nyt osoitteesta .custom-file-label.

Syöteryhmät

• Syöttöryhmän lisäosat ovat nyt erityisiä niiden sijoittelun mukaan suhteessa tuloon. Olemme lopettaneet .input-group-addonja .input-group-btnkaksi uutta luokkaa, .input-group-prependja .input-group-append. Sinun on käytettävä nimenomaisesti liitettä tai prependiä nyt, mikä yksinkertaistaa suurta osaa CSS:stämme. Sijoita painikkeet liitteen tai prependin sisään niin kuin ne olisivat missä tahansa muualla, mutta rivitä teksti muotoon .input-group-text.

• Validointityylejä tuetaan nyt, samoin kuin useita syötteitä (vaikka voit vahvistaa vain yhden syötteen ryhmää kohden).

• Kokoluokkien on oltava ylätason .input-groupeikä yksittäisten lomakeelementtien kohdalla.

Beta 2 muutokset

Beta-vaiheessa pyrimme siihen, että meillä ei ole murtavia muutoksia. Asiat eivät kuitenkaan aina mene suunnitelmien mukaan. Alla on murtomuutokset, jotka tulee pitää mielessä siirryttäessä Beta 1:stä Beta 2:een.

Murtumassa

• Poistettu $badge-colormuuttuja ja sen käyttö .badge. Käytämme värikontrastifunktiota valitaksemme arvon colorperusteella background-color, joten muuttuja on tarpeeton.
• grayscale()Funktio nimettiin uudelleen muotoon gray(), jotta vältytään ristiriidalta CSS-natiivisuodattimen kanssa grayscale.
• Nimetty uudelleen .table-inverse, .thead-inverseja .thead-defaultmuotoon .*-darkja .*-lightvastaamaan muualla käytettyjä väriteemojamme.
• Responsiiviset taulukot luovat nyt luokkia jokaiselle ruudukon keskeytyspisteelle. Tämä eroaa Beta 1:stä siinä mielessä, että .table-responsivekäyttämäsi on enemmän kuin .table-responsive-md. Voit nyt käyttää .table-responsivetai .table-responsive-{sm,md,lg,xl}tarpeen mukaan.
• Bowerin tuki poistettiin, koska paketinhallinta on poistettu käytöstä vaihtoehtojen (esim. Lanka tai npm) vuoksi. Katso bower/bower#2298 lisätietoja varten.
• Bootstrap vaatii edelleen jQueryn 1.9.1:n tai uudemman, mutta suosittelemme käyttämään versiota 3.x, koska v3.x:n tuetut selaimet ovat niitä, joita Bootstrap tukee ja v3.x:ssä on joitain tietoturvakorjauksia.
• .form-control-labelKäyttämätön luokka poistettiin . Jos käytit tätä luokkaa, se oli .col-form-labelluokan kopio, joka keskitti pystysuunnassa a <label>:n ja siihen liittyvän syötteen vaakasuuntaisissa lomakeasetteluissa.
• Muutettiin ominaisuuden color-yiqsisältävästä mixinistä colorfunktioksi, joka palauttaa arvon, jolloin voit käyttää sitä missä tahansa CSS-omaisuudessa. Esimerkiksi sen sijaan color-yiq(#000), että kirjoitat color: color-yiq(#000);.

Kohokohdat

• Otettiin käyttöön uusi pointer-eventskäyttö modaaleissa. Ulompi .modal-dialogkulkee tapahtumien läpi pointer-events: nonemukautettua napsautusten käsittelyä varten (jolloin on mahdollista vain kuunnella mitä .modal-backdroptahansa napsautusta) ja sitten vastustaa sitä todellisten napsautusten .modal-contentosalta pointer-events: auto.

Yhteenveto

Tässä ovat suuret lippukohteet, jotka sinun tulee olla tietoisia siirtyessäsi v3:sta v4:ään.

Selaimen tuki

• IE8:n, IE9:n ja iOS 6:n tuki poistettiin. v4 on nyt vain IE10+ ja iOS 7+. Jos sivusto tarvitsee jompaakumpaa näistä, käytä v3.
• Lisätty virallinen tuki Android v5.0 Lollipopin selaimelle ja WebView'lle. Android-selaimen ja WebView'n aiempia versioita tuetaan vain epävirallisesti.

Globaalit muutokset

• Flexbox on oletuksena käytössä. Yleensä tämä tarkoittaa siirtymistä pois kelluvista ja muista komponenteistamme.
• Vaihdettiin Lessistä Sassiin lähde -CSS-tiedostoillemme.
• Vaihdettu pxensisijaiseksi remCSS-yksiköksi, vaikka pikseleitä käytetään edelleen mediakyselyihin ja ruudukon toimintaan, koska tyypin koko ei vaikuta laitteen näyttöportteihin.
• Maailmanlaajuinen fonttikoko kasvatettiin 14pxarvosta 16px.
• Uusittu ruudukkotasoja lisätäkseen viidennen vaihtoehdon (pienemmille laitteille 576pxja niiden alapuolelle) ja poistettiin -xsliite näistä luokista. Esimerkki: .col-6.col-sm-4.col-md-3.
• Erillinen valinnainen teema on korvattu SCSS-muuttujien (esim. $enable-gradients: true) kautta määritettävillä asetuksilla.
• Rakennajärjestelmä on uusittu käyttämään sarjaa npm-skriptejä Gruntin sijaan. Katso package.jsonkaikki skriptit tai projektimme readme paikallisten kehitystarpeiden osalta.
• Bootstrapin ei-responsiivista käyttöä ei enää tueta.
• Luovutettiin online-mukauttajasta laajemman asennusdokumentaation ja räätälöityjen koontiversioiden hyväksi.
• Lisätty kymmeniä uusia hyödyllisyysluokkia yleisille CSS-ominaisuus-arvo-pareille ja marginaalin/täytön välin pikanäppäimille.

Verkkojärjestelmä

• Siirretty flexboxiin.
  • Lisätty tuki flexboxille grid mixineissä ja ennalta määritellyissä luokissa.
  • Osana flexboxia sisälsi tuen pysty- ja vaakasuuntaisille kohdistusluokille.
• Päivitetyt ruudukkoluokkien nimet ja uusi ruudukkotaso.
  • smUusi ruudukkotaso lisätty alle 768pxtarkemman hallinnan saamiseksi. Meillä on nyt xs, sm, md, lgja xl. Tämä tarkoittaa myös sitä, että jokaista tasoa on nostettu yhden tason ylöspäin ( .col-md-6eli v3:ssa on nyt .col-lg-6v4).
  • xsruudukkoluokat on muokattu niin, että ne eivät vaadi liitettä kuvaamaan tarkemmin, että ne alkavat soveltaa tyylejä min-width: 0eivätkä määritetystä pikseliarvosta. Sen sijaan .col-xs-6se on nyt .col-6. Kaikki muut ruudukkotasot vaativat liitteen (esim. sm).
• Päivitetyt ruudukkokoot, sekoitukset ja muuttujat.
  • Ristikkokouruissa on nyt Sass-kartta, joten voit määrittää tietyt kourujen leveydet jokaisessa keskeytyskohdassa.
  • Päivitetty grid mixins hyödyntämään make-col-readyprep mixin ja a make-colasettaa flexja max-widthyksittäisten sarakkeiden koon.
  • Ruudukkojärjestelmän mediakyselyn keskeytyskohtia ja säilön leveyksiä muutettu, jotta voidaan ottaa huomioon uusi ruudukkotaso ja varmistaa, että sarakkeet ovat tasaisesti jaettavissa 12niiden enimmäisleveydellä.
  • Ruudukon keskeytyspisteitä ja säilön leveyksiä käsitellään nyt Sass-karttojen ( $grid-breakpointsja $container-max-widths) avulla kourallisen erillisten muuttujien sijaan. Nämä korvaavat @screen-*muuttujat kokonaan ja antavat sinun mukauttaa ruudukkotasoja täysin.
  • Myös mediakyselyt ovat muuttuneet. Sen sijaan, että toistaisimme mediakyselyilmoituksemme joka kerta samalla arvolla, meillä on nyt @include media-breakpoint-up/down/only. Nyt @media (min-width: @screen-sm-min) { ... }voit kirjoittaa kirjoittamisen sijaan @include media-breakpoint-up(sm) { ... }.

Komponentit

• Pudotettu paneelit, pikkukuvat ja kuopat uudelle kaiken kattavalle komponentille, korteille .
• Glyphicons-kuvakkeen fontti poistettiin. Jos tarvitset kuvakkeita, joitain vaihtoehtoja ovat:
  • Glyphiconsin ylävirran versio
  • Octicons
  • Fontti Mahtava
  • Katso Laajenna-sivulta luettelo vaihtoehdoista. Onko sinulla lisäehdotuksia? Avaa ongelma tai PR.
• Poistettiin Affix jQuery -laajennus.
  • Suosittelemme position: stickysen käyttöä. Katso lisätietoja ja erityisiä polyfill-suosituksia kohdassa HTML5. Yksi ehdotus on käyttää @supportssääntöä sen toteuttamiseen (esim @supports (position: sticky) { ... }.
  • Jos käytit positionAffixia lisätyylien käyttämiseen, monitäytteet eivät ehkä tue käyttötapaasi. Yksi vaihtoehto tällaisiin käyttötarkoituksiin on kolmannen osapuolen ScrollPos-Styler- kirjasto.
• Hakulaite poistettiin, koska se oli pohjimmiltaan hieman mukautettuja painikkeita.
• Lähes kaikki komponentit muutettiin uudelleen käyttämään enemmän sisäkkäisiä luokkavalitsimia ylimääräisten lapsivalitsimien sijaan.

Komponentin mukaan

Tämä luettelo korostaa tärkeimmät muutokset komponenttikohtaisesti v3.xx:n ja v4.0.0:n välillä.

Käynnistä uudelleen

Uutta Bootstrap 4:ssä on Reboot , uusi tyylitaulukko, joka perustuu Normaliseen omilla hieman mielivaltaisilla palautustyyleillämme. Tässä tiedostossa näkyvät valitsimet käyttävät vain elementtejä – tässä ei ole luokkia. Tämä eristää nollaustyylimme komponenttityyleistämme modulaarisemman lähestymistavan saamiseksi. Jotkut tärkeimmistä nollauksista, joita tämä sisältää, ovat muutos , box-sizing: border-boxsiirtyminen yksiköistä monissa elementeissä, linkkityylejä ja monia lomakeelementtien nollauksia.emrem

Typografia

• Kaikki .text-apuohjelmat siirretty _utilities.scsstiedostoon.
• Pudotettu .page-header, koska sen tyylejä voidaan soveltaa apuohjelmien kautta.
• .dl-horizontalon pudonnut. .rowKäytä sen sijaan <dl>ruudukon sarakeluokkia (tai mixinejä) sen <dt>ja <dd>lasten kohdalla.
• Uudelleensuunnitellut lainausmerkit, siirtämällä niiden tyylit <blockquote>elementistä yhteen luokkaan, .blockquote. Tekstiapuohjelmien .blockquote-reversemuokkaus hylättiin.
• .list-inlinevaatii nyt, että sen alatason luettelokohteisiin sovelletaan uutta .list-inline-itemluokkaa.

Kuvat

• Nimetty uudelleen .img-responsivemuotoon .img-fluid.
• Nimetty .img-roundeduudelleen.rounded
• Nimetty .img-circleuudelleen.rounded-circle

Taulukot

• Melkein kaikki >valitsimen esiintymät on poistettu, mikä tarkoittaa, että sisäkkäiset taulukot perivät nyt automaattisesti tyylit vanhemmiltaan. Tämä yksinkertaistaa huomattavasti valitsimiamme ja mahdollisia mukautuksiamme.
• Nimetty uudelleen .table-condensedjohdonmukaisuuden .table-smvuoksi.
• Lisätty uusi .table-inversevaihtoehto.
• Lisätty taulukon otsikon muokkaajat: .thead-defaultja .thead-inverse.
• Kontekstuaaliset luokat nimettiin uudelleen, jotta niillä on .table--etuliite. Tästä syystä .active, .success, .warning, .dangerja .info, .table-active, .table-success, .table-warningja .table-danger..table-info

Lomakkeet

• Siirretty elementti palautetaan _reboot.scsstiedostoon.
• Nimetty uudelleen .control-labelmuotoon .col-form-label.
• Nimetty uudelleen .input-lgja .input-smnimeksi .form-control-lgja .form-control-smvastaavasti.
• Luokitukset hylätty .form-group-*yksinkertaisuuden vuoksi. Käytä .form-control-*sen sijaan luokkia nyt.
• Pudotettiin .help-blockja korvattiin lohkotason .form-textohjetekstillä. Käytä upotettua ohjetekstiä ja muita joustavia vaihtoehtoja varten hyödyllisyysluokkia, kuten .text-muted.
• Pudonnut .radio-inlineja .checkbox-inline.
• Konsolidoitu .checkboxja .radioeri luokkiin .form-check..form-check-*
• Vaakasuuntaiset muodot kunnostettu:
  • Luokkavaatimus poistettiin .form-horizontal.
  • .form-groupei enää käytä tyylejä .rowvia mixinistä, joten .rowvaaditaan nyt vaakasuuntaisissa ruudukkoasetteluissa (esim. <div class="form-group row">).
  • Lisätty uusi .col-form-labelluokka pystysuoraan keskitettyihin tarroihin, joissa on .form-controls.
  • Lisätty uutta .form-rowkompakteihin muoto-asetteluihin ruudukkoluokilla (vaihda .rowa .form-rowja mene).
• Lisätty mukautettujen lomakkeiden tuki (valintaruuduille, radioille, valinnaille ja tiedostosyötteille).
• Korvattu luokat .has-error, .has-warning, ja .has-successluokat HTML5-lomakkeen validoinnilla CSS:n :invalidja :validpseudoluokkien kautta.
• Nimetty uudelleen .form-control-staticmuotoon .form-control-plaintext.

Painikkeet

• Nimetty uudelleen .btn-defaultmuotoon .btn-secondary.
• Lopetti .btn-xsluokan kokonaan, koska .btn-smse on suhteellisesti paljon pienempi kuin v3.
• jQuery - laajennuksen tilallinen painikeominaisuus on button.jspoistettu. Tämä sisältää menetelmät $().button(string)ja $().button('reset'). Suosittelemme käyttämään sen sijaan pientä muokattua JavaScriptiä, jonka etuna on, että se käyttäytyy juuri niin kuin haluat.
  • Huomaa, että muut laajennuksen ominaisuudet (painikkeiden valintaruudut, painikeradiot, yhden vaihtopainikkeen painikkeet) on säilytetty v4:ssä.
• Muuta painikkeita [disabled]kohtaan :disabledIE9+:n tukema :disabled. Se on kuitenkin fieldset[disabled]edelleen tarpeen, koska alkuperäiset käytöstä poistetut kenttäjoukot ovat edelleen virheellisiä IE11:ssä .

Painikeryhmä

• Kirjoitettiin komponentti uudelleen flexboxilla.
• Poistettu .btn-group-justified. Korvaajana voit käyttää <div class="btn-group d-flex" role="group"></div>kääreenä elementtien ympärille .w-100.
• Lopetti .btn-group-xsluokan kokonaan poiston vuoksi .btn-xs.
• Poistettu selkeä välilyönti painikeryhmien välillä painiketyökaluriveistä. käytä marginaaliapuohjelmia nyt.
• Parannettu dokumentaatio käytettäväksi muiden komponenttien kanssa.

Pudotusvalikosta

• Vaihdettu ylävalitsimista yksittäisiin luokkiin kaikille komponenteille, modifioijille jne.
• Yksinkertaistetut pudotusvalikoiden tyylit, jotta niitä ei enää toimiteta, kun alas- tai ylöspäin osoittavat nuolet on liitetty avattavaan valikkoon.
• Pudotusvalikot voidaan rakentaa <div>s:llä tai <ul>s:llä nyt.
• <a>Uudelleen rakennetut pudotusvalikon tyylit ja merkinnät tarjoavat helpon ja sisäänrakennetun tuen <button>avattavalle valikolle.
• Nimetty uudelleen .dividermuotoon .dropdown-divider.
• Pudotusvalikon kohteet vaativat nyt .dropdown-item.
• Pudotusvalikon kytkimet eivät enää vaadi nimenomaista <span class="caret"></span>; tämä tarjotaan nyt automaattisesti CSS:n ::afterkautta .dropdown-toggle.

Verkkojärjestelmä

• Lisätty uusi 576pxruudukon keskeytyskohta nimellä sm, mikä tarkoittaa, että nyt on yhteensä viisi tasoa ( xs, sm, md, lg, ja xl).
• Responsiiviset ruudukon muokkausluokat nimettiin uudelleen .col-{breakpoint}-{modifier}-{size}muotoon .{modifier}-{breakpoint}-{size}yksinkertaisempia ruudukkoluokkia varten.
• Poistettu push- ja pull-muunnosluokat uusille flexbox-käyttöisille orderluokille. Esimerkiksi ja sijasta .col-8.push-4ja ..col-4.pull-8.col-8.order-2.col-4.order-1
• Lisätty flexbox-käyttöluokat verkkojärjestelmään ja komponentteihin.

Listaa ryhmät

• Kirjoitettiin komponentti uudelleen flexboxilla.
• Korvattu a.list-group-itemeksplisiittisellä luokalla , .list-group-item-actionjolla muokataan luetteloryhmän kohteiden linkki- ja painikeversioita.
• Lisätty .list-group-flushluokka käytettäväksi korttien kanssa.

Modaalinen

• Kirjoitettiin komponentti uudelleen flexboxilla.
• Koska flexboxiin siirrytään, hylkäyskuvakkeiden kohdistus otsikossa on todennäköisesti rikki, koska emme enää käytä kellukkeita. Kelluva sisältö tulee ensin, mutta flexboxissa se ei enää ole niin. Päivitä hylkäyskuvakkeet, jotta ne tulevat korjattavien modaalinimikkeiden jälkeen.
• Vaihtoehto remote(jota voitiin käyttää ulkoisen sisällön automaattiseen lataamiseen ja syöttämiseen modaaliin) ja vastaava loaded.bs.modaltapahtuma poistettiin. Suosittelemme sen sijaan käyttämään asiakaspuolen mallipohjaa tai tiedonsidontakehystä tai kutsumaan jQuery.load itse.

Navit

• Kirjoitettiin komponentti uudelleen flexboxilla.
• Hylättiin lähes kaikki >valitsimet yksinkertaistaakseen muotoilua sisäkkäisten luokkien kautta.
• HTML-kohtaisten valitsimien, kuten .nav > li > a, sijaan käytämme eri luokkia .navs:lle, .nav-items:lle ja .nav-links:lle. Tämä tekee HTML:stäsi joustavamman ja lisää samalla laajennettavuutta.

Navbar

Navigointipalkki on kirjoitettu kokonaan uudelleen flexboxiin, ja siinä on parannettu tuki kohdistukselle, reagointikyvylle ja mukauttamiselle.

• Responsiivisia navigointipalkin toimintoja sovelletaan nyt .navbarluokassa pakollisen .navbar-expand-{breakpoint} kohdan kautta, jossa voit valita, mihin navigointipalkki tiivistetään. Aikaisemmin tämä oli vähemmän muuttuva muutos ja vaati uudelleenkääntämistä.
• .navbar-defaulton nyt .navbar-light, vaikka .navbar-darkpysyy samana. Yksi näistä vaaditaan jokaisessa navigointipalkissa. Nämä luokat eivät kuitenkaan enää aseta background-colors; sen sijaan ne vaikuttavat olennaisesti vain color.
• Navigointipalkit vaativat nyt jonkinlaisen taustailmoituksen. Valitse tausta-apuohjelmistamme ( .bg-*) tai määritä omasi yllä olevilla light/inverse -luokilla hulluksi räätälöimiseksi .
• Flexbox-tyylien ansiosta navigointipalkit voivat nyt käyttää flexbox-apuohjelmia helpottamaan kohdistusvaihtoehtoja.
• .navbar-toggleon nyt .navbar-togglerja sillä on eri tyylejä ja sisäinen merkintä (ei enempää kolmea <span>).
• Lopetti .navbar-formluokan kokonaan. Se ei ole enää tarpeen; sen sijaan käytä .form-inlineja käytä marginaaliapuohjelmia tarpeen mukaan.
• Navigointipalkit eivät enää sisällä margin-bottomtai border-radiusoletuksena. Käytä apuohjelmia tarpeen mukaan.
• Kaikki esimerkit, joissa on navigointipalkkeja, on päivitetty sisältämään uusia merkintöjä.

Sivunumerointi

• Kirjoitettiin komponentti uudelleen flexboxilla.
• Eksplisiittiset luokat ( .page-item, .page-link) vaaditaan nyt .paginations :n jälkeläisiltä
• Pudotti .pagerkomponentin kokonaan, koska se oli vähän enemmän kuin mukautettuja ääriviivapainikkeita.

korppujauhoja

• Eksplisiittinen luokka, .breadcrumb-item, vaaditaan nyt .breadcrumbs :n jälkeläisiltä

Tarrat ja merkit

• Konsolidoitu .labelja .badgeerottaa <label>elementistä ja yksinkertaistaa siihen liittyviä komponentteja.
• Lisätty .badge-pillmuuntajaksi pyöristetyn "pillerin" ilmeen saamiseksi.
• Tunnuksia ei enää kellua automaattisesti luetteloryhmissä ja muissa osissa. Sitä varten tarvitaan nyt hyödyllisyysluokkia.
• .badge-defaulton hylätty ja .badge-secondarylisätty vastaamaan muualla käytettyjä komponenttien muokkausluokkia.

Paneelit, pikkukuvat ja kuopat

Poistui kokonaan uuden korttikomponentin osalta.

Paneelit

• .panel, .cardnyt rakennettu flexboxilla.
• .panel-defaultpoistettu eikä vaihtoa.
• .panel-grouppoistettu eikä vaihtoa. .card-groupei ole korvaava, se on erilainen.
• .panel-headingto.card-header
• .panel-title.card-title. _ Halutusta ulkoasusta riippuen saatat haluta käyttää myös otsikkoelementtejä tai luokkia (esim <h3>. , .h3) tai lihavoituja elementtejä tai luokkia (esim <strong>. , <b>, .font-weight-bold). Huomaa, että .card-titlevaikka nimi on samanlainen, se tuottaa erilaisen ilmeen kuin .panel-title.
• .panel-bodyto.card-body
• .panel-footerto.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, ja .panel-dangeron hylätty .bg-, .text-, ja Sass .border-kartalta luoduille apuohjelmille .$theme-colors

Edistyminen

• Korvattiin kontekstuaaliset .progress-bar-*luokat .bg-*apuohjelmilla. Esimerkiksi class="progress-bar progress-bar-danger"tulee class="progress-bar bg-danger".
• .activeAnimoitujen edistymispalkkien tilalle on .progress-bar-animated.

Karuselli

• Koko komponentti uusittiin suunnittelun ja muotoilun yksinkertaistamiseksi. Meillä on vähemmän ohitettavia tyylejä, uusia ilmaisimia ja uusia kuvakkeita.
• Kaikki CSS:t on poistettu sisäkkäisistä ja nimetty uudelleen, mikä varmistaa, että jokaisen luokan etuliitteenä on .carousel-.
  • Karusellituotteille , .next, .prev, .leftja .rightovat nyt .carousel-item-next, .carousel-item-prev, .carousel-item-left, ja .carousel-item-right.
  • .itemon myös nyt .carousel-item.
  • Edellisille/seuraaville ohjauksille .carousel-control.rightja .carousel-control.leftovat nyt .carousel-control-nextja .carousel-control-prev, mikä tarkoittaa, että ne eivät enää vaadi tiettyä perusluokkaa.
• Poistettu kaikki reagoivat tyylit, lykkääminen apuohjelmiin (esim. kuvatekstien näyttäminen tietyissä kuvaporteissa) ja mukautetut tyylit tarpeen mukaan.
• Karusellikohteiden kuvien kuvien ohitukset on poistettu, mikä lykättiin apuohjelmiin.
• Karuselli-esimerkkiä muokattiin lisäämään uudet merkinnät ja tyylit.

Taulukot

• Tyylistettujen sisäkkäisten taulukoiden tuki poistettu. Kaikki taulukkotyylit on nyt peritty v4:ssä yksinkertaisempia valitsimia varten.
• Lisätty käänteinen taulukkoversio.

Apuohjelmat

• Näyttö, piilotettu ja paljon muuta:
  • Tehty näyttöapuohjelmista responsiivisiksi (esim. .d-noneja d-{sm,md,lg,xl}-none).
  • Poistettiin suurin osa .hidden-*uusien näyttöapuohjelmien apuohjelmista . Käytä .hidden-sm-upesimerkiksi .d-sm-none. Nimesi .hidden-printapuohjelmat uudelleen käyttämään näyttöapuohjelman nimeämismallia. Lisätietoja on tämän sivun Responsiiviset apuohjelmat -osiossa.
  • Lisätty .float-{sm,md,lg,xl}-{left,right,none}luokat reagoiville kelluville ja poistettu .pull-leftja .pull-rightkoska ne ovat tarpeettomia .float-leftja .float-right.
• Tyyppi:
  • Lisäsimme responsiivisia muunnelmia tekstin tasausluokkiimme .text-{sm,md,lg,xl}-{left,center,right}.
• Tasaus ja väli:
  • Lisätty uudet responsiiviset marginaalit ja pehmusteet kaikille puolille sekä pysty- ja vaakasuora lyhenne.
  • Lisätty venekuorma flexbox - apuohjelmia .
  • Pudotettu .center-blockuudelle .mx-autoluokalle.
• Clearfix päivitetty poistamaan tuen vanhemmille selainversioille.

Myyjän etuliitesekoitukset

Bootstrap 3:n toimittajan etuliitesekoitukset , jotka vanhentuivat versiossa 3.2.0, on poistettu Bootstrap 4:stä. Koska käytämme Autoprefixeria , niitä ei enää tarvita.

Poistettiin seuraavat sekoitukset : 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,translate3duser-select

Dokumentointi

Myös dokumentaatiomme päivitettiin kauttaaltaan. Tässä alhainen:

• Käytämme edelleen Jekyllia, mutta sekoituksessamme on laajennuksia:
  • bugify.rbkäytetään listaamaan tehokkaasti selainvirhesivumme merkinnät .
  • example.rbon oletuslaajennuksen mukautettu haarukka highlight.rb, joka mahdollistaa helpomman esimerkkikoodin käsittelyn.
  • callout.rbon samanlainen räätälöity haarukka, mutta suunniteltu erityisiä asiakirjoja varten.
  • jekyll-toc käytetään sisällysluettelomme luomiseen.
• Kaikki asiakirjojen sisältö on kirjoitettu uudelleen Markdowniin (HTML:n sijaan) muokkauksen helpottamiseksi.
• Sivut on järjestetty uudelleen yksinkertaisempaa sisältöä ja helpommin lähestyttävää hierarkiaa varten.
• Siirryimme tavallisesta CSS:stä SCSS:ään hyödyntääksemme Bootstrapin muuttujia, sekoituksia ja paljon muuta.

Responsiiviset apuohjelmat

Kaikki @screen-muuttujat on poistettu versiosta 4.0.0. Käytä sen media-breakpoint-up()sijaan , media-breakpoint-down(), tai media-breakpoint-only()Sass-sekoituksia tai $grid-breakpointsSass-karttaa.

Responsiiviset apuohjelmaluokat on suurelta osin poistettu eksplisiittisten displayapuohjelmien hyväksi.

• Luokat .hiddenja .showon poistettu, koska ne olivat ristiriidassa jQueryn $(...).hide()ja $(...).show()menetelmien kanssa. Yritä sen sijaan vaihtaa [hidden]attribuuttia tai käyttää sisäisiä tyylejä, kuten style="display: none;"ja style="display: block;".
• Kaikki .hidden-luokat on poistettu, lukuun ottamatta tulostusapuohjelmia, jotka on nimetty uudelleen.
  • Poistettu v3:sta:.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
  • Poistettu v4 alfasta:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Tulostusapuohjelmat eivät enää ala .hidden-tai .visible-, vaan .d-print-.
  • Vanhat nimet: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Uudet luokat: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Selkeiden luokkien käyttämisen sijaan .visible-*teet elementin näkyväksi jättämällä piilottamatta sitä kyseisessä näytön koossa. Voit yhdistää yhden .d-*-noneluokan yhteen .d-*-blockluokkaan näyttääksesi elementin vain tietyllä näyttökokovälillä (esim .d-none.d-md-block.d-xl-none. näyttää elementin vain keskikokoisilla ja suurilla laitteilla).

Huomaa, että muutokset ruudukon keskeytyskohtiin v4:ssä tarkoittavat, että sinun on siirryttävä yhtä keskeytyspistettä suurempi saavuttaaksesi samat tulokset. Uudet responsiiviset hyödyllisyysluokat eivät yritä ottaa huomioon vähemmän yleisiä tapauksia, joissa elementin näkyvyyttä ei voida ilmaista yhtenä yhtenäisenä näkymäkokoalueena. sinun on sen sijaan käytettävä mukautettua CSS:ää tällaisissa tapauksissa.