Source

Migrerar till v4

Bootstrap 4 är en stor omskrivning av hela projektet. De mest anmärkningsvärda ändringarna sammanfattas nedan, följt av mer specifika ändringar av relevanta komponenter.

Stabila förändringar

När vi flyttar från Beta 3 till vår stabila version 4.0 finns det inga brytande ändringar, men det finns några anmärkningsvärda ändringar.

Utskrift

  • Fixade trasiga utskriftsverktyg. Tidigare skulle användning av en .d-print-*klass oväntat åsidosätta alla andra .d-*klasser. Nu matchar de våra andra visningsverktyg och gäller bara för det mediet ( @media print).

  • Utökade tillgängliga verktyg för utskriftsvisning för att matcha andra verktyg. Beta 3 och äldre hade bara block, inline-block, inline, och none. Stabil v4 lades till flex, inline-flex, table, table-row, och table-cell.

  • Fixad förhandsvisningsrendering i webbläsare med nya utskriftsstilar som specificerar @page size.

Beta 3 ändringar

Medan Beta 2 såg huvuddelen av våra brytande förändringar under betafasen, men vi har fortfarande några som behövde åtgärdas i Beta 3-utgåvan. Dessa ändringar gäller om du uppdaterar till Beta 3 från Beta 2 eller någon äldre version av Bootstrap.

Diverse

  • Tog bort den oanvända $thumbnail-transitionvariabeln. Vi flyttade inte över något, så det var bara extrakod.
  • npm-paketet innehåller inte längre några andra filer än våra käll- och dist-filer; om du litade på dem och körde våra skript via node_modulesmappen bör du anpassa ditt arbetsflöde.

Blanketter

  • Har skrivit om både anpassade och standardkryssrutor och radioapparater. Nu har båda matchande HTML-struktur (yttre <div>med syskon <input>och <label>) och samma layoutstilar (stackad standard, inline med modifieringsklass). Detta gör att vi kan utforma etiketten baserat på inmatningens tillstånd, vilket förenklar stödet för disabledattributet (tidigare krävde en överordnad klass) och bättre stöd för vår formulärvalidering.

    Som en del av detta har vi ändrat CSS för att hantera flera background-images på anpassade formulärkryssrutor och radioapparater. Tidigare hade det nu borttagna .custom-control-indicatorelementet bakgrundsfärg, gradient och SVG-ikon. Att anpassa bakgrundsgradienten innebar att du skulle ersätta alla dessa varje gång du bara behövde ändra en. Nu har vi .custom-control-label::beforeför fyllning och gradient och .custom-control-label::afterhanterar ikonen.

    Lägg till för att göra en anpassad check inline .custom-control-inline.

  • Uppdaterad väljare för ingångsbaserade knappgrupper. Istället för [data-toggle="buttons"] { }för stil och beteende använder vi dataattributet bara för JS-beteenden och förlitar oss på en ny .btn-group-toggleklass för styling.

  • Borttagen .col-form-legendtill förmån för en något förbättrad .col-form-label. Detta sätt .col-form-label-smoch .col-form-label-lgkan användas på <legend>element med lätthet.

  • Anpassade filinmatningar fick en ändring av sin $custom-file-textSass-variabel. Det är inte längre en kapslad Sass-karta och driver nu bara en sträng – Browseknappen eftersom den nu är det enda pseudoelementet som genereras från vår Sass. Texten Choose filekommer nu från .custom-file-label.

Inmatningsgrupper

  • Inmatningsgruppstillägg är nu specifika för deras placering i förhållande till en ingång. Vi har lagt ner .input-group-addonoch .input-group-btnför två nya klasser, .input-group-prependoch .input-group-append. Du måste uttryckligen använda en append eller en prepend nu, vilket förenklar mycket av vår CSS. Inom ett tillägg eller prepend, placera dina knappar som de skulle existera någon annanstans, men radera texten i .input-group-text.

  • Valideringsstilar stöds nu, liksom flera inmatningar (även om du bara kan validera en indata per grupp).

  • Storleksklasser måste vara på den överordnade .input-groupoch inte de enskilda formelementen.

Beta 2 ändringar

Medan vi är i beta, strävar vi efter att inte ha några avbrottsändringar. Men det går inte alltid som man tänkt sig. Nedan är de brytande ändringarna att tänka på när du går från Beta 1 till Beta 2.

Brytning

  • Borttagen $badge-colorvariabel och dess användning på .badge. Vi använder en färgkontrastfunktion för att välja ett colorbaserat på background-color, så variabeln är onödig.
  • Omdöpt grayscale()funktion till gray()för att undvika att bryta konflikt med det inbyggda CSS- grayscalefiltret.
  • Omdöpt till .table-inverse, .thead-inverse, och .thead-defaulttill .*-darkoch .*-light, som matchar våra färgscheman som används på annat håll.
  • Responsiva tabeller genererar nu klasser för varje rutnätsbrytpunkt. Detta bryter från Beta 1 genom att det .table-responsivedu har använt är mer som .table-responsive-md. Du kan nu använda .table-responsiveeller .table-responsive-{sm,md,lg,xl}efter behov.
  • Borttaget Bower-stöd eftersom pakethanteraren har fasats ut för alternativ (t.ex. Garn eller npm). Se bower/bower#2298 för detaljer.
  • Bootstrap kräver fortfarande jQuery 1.9.1 eller högre, men du rekommenderas att använda version 3.x eftersom v3.x:s webbläsare som stöds är de som Bootstrap stöder plus v3.x har några säkerhetskorrigeringar.
  • Tog bort den oanvända .form-control-labelklassen. Om du använde den här klassen var det en kopia av .col-form-labelklassen som vertikalt centrerade a <label>med dess tillhörande indata i horisontella formlayouter.
  • Ändrade color-yiqfrån en mixin som inkluderade coloregenskapen till en funktion som returnerar ett värde, så att du kan använda det för vilken CSS-egenskap som helst. Till exempel, istället för color-yiq(#000), skulle du skriva color: color-yiq(#000);.

Höjdpunkter

  • Introducerade ny pointer-eventsanvändning av modals. Den yttre .modal-dialogpasserar genom händelser med pointer-events: noneför anpassad klickhantering (gör det möjligt att bara lyssna på .modal-backdropför eventuella klick), och motverkar det sedan för det faktiska .modal-contentmed pointer-events: auto.

Sammanfattning

Här är de stora biljettobjekten du vill vara medveten om när du går från v3 till v4.

Webbläsarstöd

  • Släppt stöd för IE8, IE9 och iOS 6. v4 är nu bara IE10+ och iOS 7+. För webbplatser som behöver någon av dessa, använd v3.
  • Lade till officiellt stöd för Android v5.0 Lollipops webbläsare och webbvy. Tidigare versioner av Android-webbläsaren och WebView stöds endast inofficiellt.

Globala förändringar

  • Flexbox är aktiverat som standard. Generellt innebär detta en övergång från flöten och mer över våra komponenter.
  • Bytte från Less till Sass för våra käll-CSS-filer.
  • Bytte från pxtill remvår primära CSS-enhet, även om pixlar fortfarande används för mediefrågor och rutnätsbeteende eftersom enhetens visningsportar inte påverkas av typstorleken.
  • Den globala teckenstorleken ökade från 14pxtill 16px.
  • Uppdaterade rutnätsnivåer för att lägga till ett femte alternativ (adresserade mindre enheter vid 576pxoch under) och tog bort -xsinfixet från dessa klasser. Exempel: .col-6.col-sm-4.col-md-3.
  • Ersatte det separata valfria temat med konfigurerbara alternativ via SCSS-variabler (t.ex. $enable-gradients: true).
  • Byggsystem har översynats för att använda en serie npm-skript istället för Grunt. Se package.jsonför alla manus, eller vårt projekt Readme för lokala utvecklingsbehov.
  • Icke-responsiv användning av Bootstrap stöds inte längre.
  • Släppte online Customizer till förmån för mer omfattande installationsdokumentation och anpassade builds.
  • Lade till dussintals nya verktygsklasser för vanliga CSS-egenskapsvärdepar och genvägar för marginal/utfyllnadsavstånd.

Rutsystem

  • Flyttade till flexbox.
    • Lagt till stöd för flexbox i gridmixinerna och fördefinierade klasser.
    • Som en del av flexbox ingår stöd för vertikala och horisontella uppriktningsklasser.
  • Uppdaterade rutnätklassnamn och en ny rutnätsnivå.
    • Lade till en ny smrutnätsnivå nedan 768pxför mer granulär kontroll. Vi har nu xs, sm, md, lg, och xl. Detta innebär också att varje nivå har lyfts upp en nivå (så .col-md-6i v3 är nu .col-lg-6i v4).
    • xsrutnätsklasser har modifierats för att inte kräva att infixet mer exakt representerar att de börjar tillämpa stilar vid min-width: 0och inte ett inställt pixelvärde. Istället för .col-xs-6är det nu .col-6. Alla andra rutnätsnivåer kräver infixet (t.ex. sm).
  • Uppdaterade rutnätsstorlekar, mixins och variabler.
    • Gridrännor har nu en Sass-karta så att du kan ange specifika rännstensbredder vid varje brytpunkt.
    • Uppdaterade grid mixins för att använda en make-col-readyprep mixin och en make-colför att ställa in flexoch max-widthför individuell kolumnstorlek.
    • Ändrade brytpunkter och behållarbredder för att ta hänsyn till nya rutnätsnivåer och säkerställa att kolumner är jämnt delbara med 12vid sin maximala bredd.
    • Grid-brytpunkter och behållarbredder hanteras nu via Sass-kartor ( $grid-breakpointsoch $container-max-widths) istället för en handfull separata variabler. Dessa ersätter @screen-*variablerna helt och hållet och låter dig anpassa rutnätsnivåerna helt.
    • Mediafrågor har också förändrats. Istället för att upprepa våra mediefrågadeklarationer med samma värde varje gång, har vi nu @include media-breakpoint-up/down/only. Nu, istället för att skriva @media (min-width: @screen-sm-min) { ... }, kan du skriva @include media-breakpoint-up(sm) { ... }.

Komponenter

  • Tappade paneler, miniatyrer och brunnar för en ny allomfattande komponent, kort .
  • Släppte typsnittet Glyphicons-ikonen. Om du behöver ikoner är några alternativ:
  • Släppte Affix jQuery-plugin.
    • Vi rekommenderar att använda position: stickyistället. Se HTML5 Please-posten för detaljer och specifika polyfill-rekommendationer. Ett förslag är att använda en @supportsregel för att implementera den (t.ex. @supports (position: sticky) { ... })/
    • Om du använde Affix för att applicera ytterligare, icke- positionstilar, kanske polyfillerna inte stöder ditt användningsfall. Ett alternativ för sådan användning är ScrollPos-Styler- biblioteket från tredje part.
  • Tappade personsökarkomponenten eftersom det i huvudsak var något anpassade knappar.
  • Refaktorerade nästan alla komponenter för att använda fler icke-kapslade klassväljare istället för överspecifika barnväljare.

Efter komponent

Den här listan belyser viktiga ändringar per komponent mellan v3.xx och v4.0.0.

Starta om

Nytt för Bootstrap 4 är Reboot , en ny stilmall som bygger på Normalize med våra egna något egensinniga återställningsstilar. Väljare som visas i den här filen använder bara element – ​​det finns inga klasser här. Detta isolerar våra återställda stilar från våra komponentstilar för ett mer modulärt tillvägagångssätt. Några av de viktigaste återställningarna som detta inkluderar är box-sizing: border-boxförändringen, att flytta från emtill remenheter på många element, länkstilar och många återställningar av formulärelement.

Typografi

  • Flyttade alla .text-verktyg till _utilities.scssfilen.
  • Släppt .page-headereftersom, bortsett från gränsen, alla dess stilar kan appliceras via verktyg.
  • .dl-horizontalhar lagts ner. Använd istället .rowpå <dl>och använd grid-kolumnklasser (eller mixins) på dess <dt>och <dd>barn.
  • Anpassad <blockquote>stil har flyttats till klasser – .blockquoteoch .blockquote-reversemodifieraren.
  • .list-inlinekräver nu att dess underordnade listobjekt har den nya .list-inline-itemklassen tillämpad på dem.

Bilder

  • Bytt namn .img-responsivetill .img-fluid.
  • Bytt namn .img-roundedtill.rounded
  • Bytt namn .img-circletill.rounded-circle

Tabeller

  • Nästan alla instanser av >väljaren har tagits bort, vilket innebär att kapslade tabeller nu automatiskt ärver stilar från sina föräldrar. Detta förenklar våra väljare och potentiella anpassningar avsevärt.
  • Responsiva tabeller kräver inte längre ett omslagselement. Istället sätter du bara .table-responsivehöger på <table>.
  • Bytt namn .table-condensedtill .table-smför konsekvens.
  • Lade till ett nytt .table-inversealternativ.
  • Tillagda modifierare för tabellrubrik: .thead-defaultoch .thead-inverse.
  • Omdöpt kontextuella klasser till ett .table--prefix. Därav .active, .success, .warning, .dangeroch .infotill .table-active, .table-success, .table-warning, .table-dangeroch .table-info.

Blanketter

  • Flyttat element återställs till _reboot.scssfilen.
  • Bytt namn .control-labeltill .col-form-label.
  • Bytt namn .input-lgoch .input-smtill .form-control-lgrespektive .form-control-sm.
  • Avlagda .form-group-*klasser för enkelhetens skull. Använd .form-control-*klasser istället nu.
  • Släppte .help-blockoch ersatte den med .form-texthjälptext på blocknivå. För inline hjälptext och andra flexibla alternativ, använd verktygsklasser som .text-muted.
  • Tappade .radio-inlineoch .checkbox-inline.
  • Konsoliderat .checkboxoch .radioin i .form-checkoch de olika .form-check-*klasserna.
  • Översyn av horisontella formulär:
    • Släppte .form-horizontalklasskravet.
    • .form-groupinte längre tillämpar stilar från .rowvia mixin, så .rowkrävs nu för horisontella rutnätslayouter (t.ex. <div class="form-group row">).
    • Lade till ny .col-form-labelklass för att vertikalt centrera etiketter med .form-controls.
    • Lagt till nytt .form-rowför kompakta formulärlayouter med rutnätsklasserna (byt ut din .rowmot en .form-rowoch gå).
  • Stöd för anpassade formulär har lagts till (för kryssrutor, radioapparater, markeringar och filinmatningar).
  • Ersatt .has-error, .has-warning, och .has-successklasser med HTML5-formulärvalidering via CSS:er :invalidoch :validpseudoklasser.
  • Bytt namn .form-control-statictill .form-control-plaintext.

Knappar

  • Bytt namn .btn-defaulttill .btn-secondary.
  • Tappade .btn-xsklassen helt eftersom den .btn-smär proportionellt mycket mindre än v3:s.
  • Den tillståndsfulla knappfunktionen i button.jsjQuery-pluginet har tagits bort. Detta inkluderar metoderna $().button(string)och . $().button('reset')Vi rekommenderar att du använder en liten bit anpassad JavaScript istället, vilket kommer att ha fördelen av att bete sig precis som du vill ha det.
    • Observera att de andra funktionerna i plugin-programmet (kryssrutor för knappar, radioknappar, enkelväxlingsknappar) har behållits i v4.
  • Ändra knappar [disabled]till :disabledsom IE9+ stöder :disabled. Det fieldset[disabled]är dock fortfarande nödvändigt eftersom inbyggda inaktiverade fältuppsättningar fortfarande är buggiga i IE11 .

Knappgrupp

  • Skrev om komponent med flexbox.
  • Borttagen .btn-group-justified. Som ersättning kan du använda <div class="btn-group d-flex" role="group"></div>som omslag runt element med .w-100.
  • Släppte .btn-group-xsklassen helt med tanke på borttagning av .btn-xs.
  • Tog bort explicit avstånd mellan knappgrupper i knappverktygsfält; använd marginalverktyg nu.
  • Förbättrad dokumentation för användning med andra komponenter.
  • Växlade från föräldraväljare till singulära klasser för alla komponenter, modifierare, etc.
  • Förenklade rullgardinsstilar för att inte längre skickas med uppåt- eller nedåtvända pilar kopplade till rullgardinsmenyn.
  • Dropdowns kan byggas med <div>s eller <ul>s nu.
  • Ombyggda rullgardinsstilar och uppmärkning för att ge enkelt, inbyggt stöd för <a>och <button>baserade rullgardinsobjekt.
  • Bytt namn .dividertill .dropdown-divider.
  • Dropdown-objekt kräver nu .dropdown-item.
  • Dropdown-växlingar kräver inte längre en explicit <span class="caret"></span>; detta tillhandahålls nu automatiskt via CSS ::afterpå .dropdown-toggle.

Rutsystem

  • Lade till en ny 576pxrutnätsbrytpunkt som sm, vilket betyder att det nu finns fem totala nivåer ( xs, sm, md, lg, och xl).
  • Döpte om de responsiva rutnätsmodifieringsklasserna från .col-{breakpoint}-{modifier}-{size}till .{modifier}-{breakpoint}-{size}för enklare rutnätsklasser.
  • Tappade push and pull-modifieringsklasser för de nya flexbox-drivna orderklasserna. Till exempel, istället för .col-8.push-4och .col-4.pull-8skulle du använda .col-8.order-2och .col-4.order-1.
  • Lade till flexbox-verktygsklasser för nätsystem och komponenter.

Lista grupper

  • Skrev om komponent med flexbox.
  • Ersatt a.list-group-itemmed en explicit klass, .list-group-item-action, för stylinglänkar och knappversioner av listgruppobjekt.
  • Lagt .list-group-flushtill klass för användning med kort.
  • Skrev om komponent med flexbox.
  • Med tanke på övergången till flexbox är justeringen av avvisande ikoner i rubriken sannolikt bruten eftersom vi inte längre använder flytningar. Flytande innehåll kommer först, men med flexbox är det inte längre fallet. Uppdatera dina avvisningsikoner så att de kommer efter modala titlar att fixa.
  • Alternativet remote(som kunde användas för att automatiskt ladda och injicera externt innehåll i en modal) och motsvarande loaded.bs.modalhändelse togs bort. Vi rekommenderar istället att använda mallar på klientsidan eller ett databindningsramverk, eller att själv anropa jQuery.load .
  • Skrev om komponent med flexbox.
  • Släppte nästan alla >väljare för enklare styling via okapslade klasser.
  • Istället för HTML-specifika väljare som .nav > li > a, använder vi separata klasser för .navs, .nav-items och .nav-links. Detta gör din HTML mer flexibel samtidigt som den ger ökad töjbarhet.

Navigationsfältet har skrivits om helt i flexbox med förbättrat stöd för anpassning, lyhördhet och anpassning.

  • Responsiva navbarbeteenden tillämpas nu på .navbarklassen via det obligatoriska .navbar-expand-{breakpoint} där du väljer var du vill komprimera navigeringsfältet. Tidigare var detta en mindre variabel modifiering och krävde omkompilering.
  • .navbar-defaultär nu .navbar-light, men .navbar-darkförblir densamma. En av dessa krävs på varje navigeringsfält. Dessa klasser sätter dock inte längre background-colors; istället påverkar de i princip bara color.
  • Navbars kräver nu en bakgrundsdeklaration av något slag. Välj bland våra bakgrundsverktyg ( .bg-*) eller ställ in dina egna med ljus/inversklasserna ovan för galen anpassning .
  • Med tanke på flexbox-stilar kan navbars nu använda flexbox-verktyg för enkla inriktningsalternativ.
  • .navbar-toggleär nu .navbar-toggleroch har olika stilar och inre markering (inte fler tre <span>s).
  • Släppte .navbar-formklassen helt. Det är inte längre nödvändigt; istället, använd bara .form-inlineoch använd marginalverktyg vid behov.
  • Navbars inkluderar inte längre margin-bottomeller som border-radiusstandard. Använd verktyg vid behov.
  • Alla exempel med navigeringsfält har uppdaterats för att inkludera ny uppmärkning.

Paginering

  • Skrev om komponent med flexbox.
  • Explicita klasser ( .page-item, .page-link) krävs nu på ättlingar till .paginations
  • Tappade .pagerkomponenten helt eftersom det var lite mer än anpassade konturknappar.
  • En uttrycklig klass, .breadcrumb-item, krävs nu på ättlingar till .breadcrumbs

Etiketter och märken

  • Bytt namn .labeltill .badgeför att disambiguera från <label>elementet.
  • Tappade .badgekomponenten eftersom den var nästan identisk med etiketter. Använd .badge-pillmodifieraren tillsammans med etikettkomponenten istället för det rundade utseendet.
  • Märken flyttas inte längre automatiskt i listgrupper och andra komponenter. För det krävs nu bruksklasser.
  • .badge-defaulthar tagits bort och .badge-secondarylagts till för att matcha komponentmodifieringsklasser som används på annat håll.

Paneler, miniatyrer och brunnar

Släppte helt för den nya kortkomponenten.

Paneler

  • .paneltill .card, nu byggd med flexbox.
  • .panel-defaultborttagen och ingen ersättning.
  • .panel-groupborttagen och ingen ersättning. .card-groupär inte en ersättning, det är annorlunda.
  • .panel-headingtill.card-header
  • .panel-titletill .card-title. Beroende på önskat utseende kanske du också vill använda rubrikelement eller klasser (t.ex. <h3>, .h3) eller fetstilta element eller klasser (t.ex. <strong>, <b>, .font-weight-bold). Observera att .card-titleäven om den heter liknande, ger den ett annat utseende än .panel-title.
  • .panel-bodytill.card-body
  • .panel-footertill.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, och .panel-dangerhar tagits bort för .bg-, .text-, och .borderverktyg genererade från vår $theme-colorsSass-karta.

Framsteg

  • Ersatte kontextuella .progress-bar-*klasser med .bg-*verktyg. Till exempel class="progress-bar progress-bar-danger"blir class="progress-bar bg-danger".
  • Ersatt .activeför animerade förloppsindikatorer med .progress-bar-animated.
  • Renoverade hela komponenten för att förenkla design och styling. Vi har färre stilar som du kan åsidosätta, nya indikatorer och nya ikoner.
  • All CSS har avkapslats och bytt namn, vilket säkerställer att varje klass har prefixet .carousel-.
    • För karusellartiklar är .next, .prev, .left, och .rightnu .carousel-item-next, .carousel-item-prev, .carousel-item-left, och .carousel-item-right.
    • .itemär också nu .carousel-item.
    • För föregående/nästa kontroller, .carousel-control.rightoch .carousel-control.leftär nu .carousel-control-nextoch .carousel-control-prev, vilket betyder att de inte längre kräver en specifik basklass.
  • Tog bort all responsiv styling, skjuta upp till verktyg (t.ex. visa bildtexter på vissa visningsportar) och anpassade stilar efter behov.
  • Borttagna bild åsidosättanden för bilder i karusellobjekt, hänvisade till verktyg.
  • Justerade Carousel-exemplet för att inkludera den nya märkningen och stilarna.

Tabeller

  • Tog bort stöd för formaterade kapslade tabeller. Alla tabellstilar ärvs nu i v4 för enklare väljare.
  • Lade till omvänd tabellvariant.

Verktyg

  • Visa, dold och mer:
    • Gjorde skärmverktyg responsiva (t.ex. .d-noneoch d-{sm,md,lg,xl}-none).
    • Släppte huvuddelen av .hidden-*verktyg för nya displayverktyg . Använd till exempel istället .hidden-sm-upför .d-sm-none. Bytte namn på .hidden-printverktygen för att använda namnschemat för displayverktyget. Mer information under avsnittet Responsiva verktyg på den här sidan.
    • Lagt .float-{sm,md,lg,xl}-{left,right,none}till klasser för responsiva flytningar och tagit bort .pull-leftoch .pull-righteftersom de är överflödiga till .float-leftoch .float-right.
  • Typ:
    • Lade till responsiva varianter till våra textjusteringsklasser .text-{sm,md,lg,xl}-{left,center,right}.
  • Justering och avstånd:
  • Clearfix uppdaterades för att ta bort stödet för äldre webbläsarversioner.

Blandningar för leverantörsprefix

Bootstrap 3:s leverantörsprefixmixiner , som föråldrades i v3.2.0, har tagits bort i Bootstrap 4. Eftersom vi använder Autoprefixer är de inte längre nödvändiga.

Tog bort följande blandningar : 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

Dokumentation

Vår dokumentation fick också en uppgradering över hela linjen. Här är den nedre delen:

  • Vi använder fortfarande Jekyll, men vi har plugins i mixen:
    • bugify.rbanvänds för att effektivt lista ut posterna på vår webbläsarfelsida .
    • example.rbär en anpassad gaffel för standardinsticksprogrammet highlight.rb, vilket möjliggör enklare hantering av exempelkod.
    • callout.rbär en liknande anpassad gaffel av det, men designad för våra speciella dokumentbeskrivningar.
    • markdown-block.rbanvänds för att rendera Markdown-kodavsnitt i HTML-element som tabeller.
    • jekyll-toc används för att generera vår innehållsförteckning.
  • Allt dokumentinnehåll har skrivits om i Markdown (istället för HTML) för enklare redigering.
  • Sidorna har omorganiserats för enklare innehåll och en mer lättillgänglig hierarki.
  • Vi gick från vanlig CSS till SCSS för att dra full nytta av Bootstraps variabler, mixins och mer.

Responsiva verktyg

Alla @screen-variabler har tagits bort i v4.0.0. Använd media-breakpoint-up(), media-breakpoint-down(), eller media-breakpoint-only()Sass mixin eller $grid-breakpointsSass kartan istället.

Våra responsiva verktygsklasser har till stor del tagits bort till förmån för explicita displayverktyg.

  • Klasserna .hiddenoch .showhar tagits bort eftersom de kom i konflikt med jQuerys $(...).hide()och $(...).show()metoder. Försök istället att växla mellan [hidden]attributet eller använd inline-stilar som style="display: none;"och style="display: block;".
  • Alla .hidden-klasser har tagits bort, förutom utskriftsverktygen som har bytt namn.
    • Borttagen från 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
    • Borttagen från 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
  • Utskriftsverktyg börjar inte längre med .hidden-eller .visible-utan med .d-print-.
    • Gamla namn: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Nya klasser: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Istället för att använda explicita .visible-*klasser gör du ett element synligt genom att helt enkelt inte dölja det i den skärmstorleken. Du kan kombinera en .d-*-noneklass med en .d-*-blockklass för att visa ett element endast på ett givet intervall av skärmstorlekar ( .d-none.d-md-block.d-xl-nonevisar t.ex. elementet endast på medelstora och stora enheter).

Observera att ändringarna i rutnätets brytpunkter i v4 innebär att du måste gå en brytpunkt högre för att uppnå samma resultat. De nya responsiva verktygsklasserna försöker inte tillgodose mindre vanliga fall där ett elements synlighet inte kan uttryckas som ett enda sammanhängande område av visningsportstorlekar; du kommer istället att behöva använda anpassad CSS i sådana fall.