Migrerer til v4

Bootstrap 4 er en større omskrivning af hele projektet. De mest bemærkelsesværdige ændringer er opsummeret nedenfor, efterfulgt af mere specifikke ændringer af relevante komponenter.

Stabile ændringer

Ved at flytte fra Beta 3 til vores stabile v4.0-udgivelse er der ingen brydende ændringer, men der er nogle bemærkelsesværdige ændringer.

Trykning

• Rettede ødelagte udskriftsværktøjer. Tidligere ville brug af en .d-print-*klasse uventet tilsidesætte enhver anden .d-*klasse. Nu matcher de vores andre skærmværktøjer og gælder kun for det medie ( @media print).

• Udvidede tilgængelige printvisningsværktøjer til at matche andre hjælpeprogrammer. Beta 3 og ældre havde kun block, inline-block, inline, og none. Stabil v4 tilføjet flex, inline-flex, table, table-row, og table-cell.

• Fixed print preview gengivelse på tværs af browsere med nye print stilarter, der specificerer @page size.

Beta 3 ændringer

Mens Beta 2 så størstedelen af ​​vores brydende ændringer i betafasen, men vi har stadig et par stykker, der skulle løses i Beta 3-udgivelsen. Disse ændringer gælder, hvis du opdaterer til Beta 3 fra Beta 2 eller en hvilken som helst ældre version af Bootstrap.

Diverse

• Fjernede den ubrugte $thumbnail-transitionvariabel. Vi overførte ikke noget, så det var bare ekstra kode.
• npm-pakken inkluderer ikke længere andre filer end vores kilde- og dist-filer; hvis du stolede på dem og kørte vores scripts via node_modulesmappen, bør du tilpasse din arbejdsgang.

Formularer

• Omskrev både brugerdefinerede og standardafkrydsningsfelter og radioer. Nu har begge matchende HTML-struktur (ydre <div>med søskende <input>og <label>) og de samme layoutstile (stablet standard, inline med modifikatorklasse). Dette giver os mulighed for at style etiketten baseret på inputtets tilstand, hvilket forenkler understøttelsen af disabled​​attributten (tidligere krævede en overordnet klasse) og understøtter bedre vores formularvalidering.

  Som en del af dette har vi ændret CSS'en til håndtering af flere background-images på brugerdefinerede afkrydsningsfelter og radioer. Tidligere havde det nu fjernede .custom-control-indicatorelement baggrundsfarven, gradienten og SVG-ikonet. Tilpasning af baggrundsgradienten betød, at du skulle erstatte alle dem, hver gang du kun skulle ændre én. Nu har vi .custom-control-label::beforetil fyld og gradient og .custom-control-label::afterhåndterer ikonet.

  Tilføj .custom-control-inline.

• Opdateret vælger til input-baserede knapgrupper. I stedet for [data-toggle="buttons"] { }til stil og adfærd bruger vi dataattributten kun til JS-adfærd og stoler på en ny .btn-group-toggleklasse til styling.

• Fjernet .col-form-legendtil fordel for en lidt forbedret .col-form-label. På denne måde .col-form-label-smog .col-form-label-lgkan bruges på <legend>elementer med lethed.

• Tilpassede filinput modtog en ændring af deres $custom-file-textSass-variabel. Det er ikke længere et indlejret Sass-kort og driver nu kun én streng – Browseknappen, da det nu er det eneste pseudo-element, der er genereret fra vores Sass. Teksten Choose filekommer nu fra .custom-file-label.

Input grupper

• Inputgruppetilføjelser er nu specifikke for deres placering i forhold til et input. Vi har droppet .input-group-addonog .input-group-btnfor to nye klasser, .input-group-prependog .input-group-append. Du skal udtrykkeligt bruge et tilføj eller et prepend nu, hvilket forenkler meget af vores CSS. Inden for en tilføjelse eller forudsætning skal du placere dine knapper, som de ville eksistere andre steder, men ombryd tekst i .input-group-text.

• Valideringsstile understøttes nu, ligesom flere inputs (selvom du kun kan validere ét input pr. gruppe).

• Størrelsesklasser skal være på forælderen .input-groupog ikke de enkelte formelementer.

Beta 2 ændringer

Mens vi er i beta, sigter vi mod at have nogen brydende ændringer. Men tingene går ikke altid som planlagt. Nedenfor er de brudændringer, du skal huske på, når du flytter fra Beta 1 til Beta 2.

Går i stykker

• Fjernet $badge-colorvariabel og dens brug på .badge. Vi bruger en farvekontrastfunktion til at vælge en colorbaseret på background-color, så variablen er unødvendig.
• Omdøbt grayscale()funktion til gray()for at undgå at bryde konflikt med CSS native grayscalefilter.
• Omdøbt .table-inverse, .thead-inverse, og .thead-defaulttil .*-darkog .*-light, der matcher vores farveskemaer, der bruges andre steder.
• Responsive tabeller genererer nu klasser for hvert grid breakpoint. Dette bryder fra Beta 1, idet den .table-responsivedu har brugt mere ligner .table-responsive-md. Du kan nu bruge .table-responsiveeller .table-responsive-{sm,md,lg,xl}efter behov.
• Frafaldet Bower-support, da pakkehåndteringen er blevet udfaset for alternativer (f.eks. Garn eller npm). Se bower/bower#2298 for detaljer.
• Bootstrap kræver stadig jQuery 1.9.1 eller højere, men du rådes til at bruge version 3.x, da v3.x's understøttede browsere er dem, Bootstrap understøtter plus v3.x har nogle sikkerhedsrettelser.
• Fjernede den ubrugte .form-control-labelklasse. Hvis du gjorde brug af denne klasse, var det duplikat af .col-form-labelklassen, der lodret centrerede a <label>med dets tilhørende input i horisontale formlayouts.
• Ændrede color-yiqfra et mixin, der inkluderede coloregenskaben, til en funktion, der returnerer en værdi, så du kan bruge den til enhver CSS-egenskab. For eksempel, i stedet for color-yiq(#000), ville du skrive color: color-yiq(#000);.

Højdepunkter

• Indført ny pointer-eventsbrug på modals. Den ydre .modal-dialoggår gennem begivenheder med pointer-events: nonetil tilpasset klikhåndtering (gør det muligt blot at lytte på .modal-backdropfor eventuelle klik), og modvirker det så for det faktiske .modal-contentmed pointer-events: auto.

Resumé

Her er de store billetelementer, du gerne vil være opmærksom på, når du går fra v3 til v4.

Browser support

• Droppet understøttelse af IE8, IE9 og iOS 6. v4 er nu kun IE10+ og iOS 7+. For websteder, der har brug for en af ​​disse, skal du bruge v3.
• Tilføjet officiel support til Android v5.0 Lollipop's Browser og WebView. Tidligere versioner af Android-browseren og WebView forbliver kun uofficielt understøttet.

Globale ændringer

• Flexbox er aktiveret som standard. Generelt betyder dette en bevægelse væk fra flydere og mere på tværs af vores komponenter.
• Skiftet fra Less til Sass for vores kilde CSS-filer.
• Skiftet fra pxtil remsom vores primære CSS-enhed, selvom pixels stadig bruges til medieforespørgsler og gitteradfærd, da enhedsvisningsporte ikke påvirkes af typestørrelse.
• Global skriftstørrelse steg fra 14pxtil 16px.
• Reviderede gitterniveauer for at tilføje en femte mulighed (adresserer mindre enheder ved 576pxog under) og fjernede -xsinfixet fra disse klasser. Eksempel: .col-6.col-sm-4.col-md-3.
• Erstattet det separate valgfrie tema med konfigurerbare muligheder via SCSS-variabler (f.eks. $enable-gradients: true).
• Byg system eftersyn til at bruge en række npm-scripts i stedet for Grunt. Se package.jsonfor alle scripts, eller vores projekt readme for lokale udviklingsbehov.
• Ikke-responsiv brug af Bootstrap understøttes ikke længere.
• Droppede online Customizer til fordel for mere omfattende opsætningsdokumentation og tilpassede builds.
• Tilføjet snesevis af nye hjælpeklasser til almindelige CSS-egenskabsværdipar og genveje til margen/udfyldningsafstand.

Gittersystem

• Flyttet til flexbox.
  • Tilføjet understøttelse af flexbox i grid mixins og foruddefinerede klasser.
  • Som en del af flexbox medfølger støtte til vertikale og horisontale opretningsklasser.
• Opdaterede gitterklassenavne og et nyt gitterniveau.
  • Tilføjet et nyt smgitterniveau nedenfor 768pxfor mere granulær kontrol. Vi har nu xs, sm, md, lg, og xl. Dette betyder også, at hvert niveau er rykket et niveau op (så .col-md-6i v3 er det nu .col-lg-6i v4).
  • xsgitterklasser er blevet ændret til ikke at kræve, at infixet mere præcist repræsenterer, at de begynder at anvende stilarter ved min-width: 0og ikke en fastsat pixelværdi. I stedet for .col-xs-6er det nu .col-6. Alle andre gitterniveauer kræver infixet (f.eks. sm).
• Opdaterede gitterstørrelser, mixins og variabler.
  • Gitterrender har nu et Sass-kort, så du kan angive specifikke tagrendebredder ved hvert brudpunkt.
  • Opdaterede gitterblandinger for at bruge en make-col-readyprep-mixin og en make-coltil at indstille flexog max-widthfor individuelle kolonnestørrelser.
  • Ændrede gittersystemmedier forespørger om brudpunkter og containerbredder for at tage højde for det nye gitterniveau og sikre, at kolonner er jævnt delelige med 12ved deres maksimale bredde.
  • Grid breakpoints og containerbredder håndteres nu via Sass maps ( $grid-breakpointsog $container-max-widths) i stedet for en håndfuld separate variabler. Disse erstatter @screen-*variablerne fuldstændigt og giver dig mulighed for fuldt ud at tilpasse grid-niveauerne.
  • Medieforespørgsler har også ændret sig. I stedet for at gentage vores medieforespørgselserklæringer med samme værdi hver gang, har vi nu @include media-breakpoint-up/down/only. Nu, i stedet for at skrive @media (min-width: @screen-sm-min) { ... }, kan du skrive @include media-breakpoint-up(sm) { ... }.

Komponenter

• Tabte paneler, thumbnails og brønde til en ny altomfattende komponent, kort .
• Droppede Glyphicons-ikonets skrifttype. Hvis du har brug for ikoner, er nogle muligheder:
  • opstrømsversionen af ​​Glyphicons
  • Octicons
  • Font Awesome
  • Se Udvid-siden for en liste over alternativer. Har du yderligere forslag? Åbn venligst et spørgsmål eller PR.
• Droppede Affix jQuery-plugin'et.
  • Vi anbefaler at bruge position: stickyi stedet. Se HTML5 Please-indgangen for detaljer og specifikke polyfill-anbefalinger. Et forslag er at bruge en @supportsregel til at implementere den (f.eks. @supports (position: sticky) { ... })/
  • Hvis du brugte Affix til at anvende yderligere, ikke position-stile, understøtter polyfills muligvis ikke din use case. En mulighed for sådanne anvendelser er tredjeparts ScrollPos-Styler- biblioteket.
• Droppede pager-komponenten, da det i det væsentlige var lidt tilpassede knapper.
• Refaktorerede næsten alle komponenter for at bruge flere ikke-indlejrede klassevælgere i stedet for overspecifikke børnevælgere.

Efter komponent

Denne liste fremhæver vigtige ændringer efter komponent mellem v3.xx og v4.0.0.

Genstart

Nyt til Bootstrap 4 er Reboot , et nyt stylesheet, der bygger på Normalize med vores egne noget egensindige nulstillingsstile. Vælgere, der vises i denne fil, bruger kun elementer - der er ingen klasser her. Dette isolerer vores nulstillede stilarter fra vores komponentstile for en mere modulær tilgang. Nogle af de vigtigste nulstillinger, som dette inkluderer, er box-sizing: border-boxændringen, flytning fra emtil remenheder på mange elementer, linkstile og mange nulstilling af formularelementer.

Typografi

• Flyttede alle .text-hjælpeprogrammer til _utilities.scssfilen.
• Droppet .page-header, da dens stilarter kan anvendes via hjælpeprogrammer.
• .dl-horizontaler blevet droppet. Brug i stedet .rowpå <dl>og brug gitterkolonneklasser (eller mixins) på dens <dt>og <dd>børn.
• Redesignede blokcitater, der flytter deres stilarter fra <blockquote>elementet til en enkelt klasse, .blockquote. Droppede .blockquote-reversemodifikatoren for tekstværktøjer.
• .list-inlinekræver nu, at dens børnelisteelementer har den nye .list-inline-itemklasse anvendt på dem.

Billeder

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

Tabeller

• Næsten alle forekomster af >vælgeren er blevet fjernet, hvilket betyder, at indlejrede tabeller nu automatisk vil arve typografier fra deres forældre. Dette forenkler i høj grad vores vælgere og potentielle tilpasninger.
• Omdøbt .table-condensedtil .table-smfor konsistens.
• Tilføjet en ny .table-inversemulighed.
• Tilføjede tabeloverskriftsmodifikatorer: .thead-defaultog .thead-inverse.
• Omdøbt kontekstuelle klasser til at have et .table--præfiks. Derfor .active, .success, .warning, .dangerog .infotil .table-active, .table-success, .table-warning, .table-dangerog .table-info.

Formularer

• Flyttet element nulstilles til _reboot.scssfilen.
• Omdøbt .control-labeltil .col-form-label.
• Omdøbt .input-lgog .input-smtil .form-control-lgog .form-control-smhhv.
• Droppede .form-group-*timer for nemheds skyld. Brug .form-control-*klasser i stedet nu.
• Droppede .help-blockog erstattede den med .form-texthjælpetekst på blokniveau. For indlejret hjælpetekst og andre fleksible muligheder skal du bruge hjælpeklasser som .text-muted.
• Droppet .radio-inlineog .checkbox-inline.
• Konsolideret .checkboxog .radioind i .form-checkog de forskellige .form-check-*klasser.
• Vandrette formularer eftersyn:
  • Droppede .form-horizontalklassekravet.
  • .form-groupanvender ikke længere stilarter fra .rowvia-mixin, så det .rower nu påkrævet for horisontale gitterlayouts (f.eks. <div class="form-group row">).
  • Tilføjet ny .col-form-labelklasse til vertikalt centrerede etiketter med .form-controls.
  • Tilføjet nyt .form-rowtil kompakte formularlayouts med gitterklasserne (byt dit .rowfor et .form-rowog gå).
• Tilføjet understøttelse af brugerdefinerede formularer (til afkrydsningsfelter, radioer, markeringer og filinput).
• Erstattet .has-error, .has-warning, og .has-successklasser med HTML5-formularvalidering via CSS'er :invalidog :validpseudo-klasser.
• Omdøbt .form-control-statictil .form-control-plaintext.

Knapper

• Omdøbt .btn-defaulttil .btn-secondary.
• Droppede .btn-xsklassen helt, da den .btn-smer forholdsmæssigt meget mindre end v3'er.
• Den stateful-knap -funktion i button.jsjQuery-plugin'et er blevet droppet. Dette inkluderer metoderne $().button(string)og $().button('reset'). Vi anbefaler at bruge en lille smule tilpasset JavaScript i stedet, som vil have fordelen ved at opføre sig præcis, som du ønsker det.
  • Bemærk, at pluginnets andre funktioner (knapafkrydsningsfelter, knapradioer, enkelt-skift-knapper) er blevet bibeholdt i v4.
• Skift knapper [disabled]til :disabledsom IE9+ understøtter :disabled. Det er dog fieldset[disabled]stadig nødvendigt, fordi native deaktiverede feltsæt stadig er buggy i IE11 .

Knap gruppe

• Omskrev komponent med flexbox.
• Fjernet .btn-group-justified. Som erstatning kan du bruge <div class="btn-group d-flex" role="group"></div>som omslag omkring elementer med .w-100.
• Droppede .btn-group-xsklassen helt på grund af fjernelse af .btn-xs.
• Fjernede eksplicit afstand mellem knapgrupper i knapværktøjslinjer; brug marginværktøjer nu.
• Forbedret dokumentation til brug med andre komponenter.

Dropdowns

• Skiftet fra forældrevælgere til singularklasser for alle komponenter, modifikatorer osv.
• Forenklede dropdown-stile, der ikke længere sendes med op- eller nedadvendte pile knyttet til dropdown-menuen.
• Dropdowns kan bygges med <div>s eller <ul>s nu.
• Genopbygget dropdown-stile og markup for at give nem, indbygget support til <a>og <button>baseret dropdown-elementer.
• Omdøbt .dividertil .dropdown-divider.
• Dropdown-elementer kræver nu .dropdown-item.
• Dropdown-skift kræver ikke længere en eksplicit <span class="caret"></span>; dette leveres nu automatisk via CSS'er ::afterpå .dropdown-toggle.

Gittersystem

• Tilføjet et nyt 576pxgitterbrudpunkt som sm, hvilket betyder, at der nu er fem samlede niveauer ( xs, sm, md, lg, og xl).
• Omdøbt de responsive grid modifier klasser fra .col-{breakpoint}-{modifier}-{size}til .{modifier}-{breakpoint}-{size}for enklere grid klasser.
• Droppede push and pull modifier klasser for de nye flexbox-drevne orderklasser. For eksempel, i stedet for .col-8.push-4og .col-4.pull-8, ville du bruge .col-8.order-2og .col-4.order-1.
• Tilføjet flexbox-hjælpeklasser til netsystem og komponenter.

Liste grupper

• Omskrev komponent med flexbox.
• Erstattet a.list-group-itemmed en eksplicit klasse, .list-group-item-action, til styling af link- og knapversioner af listegruppeelementer.
• Tilføjet .list-group-flushklasse til brug med kort.

Modal

• Omskrev komponent med flexbox.
• Givet flytning til flexbox, er justering af afvisningsikoner i overskriften sandsynligvis brudt, da vi ikke længere bruger flydere. Flydende indhold kommer først, men med flexbox er det ikke længere tilfældet. Opdater dine afvisningsikoner til at komme efter modale titler for at rette.
• Indstillingen remote(som kunne bruges til automatisk at indlæse og injicere eksternt indhold i en modal) og den tilsvarende loaded.bs.modalhændelse blev fjernet. Vi anbefaler i stedet at bruge skabeloner på klientsiden eller en databindingsramme eller selv at kalde jQuery.load .

Navs

• Omskrev komponent med flexbox.
• Droppede næsten alle >vælgere for enklere styling via ikke-indlejrede klasser.
• I stedet for HTML-specifikke vælgere som f.eks .nav > li > a. bruger vi separate klasser for .navs, .nav-items og .nav-links. Dette gør din HTML mere fleksibel, samtidig med at den medfører øget udvidelsesmuligheder.

Navbar

Navigationslinjen er blevet fuldstændig omskrevet i flexbox med forbedret understøttelse af justering, reaktionsevne og tilpasning.

• Responsiv navbar-adfærd anvendes nu til .navbarklassen via det påkrævede, .navbar-expand-{breakpoint} hvor du vælger, hvor du vil skjule navbaren. Tidligere var dette en mindre variabel modifikation og krævede genkompilering.
• .navbar-defaulter nu .navbar-light, men .navbar-darkforbliver den samme. En af disse er påkrævet på hver navbar. Disse klasser sætter dog ikke længere background-colors; i stedet påvirker de stort set kun color.
• Navbars kræver nu en baggrundserklæring af en eller anden art. Vælg mellem vores baggrundsværktøjer ( .bg-*) eller indstil dine egne med lys/omvendte klasser ovenfor for vanvittig tilpasning .
• Givet flexbox-stile kan navbarer nu bruge flexbox-værktøjer til nemme tilpasningsmuligheder.
• .navbar-toggleer nu .navbar-togglerog har forskellige stilarter og indre markering (ikke mere tre <span>s).
• Droppede .navbar-formklassen helt. Det er ikke længere nødvendigt; i stedet skal du bare bruge .form-inlineog anvende margin-værktøjer efter behov.
• Navbars inkluderer ikke længere margin-bottomeller border-radiussom standard. Brug hjælpeprogrammer efter behov.
• Alle eksempler med navbarer er blevet opdateret til at inkludere nye markeringer.

Sideinddeling

• Omskrev komponent med flexbox.
• Eksplicitte klasser ( .page-item, .page-link) er nu påkrævet på efterkommere af .paginations
• Droppede .pagerkomponenten helt, da det var lidt mere end tilpassede konturknapper.

Brødkrummer

• .breadcrumb-itemDer kræves nu en eksplicit klasse, , på efterkommerne af .breadcrumbs

Etiketter og badges

• Konsolideret .labelog .badgefor at disambiguere fra <label>elementet og forenkle relaterede komponenter.
• Tilføjet .badge-pillsom modifikator for afrundet "pille" look.
• Badges flydes ikke længere automatisk i listegrupper og andre komponenter. Det kræves nu brugsklasser til.
• .badge-defaulter blevet droppet og .badge-secondarytilføjet for at matche komponentmodifikatorklasser, der bruges andre steder.

Paneler, thumbnails og brønde

Faldt helt for den nye kortkomponent.

Paneler

• .paneltil .card, nu bygget med flexbox.
• .panel-defaultfjernet og ingen udskiftning.
• .panel-groupfjernet og ingen udskiftning. .card-grouper ikke en erstatning, det er anderledes.
• .panel-headingtil.card-header
• .panel-titletil .card-title. Afhængigt af det ønskede udseende vil du måske også bruge overskriftselementer eller klasser (f.eks <h3>. , .h3) eller fede elementer eller klasser (f.eks <strong>. , <b>, .font-weight-bold). Bemærk .card-title, at selvom det hedder det samme, giver det et andet udseende end .panel-title.
• .panel-bodytil.card-body
• .panel-footertil.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, og .panel-dangerer blevet droppet for .bg-, .text-, og .borderhjælpeprogrammer genereret fra vores $theme-colorsSass-kort.

Fremskridt

• Erstattet kontekstuelle .progress-bar-*klasser med .bg-*hjælpeprogrammer. For eksempel class="progress-bar progress-bar-danger"bliver class="progress-bar bg-danger".
• Erstattet .activefor animerede statuslinjer med .progress-bar-animated.

Karrusel

• Revideret hele komponenten for at forenkle design og styling. Vi har færre stilarter, som du kan tilsidesætte, nye indikatorer og nye ikoner.
• Al CSS er blevet fjernet og omdøbt, hvilket sikrer, at hver klasse er præfikset med .carousel-.
  • For karruselartikler, .next, .prev, .left, og .righter nu .carousel-item-next, .carousel-item-prev, .carousel-item-left, og .carousel-item-right.
  • .itemer også nu .carousel-item.
  • For forrige/næste kontroller, .carousel-control.rightog .carousel-control.lefter nu .carousel-control-nextog .carousel-control-prev, hvilket betyder, at de ikke længere kræver en specifik basisklasse.
• Fjernet al responsiv styling, udskudt til hjælpeprogrammer (f.eks. visning af billedtekster på visse visningsporte) og tilpassede stilarter efter behov.
• Fjernede billedtilsidesættelser for billeder i karruselelementer, der udskydes til hjælpeprogrammer.
• Justerede Carousel-eksemplet til at inkludere den nye markering og stilarter.

Tabeller

• Fjernet understøttelse af stylede indlejrede tabeller. Alle tabelstile er nu nedarvet i v4 for enklere vælgere.
• Tilføjet omvendt tabelvariant.

Hjælpeprogrammer

• Vis, skjult og mere:
  • Gjorde displayværktøjer responsive (f.eks. .d-noneog d-{sm,md,lg,xl}-none).
  • Droppede størstedelen af .hidden-*​​hjælpeprogrammer til nye displayværktøjer . .hidden-sm-upBrug f.eks. i stedet for .d-sm-none. Omdøbte .hidden-printhjælpeprogrammerne for at bruge navngivningsskemaet for displayværktøjet. Mere info under afsnittet Responsive hjælpeprogrammer på denne side.
  • Tilføjet .float-{sm,md,lg,xl}-{left,right,none}klasser for responsive flydere og fjernet, .pull-leftog .pull-rightda de er overflødige til .float-leftog .float-right.
• Type:
  • Føjet responsive variationer til vores tekstjusteringsklasser .text-{sm,md,lg,xl}-{left,center,right}.
• Justering og afstand:
  • Tilføjet nye responsive margen- og polstringsværktøjer til alle sider, plus lodrette og vandrette stenografier.
  • Tilføjet bådlast af flexbox-værktøjer .
  • Faldt .center-blocktil den nye .mx-autoklasse.
• Clearfix opdateret for at droppe understøttelse af ældre browserversioner.

Leverandørpræfiks-mixins

Bootstrap 3's leverandørpræfiksmixins , som blev forældet i v3.2.0, er blevet fjernet i Bootstrap 4. Da vi bruger Autoprefixer , er de ikke længere nødvendige.

Fjernede 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

Dokumentation

Vores dokumentation modtog også en opgradering over hele linjen. Her er det laveste:

• Vi bruger stadig Jekyll, men vi har plugins i blandingen:
  • bugify.rbbruges til effektivt at liste posterne på vores side med browserfejl .
  • example.rber en brugerdefineret gaffel af standard highlight.rbplugin, hvilket muliggør lettere håndtering af eksempelkode.
  • callout.rber en lignende tilpasset forgaffel af det, men designet til vores specielle docs-forklaringer.
  • jekyll-toc bruges til at generere vores indholdsfortegnelse.
• Alt dokumentindhold er blevet omskrevet i Markdown (i stedet for HTML) for lettere redigering.
• Sider er blevet omorganiseret for enklere indhold og et mere tilgængeligt hierarki.
• Vi flyttede fra almindelig CSS til SCSS for at drage fuld fordel af Bootstraps variabler, mixins og mere.

Responsive hjælpeprogrammer

Alle @screen-variabler er blevet fjernet i v4.0.0. Brug media-breakpoint-up(), media-breakpoint-down(), eller media-breakpoint-only()Sass-mixin eller $grid-breakpointsSass-kortet i stedet.

Vores responsive utility-klasser er stort set blevet fjernet til fordel for eksplicitte displayhjælpeprogrammer.

• Klasserne .hiddenog .shower blevet fjernet, fordi de var i konflikt med jQuery's $(...).hide()og $(...).show()metoder. Prøv i stedet at skifte [hidden]attributten eller brug indlejrede stilarter som style="display: none;"og style="display: block;".
• Alle .hidden-klasser er blevet fjernet, undtagen printværktøjerne, som er blevet omdøbt.
  • 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
• Udskrivningsværktøjer starter ikke længere med .hidden-eller .visible-, men med .d-print-.
  • Gamle navne: .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 at bruge eksplicitte .visible-*klasser, gør du et element synligt ved simpelthen ikke at skjule det ved den skærmstørrelse. Du kan kombinere en .d-*-noneklasse med en .d-*-blockklasse for kun at vise et element på et givet interval af skærmstørrelser ( .d-none.d-md-block.d-xl-noneviser f.eks. elementet kun på mellemstore og store enheder).

Bemærk, at ændringerne af grid breakpoints i v4 betyder, at du skal gå et breakpoint større for at opnå de samme resultater. De nye responsive utility-klasser forsøger ikke at imødekomme mindre almindelige tilfælde, hvor et elements synlighed ikke kan udtrykkes som et enkelt sammenhængende udvalg af viewport-størrelser; du bliver i stedet nødt til at bruge tilpasset CSS i sådanne tilfælde.