Source

Migrerer til v4

Bootstrap 4 er en stor omskriving av hele prosjektet. De mest bemerkelsesverdige endringene er oppsummert nedenfor, etterfulgt av mer spesifikke endringer i relevante komponenter.

Stabile endringer

Når vi flytter fra Beta 3 til vår stabile versjon 4.0, er det ingen endringer, men det er noen bemerkelsesverdige endringer.

Printing

  • Rettet ødelagte utskriftsverktøy. Tidligere .d-print-*ville bruk av en klasse uventet overstyre enhver annen .d-*klasse. Nå samsvarer de med våre andre skjermverktøy og gjelder kun for det mediet ( @media print).

  • Utvidet tilgjengelige utskriftsvisningsverktøy for å matche andre verktøy. Beta 3 og eldre hadde bare block, inline-block, inline, og none. Stabil v4 lagt til flex, inline-flex, table, table-rowog table-cell.

  • Fast forhåndsvisning av utskrift på tvers av nettlesere med nye utskriftsstiler som spesifiserer @page size.

Beta 3 endringer

Selv om Beta 2 så mesteparten av endringene våre under betafasen, men vi har fortsatt noen få som måtte tas opp i Beta 3-utgivelsen. Disse endringene gjelder hvis du oppdaterer til Beta 3 fra Beta 2 eller en hvilken som helst eldre versjon av Bootstrap.

Diverse

  • Fjernet den ubrukte $thumbnail-transitionvariabelen. Vi overførte ikke noe, så det var bare ekstra kode.
  • npm-pakken inkluderer ikke lenger andre filer enn våre kilde- og dist-filer; hvis du stolte på dem og kjørte skriptene våre via node_modulesmappen, bør du tilpasse arbeidsflyten din.

Skjemaer

  • Omskrev både egendefinerte og standard avmerkingsbokser og radioer. Nå har begge matchende HTML-struktur (ytre <div>med søsken <input>og <label>) og samme layoutstiler (stablet standard, inline med modifikatorklasse). Dette lar oss style etiketten basert på inputens tilstand, forenkle støtte for disabledattributtet (tidligere krevde en overordnet klasse) og bedre støtte skjemavalideringen vår.

    Som en del av dette har vi endret CSS for å administrere flere background-images på tilpassede skjemaer og radioer. Tidligere hadde det nå fjernede .custom-control-indicatorelementet bakgrunnsfarge, gradient og SVG-ikon. Å tilpasse bakgrunnsgradienten innebar å erstatte alle disse hver gang du bare måtte endre én. Nå har vi .custom-control-label::beforefor fyll og gradient og .custom-control-label::afterhåndterer ikonet.

    For å gjøre en tilpasset sjekk innebygd, legg til .custom-control-inline.

  • Oppdatert velger for inngangsbaserte knappegrupper. I stedet for [data-toggle="buttons"] { }for stil og oppførsel, bruker vi dataattributtet kun for JS-atferd og stoler på en ny .btn-group-toggleklasse for styling.

  • Fjernet .col-form-legendtil fordel for en litt forbedret .col-form-label. På denne måten .col-form-label-smog .col-form-label-lgkan brukes på <legend>elementer med letthet.

  • Egendefinerte filinndata fikk en endring i $custom-file-textSass-variabelen. Det er ikke lenger et nestet Sass-kart og driver nå bare én streng – Browseknappen som nå er det eneste pseudo-elementet som genereres fra vår Sass. Teksten Choose filekommer nå fra .custom-file-label.

Inndatagrupper

  • Inndatagruppetillegg er nå spesifikke for deres plassering i forhold til en inngang. Vi har droppet .input-group-addonog .input-group-btnfor to nye klasser, .input-group-prependog .input-group-append. Du må eksplisitt bruke en append eller en prepend nå, noe som forenkler mye av vår CSS. Plasser knappene dine slik de ville vært andre steder i et vedlegg eller prepend, men pakk teksten inn i .input-group-text.

  • Valideringsstiler støttes nå, det samme er flere innganger (selv om du bare kan validere én inndata per gruppe).

  • Dimensjoneringsklasser må være på overordnet .input-groupog ikke de enkelte skjemaelementene.

Beta 2 endringer

Mens vi er i beta, tar vi sikte på å ikke ha noen avbrytende endringer. Men ting går ikke alltid som planlagt. Nedenfor er endringene du bør huske på når du går fra Beta 1 til Beta 2.

Breaking

  • Fjernet $badge-colorvariabel og dens bruk på .badge. Vi bruker en fargekontrastfunksjon for å velge en colorbasert på background-color, så variabelen er unødvendig.
  • Omdøpt grayscale()funksjon til gray()for å unngå å bryte konflikt med CSS native grayscalefilter.
  • Omdøpt .table-inverse, .thead-inverse, og .thead-defaulttil .*-darkog .*-light, som samsvarer med fargene våre brukt andre steder.
  • Responsive tabeller genererer nå klasser for hvert rutenettbruddpunkt. Dette bryter fra Beta 1 ved at den .table-responsivedu har brukt er mer lik .table-responsive-md. Du kan nå bruke .table-responsiveeller .table-responsive-{sm,md,lg,xl}etter behov.
  • Avbrutt Bower-støtte som pakkebehandler har blitt avviklet for alternativer (f.eks. Garn eller npm). Se bower/bower#2298 for detaljer.
  • Bootstrap krever fortsatt jQuery 1.9.1 eller høyere, men du anbefales å bruke versjon 3.x siden v3.xs støttede nettlesere er de Bootstrap støtter pluss v3.x har noen sikkerhetsrettinger.
  • Fjernet den ubrukte .form-control-labelklassen. Hvis du gjorde bruk av denne klassen, var det duplikat av .col-form-labelklassen som vertikalt sentrerte a <label>med tilhørende input i horisontale skjemaoppsett.
  • Endret color-yiqfra en blanding som inkluderte coloregenskapen til en funksjon som returnerer en verdi, slik at du kan bruke den for en hvilken som helst CSS-egenskap. For eksempel, i stedet for color-yiq(#000), ville du skrive color: color-yiq(#000);.

Høydepunkter

  • Introduserte ny pointer-eventsbruk på modaler. Den ytre .modal-dialoggår gjennom hendelser med pointer-events: nonefor tilpasset klikkhåndtering (gjør det mulig å bare lytte på .modal-backdropfor eventuelle klikk), og motvirker det så for det faktiske .modal-contentmed pointer-events: auto.

Sammendrag

Her er de store billettelementene du bør være oppmerksom på når du går fra v3 til v4.

Nettleserstøtte

  • Droppet støtte for IE8, IE9 og iOS 6. v4 er nå bare IE10+ og iOS 7+. For nettsteder som trenger en av disse, bruk v3.
  • Lagt til offisiell støtte for Android v5.0 Lollipops nettleser og webvisning. Tidligere versjoner av Android-nettleseren og WebView forblir kun uoffisielt støttet.

Globale endringer

  • Flexbox er aktivert som standard. Generelt betyr dette en flytting bort fra flottører og mer på tvers av komponentene våre.
  • Byttet fra Less til Sass for våre kilde CSS-filer.
  • Byttet fra pxtil remsom vår primære CSS-enhet, selv om piksler fortsatt brukes til mediespørringer og rutenettoppførsel, siden enhetens visningsporter ikke påvirkes av typestørrelse.
  • Global skriftstørrelse økt fra 14pxtil 16px.
  • Fornyet rutenettnivåer for å legge til et femte alternativ (adresserer mindre enheter ved 576pxog under) og fjernet -xsinfikset fra disse klassene. Eksempel: .col-6.col-sm-4.col-md-3.
  • Erstattet det separate valgfrie temaet med konfigurerbare alternativer via SCSS-variabler (f.eks. $enable-gradients: true).
  • Byggsystem overhalt for å bruke en serie npm-skript i stedet for Grunt. Se package.jsonfor alle manus, eller vårt prosjekt Readme for lokale utviklingsbehov.
  • Ikke-responsiv bruk av Bootstrap støttes ikke lenger.
  • Droppet online Customizer til fordel for mer omfattende oppsettdokumentasjon og tilpassede bygg.
  • Lagt til dusinvis av nye verktøyklasser for vanlige CSS-egenskapsverdipar og snarveier for margin/utfyllingsavstand.

Rutenettsystem

  • Flyttet til flexbox.
    • Lagt til støtte for flexbox i grid mixins og forhåndsdefinerte klasser.
    • Som en del av flexbox, inkludert støtte for vertikale og horisontale opprettingsklasser.
  • Oppdaterte rutenettklassenavn og et nytt rutenettnivå.
    • Lagt til et nytt smrutenettlag nedenfor 768pxfor mer granulær kontroll. Vi har nå xs, sm, md, lg, og xl. Dette betyr også at hvert nivå har blitt løftet opp ett nivå (så .col-md-6i v3 er nå .col-lg-6i v4).
    • xsrutenettklasser har blitt modifisert for ikke å kreve at infikset mer nøyaktig representerer at de begynner å bruke stiler med min-width: 0og ikke en angitt pikselverdi. I stedet for .col-xs-6er det nå .col-6. Alle andre rutenettnivåer krever infikset (f.eks. sm).
  • Oppdaterte rutenettstørrelser, blandinger og variabler.
    • Gitterrenner har nå et Sass-kart slik at du kan spesifisere spesifikke rennebredder ved hvert knekkpunkt.
    • Oppdaterte rutenettblandinger for å bruke en make-col-readyprep-blanding og en make-colfor å angi flexog max-widthfor individuell kolonnestørrelse.
    • Endret grid system media spørre brytepunkter og container bredder for å ta hensyn til nye grid tier og sikre at kolonner er jevnt delbare med 12deres maksimale bredde.
    • Grid-bruddpunkter og containerbredder håndteres nå via Sass-kart ( $grid-breakpointsog $container-max-widths) i stedet for en håndfull separate variabler. Disse erstatter @screen-*variablene fullstendig og lar deg tilpasse rutenettlagene fullt ut.
    • Medieforespørsler har også endret seg. I stedet for å gjenta våre mediespørringserklæringer med samme verdi hver gang, har vi nå @include media-breakpoint-up/down/only. Nå, i stedet for å skrive @media (min-width: @screen-sm-min) { ... }, kan du skrive @include media-breakpoint-up(sm) { ... }.

Komponenter

  • Tapte paneler, miniatyrbilder og brønner for en ny altomfattende komponent, kort .
  • Har droppet Glyphicons-ikonfonten. Hvis du trenger ikoner, er noen alternativer:
  • Droppet Affix jQuery-plugin.
    • Vi anbefaler å bruke position: stickyi stedet. Se HTML5 Please-oppføringen for detaljer og spesifikke polyfill-anbefalinger. Et forslag er å bruke en @supportsregel for å implementere den (f.eks. @supports (position: sticky) { ... })/
    • Hvis du brukte Affix for å bruke flere, ikke position-stiler, kan det hende at polyfillene ikke støtter ditt bruksområde. Et alternativ for slik bruk er tredjeparts ScrollPos-Styler- biblioteket.
  • Droppet personsøkerkomponenten da det i hovedsak var litt tilpassede knapper.
  • Refaktorerte nesten alle komponentene for å bruke flere ikke-nestede klassevelgere i stedet for overspesifikke barnevelgere.

Etter komponent

Denne listen fremhever viktige endringer etter komponent mellom v3.xx og v4.0.0.

Start på nytt

Nytt for Bootstrap 4 er Reboot , et nytt stilark som bygger på Normalize med våre egne, noe egensinnede tilbakestillingsstiler. Velgere som vises i denne filen bruker bare elementer – det er ingen klasser her. Dette isolerer våre tilbakestilte stiler fra våre komponentstiler for en mer modulær tilnærming. Noen av de viktigste tilbakestillingene dette inkluderer er box-sizing: border-boxendringen, flytting fra emtil remenheter på mange elementer, lenkestiler og mange tilbakestillinger av skjemaelementer.

Typografi

  • Flyttet alle .text-verktøy til _utilities.scssfilen.
  • Droppet .page-headersiden, bortsett fra grensen, kan alle stilene brukes via verktøy.
  • .dl-horizontalhar blitt droppet. Bruk i stedet .rowpå <dl>og bruk rutenettkolonneklasser (eller mixins) på sin <dt>og <dd>barn.
  • Egendefinert <blockquote>stil har flyttet til klasser – .blockquoteog .blockquote-reversemodifikatoren.
  • .list-inlinekrever nå at dens underordnede listeelementer har den nye .list-inline-itemklassen brukt på dem.

Bilder

  • Omdøpt .img-responsivetil .img-fluid.
  • Omdøpt .img-roundedtil.rounded
  • Omdøpt .img-circletil.rounded-circle

Tabeller

  • Nesten alle forekomster av >velgeren er fjernet, noe som betyr at nestede tabeller nå automatisk vil arve stiler fra foreldrene sine. Dette forenkler våre velgere og potensielle tilpasninger.
  • Responsive tabeller krever ikke lenger et innpakningselement. I stedet setter du bare .table-responsivehøyre på <table>.
  • Omdøpt .table-condensedtil .table-smfor konsistens.
  • Lagt til et nytt .table-inversealternativ.
  • Lagt til modifikatorer for tabelloverskrifter: .thead-defaultog .thead-inverse.
  • Omdøpt kontekstuelle klasser til å ha et .table--prefiks. Derfor .active, .success, .warning, .dangerog .infotil .table-active, .table-success, .table-warning, .table-dangerog .table-info.

Skjemaer

  • Flyttet element tilbakestilles til _reboot.scssfilen.
  • Omdøpt .control-labeltil .col-form-label.
  • Omdøpt .input-lgog .input-smtil .form-control-lgog .form-control-smhenholdsvis.
  • Har droppet .form-group-*timene for enkelhets skyld. Bruk .form-control-*klasser i stedet nå.
  • Droppet .help-blockog erstattet den med .form-texthjelpetekst på blokknivå. For innebygd hjelpetekst og andre fleksible alternativer, bruk verktøyklasser som .text-muted.
  • Droppet .radio-inlineog .checkbox-inline.
  • Konsolidert .checkboxog .radioinn i .form-checkog de ulike .form-check-*klassene.
  • Horisontale skjemaer overhalt:
    • Droppet .form-horizontalklassekravet.
    • .form-groupbruker ikke lenger stiler fra .rowvia-miksingen, så .rowdet kreves nå for horisontale rutenettoppsett (f.eks. <div class="form-group row">).
    • Lagt til ny .col-form-labelklasse for vertikalt sentrerte etiketter med .form-controls.
    • Lagt til nytt .form-rowfor kompakte skjemaoppsett med rutenettklassene (bytt .rowut mot en .form-rowog gå).
  • Lagt til støtte for tilpassede skjemaer (for avmerkingsbokser, radioer, utvalg og filinndata).
  • Erstattet .has-error, .has-warning, og .has-successklasser med HTML5-skjemavalidering via CSS-er :invalidog :validpseudo-klasser.
  • Omdøpt .form-control-statictil .form-control-plaintext.

Knapper

  • Omdøpt .btn-defaulttil .btn-secondary.
  • Droppet .btn-xsklassen helt som .btn-smer proporsjonalt mye mindre enn v3-er.
  • Den stateful button -funksjonen til button.jsjQuery-pluginen har blitt droppet. Dette inkluderer metodene $().button(string)og . $().button('reset')Vi anbefaler å bruke en liten bit tilpasset JavaScript i stedet, som vil ha fordelen av å oppføre seg akkurat slik du vil ha det.
    • Vær oppmerksom på at de andre funksjonene til plugin-en (avmerkingsbokser for knapper, knappradioer, enkelt-veksleknapper) har blitt beholdt i v4.
  • Endre knapper [disabled]til :disabledsom IE9+ støtter :disabled. Det fieldset[disabled]er imidlertid fortsatt nødvendig fordi native deaktiverte feltsett fortsatt er buggy i IE11 .

Knappegruppe

  • Omskrev komponent med flexbox.
  • Fjernet .btn-group-justified. Som erstatning kan du bruke <div class="btn-group d-flex" role="group"></div>som omslag rundt elementer med .w-100.
  • Droppet .btn-group-xsklassen helt gitt fjerning av .btn-xs.
  • Fjernet eksplisitt mellomrom mellom knappegrupper i knappeverktøylinjer; bruk marginverktøy nå.
  • Forbedret dokumentasjon for bruk med andre komponenter.
  • Byttet fra foreldrevelgere til entallsklasser for alle komponenter, modifikatorer osv.
  • Forenklede rullegardinstiler for ikke lenger å sendes med opp- eller nedovervendte piler knyttet til rullegardinmenyen.
  • Dropdowns kan bygges med <div>s eller <ul>s nå.
  • Gjenoppbygde rullegardinstiler og markering for å gi enkel, innebygd støtte for <a>og <button>baserte rullegardinelementer.
  • Omdøpt .dividertil .dropdown-divider.
  • Rullegardinelementer krever nå .dropdown-item.
  • Rullegardinbrytere krever ikke lenger en eksplisitt <span class="caret"></span>; dette leveres nå automatisk via CSS-er ::afterpå .dropdown-toggle.

Rutenettsystem

  • Lagt til et nytt 576pxrutenettbrytepunkt som sm, noe som betyr at det nå er fem totale nivåer ( xs, sm, md, lg, og xl).
  • Omdøpt de responsive rutenettmodifikatorklassene fra .col-{breakpoint}-{modifier}-{size}til .{modifier}-{breakpoint}-{size}for enklere rutenettklasser.
  • Droppet push and pull-modifikatorklasser for de nye flexbox-drevne orderklassene. For eksempel, i stedet for .col-8.push-4og .col-4.pull-8, vil du bruke .col-8.order-2og .col-4.order-1.
  • Lagt til flexbox-verktøyklasser for nettsystem og komponenter.

List grupper

  • Omskrev komponent med flexbox.
  • Erstattet a.list-group-itemmed en eksplisitt klasse, .list-group-item-action, for stylinglink og knappversjoner av listegruppeelementer.
  • Lagt til .list-group-flushklasse for bruk med kort.
  • Omskrev komponent med flexbox.
  • Gitt flytting til flexbox, er justeringen av avvisningsikoner i overskriften sannsynligvis ødelagt ettersom vi ikke lenger bruker flytere. Flytende innhold kommer først, men med flexbox er det ikke lenger tilfelle. Oppdater avvisningsikonene dine for å komme etter modale titler for å fikse.
  • Alternativet remote(som kan brukes til automatisk å laste inn og injisere eksternt innhold i en modal) og den tilsvarende loaded.bs.modalhendelsen ble fjernet. Vi anbefaler i stedet å bruke maler på klientsiden eller et databindingsrammeverk, eller å ringe jQuery.load selv.
  • Omskrev komponent med flexbox.
  • Droppet nesten alle >velgere for enklere styling via un-nested klasser.
  • I stedet for HTML-spesifikke velgere som .nav > li > a, bruker vi separate klasser for .navs, .nav-items og .nav-links. Dette gjør HTML-en din mer fleksibel samtidig som den gir økt utvidbarhet.

Navigasjonslinjen har blitt fullstendig omskrevet i flexbox med forbedret støtte for justering, respons og tilpasning.

  • Responsiv navbar-atferd brukes nå på .navbarklassen via den nødvendige .navbar-expand-{breakpoint} der du velger hvor du vil skjule navigasjonslinjen. Tidligere var dette en mindre variabel modifikasjon og krevde rekompilering.
  • .navbar-defaulter nå .navbar-light, men .navbar-darkforblir den samme. En av disse kreves på hver navigasjonslinje. Imidlertid er disse klassene ikke lenger sattbackground-color s; i stedet påvirker de i hovedsak bare color.
  • Navbars krever nå en bakgrunnserklæring av noe slag. Velg fra bakgrunnsverktøyene våre ( .bg-*) eller angi dine egne med lys/inverse klassene ovenfor for gal tilpasning .
  • Gitt flexbox-stiler kan navbarer nå bruke flexbox-verktøy for enkle justeringsalternativer.
  • .navbar-toggleer nå .navbar-togglerog har forskjellige stiler og indre markering (ikke mer tre <span>s).
  • Har droppet .navbar-formklassen helt. Det er ikke lenger nødvendig; i stedet, bruk .form-inlineog bruk marginverktøy etter behov.
  • Navbarer inkluderer ikke lengermargin-bottom eller er border-radiussom standard. Bruk verktøy etter behov.
  • Alle eksempler med navigasjonslinjer er oppdatert for å inkludere ny markering.

Paginering

  • Omskrev komponent med flexbox.
  • Det kreves nå eksplisitte klasser ( .page-item, ) på etterkommere av.page-link.pagination ) på etterkommere av s
  • Droppet .pagerkomponenten helt siden den var lite mer enn tilpassede konturknapper.
  • En eksplisitt klasse, .breadcrumb-item, kreves nå på etterkommere av .breadcrumbs

Etiketter og merker

  • Omdøpt .labeltil .badgefor å disambiguere fra<label> elementet.
  • Droppet .badgekomponenten da den var nesten identisk med etiketter. Bruke.badge-pill modifikatoren sammen med etikettkomponenten i stedet for det avrundede utseendet.
  • Merker flyter ikke lenger automatisk i listegrupper og andre komponenter. Det kreves nå bruksklasser for det.
  • .badge-defaulthar blitt droppet og .badge-secondarylagt til for å matche komponentmodifikatorklasser brukt andre steder.

Paneler, miniatyrbilder og brønner

Droppet helt for den nye kortkomponenten.

Paneler

  • .paneltil .card, nå bygget med flexbox.
  • .panel-defaultfjernet og ingen erstatning.
  • .panel-groupfjernet og ingen erstatning. .card-grouper ikke en erstatning, det er annerledes.
  • .panel-headingtil.card-header
  • .panel-titletil .card-title. Avhengig av ønsket utseende, vil du kanskje også bruke overskriftselementer eller klasser (f.eks <h3>. , .h3) eller fete elementer eller klasser (f.eks <strong>. , <b>, .font-weight-bold). Merk at .card-titleselv om den heter det samme navnet, gir den et annet utseende enn .panel-title.
  • .panel-bodytil.card-body
  • .panel-footertil.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, og .panel-dangerhar blitt droppet for .bg-, .text-, og .borderverktøy generert fra $theme-colorsSass-kartet vårt.

Framgang

  • Erstattet kontekstuelle .progress-bar-*klasser med .bg-*verktøy. For eksempel class="progress-bar progress-bar-danger"blir class="progress-bar bg-danger".
  • Erstattet .activefor animerte fremdriftslinjer med .progress-bar-animated.
  • Overhalt hele komponenten for å forenkle design og styling. Vi har færre stiler du kan overstyre, nye indikatorer og nye ikoner.
  • All CSS har blitt fjernet og omdøpt, noe som sikrer at hver klasse er prefiks med .carousel-.
    • For karusellartikler, .next, .prev, .left, og .righter nå .carousel-item-next, .carousel-item-prev, .carousel-item-left, og .carousel-item-right.
    • .itemer også nå .carousel-item.
    • For forrige/neste kontroller, .carousel-control.rightog .carousel-control.lefter nå .carousel-control-nextog .carousel-control-prev, noe som betyr at de ikke lenger krever en spesifikk basisklasse.
  • Fjernet all responsiv styling, og utsatte til verktøy (f.eks. vise bildetekster på visse visningsporter) og tilpassede stiler etter behov.
  • Fjernede bildeoverstyringer for bilder i karusellelementer, utsett til verktøy.
  • Forskjøvet Carousel-eksemplet for å inkludere den nye markeringen og stilene.

Tabeller

  • Fjernet støtte for stilede nestede tabeller. Alle tabellstiler er nå arvet i v4 for enklere velgere.
  • Lagt til invers tabellvariant.

Verktøy

  • Vis, skjult og mer:
    • Gjorde skjermverktøy responsive (f.eks. .d-noneog d-{sm,md,lg,xl}-none).
    • Droppet hoveddelen av .hidden-*verktøyene for nye skjermverktøy . Bruk for eksempel i stedet for .hidden-sm-up. .d-sm-noneGi nytt navn til .hidden-printverktøyene for å bruke navneskjemaet for displayverktøyet. Mer informasjon under Responsive utilities-delen på denne siden.
    • Lagt til .float-{sm,md,lg,xl}-{left,right,none}klasser for responsive flyter og fjernet .pull-leftog .pull-rightsiden de er overflødige til .float-leftog .float-right.
  • Type:
    • Lagt til responsive varianter til tekstjusteringsklassene våre .text-{sm,md,lg,xl}-{left,center,right}.
  • Justering og avstand:
  • Clearfix oppdatert for å slippe støtte for eldre nettleserversjoner.

Leverandørprefiksblandinger

Bootstrap 3s leverandørprefiksblandinger , som ble avviklet i v3.2.0, er fjernet i Bootstrap 4. Siden vi bruker Autoprefixer , er de ikke lenger nødvendige.

Fjernet følgende blandinger : 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

Dokumentasjon

Dokumentasjonen vår fikk også en oppgradering over hele linjen. Her er det laveste:

  • Vi bruker fortsatt Jekyll, men vi har plugins i blandingen:
    • bugify.rbbrukes til å effektivt liste opp oppføringene på vår nettleserfeilside .
    • example.rber en tilpasset gaffel av standard highlight.rbplugin, som muliggjør enklere håndtering av eksempelkode.
    • callout.rber en lignende tilpasset gaffel av det, men designet for våre spesielle dokumentforklaringer.
    • markdown-block.rbbrukes til å gjengi Markdown-snutter i HTML-elementer som tabeller.
    • jekyll-toc brukes til å generere innholdsfortegnelsen vår.
  • Alt dokumentinnhold er skrevet om i Markdown (i stedet for HTML) for enklere redigering.
  • Sidene har blitt omorganisert for enklere innhold og et mer tilgjengelig hierarki.
  • Vi gikk fra vanlig CSS til SCSS for å dra full nytte av Bootstraps variabler, mixins og mer.

Responsive verktøy

Alle @screen-variabler er fjernet i v4.0.0. Bruk media-breakpoint-up(), media-breakpoint-down(), eller media-breakpoint-only()Sass-miksene eller$grid-breakpoints Sass-kartet i stedet.

Våre responsive verktøyklasser har i stor grad blitt fjernet til fordel for eksplisitte displayverktøy.

  • Klassene .hiddenog .showhar blitt fjernet fordi de kom i konflikt med jQuerys $(...).hide()og $(...).show()metoder. Prøv i stedet å veksle mellom [hidden]attributtet eller bruk innebygde stiler som style="display: none;"og style="display: block;".
  • Alle .hidden-klasser er fjernet, bortsett fra utskriftsverktøyene som har fått nytt navn.
    • Fjernet fra 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
    • Fjernet fra 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
  • Utskriftsverktøy starter ikke lenger med .hidden-eller .visible-, men med .d-print-.
    • Gamle navn: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Nye klasser: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

I stedet for å bruke eksplisitte .visible-*klasser, gjør du et element synlig ved ganske enkelt ikke å skjule det i den skjermstørrelsen. Du kan kombinere én .d-*-noneklasse med én .d-*-blockklasse for å vise et element kun på et gitt intervall med skjermstørrelser (f.eks .d-none.d-md-block.d-xl-none. viser elementet kun på mellomstore og store enheter).

Merk at endringene i rutenettets bruddpunkt i v4 betyr at du må gå ett bruddpunkt høyere for å oppnå de samme resultatene. De nye responsive verktøyklassene prøver ikke å imøtekomme mindre vanlige tilfeller der et elements synlighet ikke kan uttrykkes som et enkelt sammenhengende utvalg av visningsportstørrelser; du må i stedet bruke tilpasset CSS i slike tilfeller.