Source

Migreren naar v4

Bootstrap 4 is een belangrijke herschrijving van het hele project. De meest opvallende wijzigingen worden hieronder samengevat, gevolgd door meer specifieke wijzigingen in relevante onderdelen.

Stabiele veranderingen

Bij de overgang van Beta 3 naar onze stabiele v4.0-release, zijn er geen belangrijke wijzigingen, maar er zijn enkele opmerkelijke wijzigingen.

Afdrukken

  • Vaste kapotte afdrukhulpprogramma's. Voorheen zou het gebruik van een .d-print-*klasse onverwacht elke andere .d-*klasse overschrijven. Nu komen ze overeen met onze andere weergavehulpprogramma's en zijn ze alleen van toepassing op die media ( @media print).

  • Uitgebreide beschikbare hulpprogramma's voor afdrukweergave zodat ze overeenkomen met andere hulpprogramma's. Beta 3 en ouder hadden alleen block, inline-block, inline, en none. Stabiele v4 toegevoegd flex, inline-flex, table, table-row, en table-cell.

  • Vaste weergave van afdrukvoorbeelden in browsers met nieuwe afdrukstijlen die specificeren @page size.

Bèta 3 wijzigingen

Hoewel Beta 2 het grootste deel van onze belangrijkste veranderingen zag tijdens de bètafase, hebben we er nog een paar die moeten worden aangepakt in de Beta 3-release. Deze wijzigingen zijn van toepassing als u bijwerkt naar bèta 3 van bèta 2 of een oudere versie van Bootstrap.

Diversen

  • De ongebruikte $thumbnail-transitionvariabele verwijderd. We waren niets aan het overzetten, dus het was gewoon extra code.
  • Het npm-pakket bevat geen andere bestanden dan onze bron- en dist-bestanden; als u erop vertrouwde en onze scripts via de node_modulesmap uitvoerde, moet u uw workflow aanpassen.

Formulieren

  • Herschreef zowel aangepaste als standaard selectievakjes en radio's. Nu hebben beide een overeenkomende HTML-structuur (buiten <div>met broer of zus <input>en <label>) en dezelfde lay-outstijlen (standaard gestapeld, inline met modificatieklasse). Hierdoor kunnen we het label opmaken op basis van de status van de invoer, waardoor de ondersteuning voor het disabledattribuut wordt vereenvoudigd (waarvoor voorheen een bovenliggende klasse nodig was) en onze formuliervalidatie beter wordt ondersteund.

    Als onderdeel hiervan hebben we de CSS gewijzigd voor het beheren van meerdere programma background-image's op aangepaste formulierselectievakjes en radio's. Voorheen had het nu verwijderde .custom-control-indicatorelement de achtergrondkleur, het verloop en het SVG-pictogram. Het aanpassen van het achtergrondverloop betekende dat je ze allemaal moest vervangen telkens als je er maar één moest veranderen. Nu hebben we .custom-control-label::beforevoor de vulling en het verloop en .custom-control-label::afterhet pictogram.

    Voeg toe om een ​​aangepaste controle inline uit te voeren .custom-control-inline.

  • Bijgewerkte selector voor op invoer gebaseerde knopgroepen. In plaats van [data-toggle="buttons"] { }voor stijl en gedrag, gebruiken we het dataattribuut alleen voor JS-gedrag en vertrouwen we op een nieuwe .btn-group-toggleklasse voor styling.

  • Verwijderd .col-form-legendten gunste van een licht verbeterde .col-form-label. Op deze manier .col-form-label-smen .col-form-label-lggemakkelijk op <legend>elementen te gebruiken.

  • Aangepaste bestandsinvoer heeft een wijziging in hun $custom-file-textSass-variabele ontvangen. Het is niet langer een geneste Sass-kaart en voedt nu slechts één string - de Browseknop, want dat is nu het enige pseudo-element dat door onze Sass wordt gegenereerd. De Choose filetekst komt nu uit de .custom-file-label.

Invoergroepen

  • Add-ons voor invoergroepen zijn nu specifiek voor hun plaatsing ten opzichte van een invoer. We hebben .input-group-addonen .input-group-btnvoor twee nieuwe klassen laten vallen, .input-group-prependen .input-group-append. Je moet nu expliciet een append of prepend gebruiken, wat veel van onze CSS vereenvoudigt. Plaats binnen een append of prepend uw knoppen zoals ze ergens anders zouden bestaan, maar laat de tekst in .input-group-text.

  • Validatiestijlen worden nu ondersteund, evenals meerdere invoer (hoewel u slechts één invoer per groep kunt valideren).

  • Grootteklassen moeten op het bovenliggende .input-groupelement staan ​​en niet op de afzonderlijke formulierelementen.

Bèta 2 wijzigingen

Terwijl we in bèta zijn, streven we ernaar om geen belangrijke wijzigingen door te voeren. Echter, dingen gaan niet altijd zoals gepland. Hieronder staan ​​de belangrijkste wijzigingen waarmee u rekening moet houden bij het overstappen van bèta 1 naar bèta 2.

Breken

  • Variabele $badge-coloren het gebruik ervan op .badge. We gebruiken een kleurcontrastfunctie om a te kiezen op colorbasis van de background-color, dus de variabele is niet nodig.
  • Functie hernoemd grayscale()naar om gray()te voorkomen dat conflicten met het oorspronkelijke CSS grayscale-filter worden verbroken.
  • Hernoemd .table-inverse, .thead-inverse, en .thead-defaultnaar .*-darken .*-light, passend bij onze kleurenschema's die elders worden gebruikt.
  • Responsieve tabellen genereren nu klassen voor elk rasteronderbrekingspunt. Dit wijkt af van Beta 1 in die zin dat het programma dat .table-responsiveje hebt gebruikt meer lijkt op .table-responsive-md. U kunt nu .table-responsiveof .table-responsive-{sm,md,lg,xl}naar behoefte gebruiken.
  • Bower-ondersteuning is weggevallen omdat de pakketbeheerder is beëindigd voor alternatieven (bijv. Garen of npm). Zie prieel/prieel#2298 voor details.
  • Bootstrap vereist nog steeds jQuery 1.9.1 of hoger, maar u wordt aangeraden versie 3.x te gebruiken aangezien de ondersteunde browsers van v3.x degene zijn die Bootstrap ondersteunt en v3.x heeft enkele beveiligingsoplossingen.
  • De ongebruikte .form-control-labelklasse verwijderd. Als je gebruik hebt gemaakt van deze klasse, was het een duplicaat van de .col-form-labelklasse die a verticaal centreerde <label>met de bijbehorende invoer in horizontale formulierlay-outs.
  • Veranderde de color-yiqvan een mixin die de coloreigenschap bevatte naar een functie die een waarde retourneert, zodat u deze voor elke CSS-eigenschap kunt gebruiken. In plaats van color-yiq(#000)zou je bijvoorbeeld schrijven color: color-yiq(#000);.

Hoogtepunten

  • Geïntroduceerd nieuw pointer-eventsgebruik op modals. De buitenste .modal-dialogpasseert gebeurtenissen met pointer-events: nonevoor aangepaste klikverwerking (waardoor het mogelijk is om gewoon naar .modal-backdropklikken te luisteren) en gaat het vervolgens tegen voor de werkelijke .modal-contentmet pointer-events: auto.

Overzicht

Dit zijn de grote ticketitems waar u op moet letten bij het overstappen van v3 naar v4.

Browserondersteuning

  • Ondersteuning voor IE8, IE9 en iOS 6 is weggevallen. v4 is nu alleen nog IE10+ en iOS 7+. Voor sites die een van beide nodig hebben, gebruikt u v3.
  • Officiële ondersteuning toegevoegd voor Android v5.0 Lollipop's Browser en WebView. Eerdere versies van de Android Browser en WebView blijven alleen onofficieel ondersteund.

Globale veranderingen

  • Flexbox is standaard ingeschakeld. In het algemeen betekent dit een verschuiving weg van drijvers en meer over onze componenten.
  • Overgeschakeld van Less naar Sass voor onze bron-CSS-bestanden.
  • Overgeschakeld van pxnaar remals onze primaire CSS-eenheid, hoewel pixels nog steeds worden gebruikt voor mediaquery's en rastergedrag, aangezien apparaatviewports niet worden beïnvloed door de typegrootte.
  • Globale lettergrootte verhoogd van 14pxnaar 16px.
  • Vernieuwde rasterlagen om een ​​vijfde optie toe te voegen (voor kleinere apparaten op 576pxen onder) en de -xstussenvoegsel uit die klassen verwijderd. Voorbeeld: .col-6.col-sm-4.col-md-3.
  • Het afzonderlijke optionele thema vervangen door configureerbare opties via SCSS-variabelen (bijv. $enable-gradients: true).
  • Bouwsysteem gereviseerd om een ​​reeks npm-scripts te gebruiken in plaats van Grunt. Zie package.jsonvoor alle scripts, of ons project readme voor lokale ontwikkelingsbehoeften.
  • Niet-reagerend gebruik van Bootstrap wordt niet langer ondersteund.
  • De online Customizer laten vallen ten gunste van uitgebreidere installatiedocumentatie en aangepaste builds.
  • Tientallen nieuwe hulpprogramma-klassen toegevoegd voor veelvoorkomende CSS-eigenschap-waardeparen en sneltoetsen voor marge/opvulafstand.

Grid-systeem

  • Verplaatst naar flexbox.
    • Ondersteuning toegevoegd voor flexbox in de rastermixins en vooraf gedefinieerde klassen.
    • Als onderdeel van flexbox, inclusief ondersteuning voor verticale en horizontale uitlijningsklassen.
  • Bijgewerkte namen van rasterklassen en een nieuwe rasterlaag.
    • Hieronder een nieuwe smrasterlaag toegevoegd 768pxvoor meer gedetailleerde controle. We hebben nu xs, sm, md, lgen xl. Dit betekent ook dat elke laag een niveau omhoog is gegaan (dus .col-md-6in v3 is nu .col-lg-6in v4).
    • xsrasterklassen zijn aangepast zodat het tussenvoegsel niet meer nodig is om nauwkeuriger weer te geven dat ze stijlen gaan toepassen op min-width: 0en niet op een ingestelde pixelwaarde. In plaats van .col-xs-6, is het nu .col-6. Alle andere rasterlagen vereisen het tussenvoegsel (bijv. sm).
  • Bijgewerkte rastergroottes, mixins en variabelen.
    • Rastergoten hebben nu een Sass-kaart, zodat u bij elk breekpunt specifieke gootbreedten kunt opgeven.
    • Bijgewerkte rastermixins om een make-col-ready​​prep-mixin te gebruiken en een make-colom de flexen max-widthvoor individuele kolomafmetingen in te stellen.
    • Gewijzigde mediaquery-onderbrekingspunten van het rastersysteem en containerbreedten om rekening te houden met de nieuwe rasterlaag en ervoor te zorgen dat kolommen gelijkelijk deelbaar zijn door 12hun maximale breedte.
    • Rasteronderbrekingspunten en containerbreedten worden nu afgehandeld via Sass-kaarten ( $grid-breakpointsen $container-max-widths) in plaats van een handvol afzonderlijke variabelen. Deze vervangen de @screen-*variabelen volledig en stellen u in staat de rasterlagen volledig aan te passen.
    • Mediaquery's zijn ook veranderd. In plaats van onze mediaquerydeclaraties elke keer met dezelfde waarde te herhalen, hebben we nu @include media-breakpoint-up/down/only. Nu, in plaats van te schrijven @media (min-width: @screen-sm-min) { ... }, kun je schrijven @include media-breakpoint-up(sm) { ... }.

Componenten

  • Panelen, miniaturen en putten voor een nieuwe allesomvattende component, kaarten .
  • Het lettertype van het Glyphicons-pictogram is verwijderd. Als u pictogrammen nodig heeft, zijn enkele opties:
  • De plug-in Affix jQuery laten vallen.
    • We raden aan om position: stickyin plaats daarvan te gebruiken. Zie het item HTML5 Please voor details en specifieke aanbevelingen voor polyfill. Een suggestie is om een @supports​​regel te gebruiken om deze te implementeren (bijv. @supports (position: sticky) { ... })/
    • Als u Affix zou gebruiken om extra, niet position-stijlen toe te passen, ondersteunen de polyfills uw gebruik mogelijk niet. Een optie voor dergelijk gebruik is de ScrollPos-Styler- bibliotheek van derden .
  • De pager-component laten vallen omdat het in wezen licht aangepaste knoppen waren.
  • Bijna alle componenten geherstructureerd om meer niet-geneste klassenkiezers te gebruiken in plaats van overspecifieke kinderkiezers.

Per onderdeel

Deze lijst belicht de belangrijkste wijzigingen per component tussen v3.xx en v4.0.0.

Opnieuw opstarten

Nieuw bij Bootstrap 4 is de Reboot , een nieuwe stylesheet die voortbouwt op Normalize met onze eigen ietwat eigenzinnige reset-stijlen. Selectors die in dit bestand verschijnen, gebruiken alleen elementen - er zijn hier geen klassen. Dit isoleert onze resetstijlen van onze componentstijlen voor een meer modulaire aanpak. Enkele van de belangrijkste resets die dit omvat, zijn de box-sizing: border-boxwijziging, het verplaatsen van emnaar remeenheden op veel elementen, linkstijlen en veel resets van formulierelementen.

Typografie

  • .text-Alle hulpprogramma's naar het _utilities.scssbestand verplaatst .
  • Dropped .page-headeromdat de stijlen ervan kunnen worden toegepast via hulpprogramma's.
  • .dl-horizontalis gevallen. Gebruik in plaats daarvan .rowop <dl>en gebruik rasterkolomklassen (of mixins) op zijn <dt>en <dd>kinderen.
  • Opnieuw ontworpen blockquotes, waarbij hun stijlen van het <blockquote>element naar een enkele klasse zijn verplaatst, .blockquote. De .blockquote-reversemodifier voor teksthulpprogramma's verwijderd.
  • .list-inlinevereist nu dat op de onderliggende lijstitems de nieuwe .list-inline-itemklasse wordt toegepast.

Afbeeldingen

  • Hernoemd .img-responsivenaar .img-fluid.
  • hernoemd .img-roundednaar.rounded
  • hernoemd .img-circlenaar.rounded-circle

Tafels

  • Bijna alle instanties van de >selector zijn verwijderd, wat betekent dat geneste tabellen nu automatisch stijlen overnemen van hun ouders. Dit vereenvoudigt onze selectors en mogelijke aanpassingen aanzienlijk.
  • Hernoemd .table-condensednaar .table-smvoor consistentie.
  • Een nieuwe .table-inverseoptie toegevoegd.
  • Tabelkopmodificaties toegevoegd: .thead-defaulten .thead-inverse.
  • Hernoemde contextuele klassen om een .table-​​-prefix te hebben. Vandaar .active, .success, .warning, .dangeren .infonaar .table-active, .table-success, .table-warning, .table-dangeren .table-info.

Formulieren

  • Verplaatst element wordt teruggezet naar het _reboot.scssbestand.
  • Hernoemd .control-labelnaar .col-form-label.
  • Hernoemd .input-lgen .input-smnaar .form-control-lgen .form-control-sm, respectievelijk.
  • Klassen .form-group-*laten vallen omwille van de eenvoud. Gebruik .form-control-*nu klassen in plaats daarvan.
  • Weggelaten .help-blocken vervangen door .form-textvoor helptekst op blokniveau. Gebruik voor inline helptekst en andere flexibele opties hulpprogrammaklassen zoals .text-muted.
  • Gedropt .radio-inlineen .checkbox-inline.
  • Geconsolideerd .checkboxen .radioin .form-checken de verschillende .form-check-*klassen.
  • Horizontale vormen gereviseerd:
    • Klassenvereiste laten vallen .form-horizontal.
    • .form-grouppast niet langer stijlen van de .rowvia mixin toe, dus .rowis nu vereist voor horizontale rasterlay-outs (bijv. <div class="form-group row">).
    • Nieuwe .col-form-labelklasse toegevoegd om labels verticaal te centreren met .form-controls.
    • Nieuw toegevoegd .form-rowvoor compacte vormlay-outs met de rasterklassen (verwissel je .rowvoor een .form-rowen ga).
  • Ondersteuning voor aangepaste formulieren toegevoegd (voor selectievakjes, radio's, selecties en bestandsinvoer).
  • .has-error, .has-warning, en klassen vervangen .has-successdoor HTML5-formuliervalidatie via CSS'en :invaliden :validpseudo-klassen.
  • Hernoemd .form-control-staticnaar .form-control-plaintext.

Toetsen

  • Hernoemd .btn-defaultnaar .btn-secondary.
  • De .btn-xsklasse volledig laten vallen, omdat deze .btn-smverhoudingsgewijs veel kleiner is dan die van v3.
  • De stateful-knopfunctie van de button.jsjQuery-plug-in is verwijderd. Dit omvat de $().button(string)en $().button('reset')methoden. We raden aan om in plaats daarvan een klein beetje aangepast JavaScript te gebruiken, wat het voordeel heeft dat je je precies zo gedraagt ​​​​als je wilt.
    • Merk op dat de andere functies van de plug-in (aanvinkvakjes voor knoppen, knopradio's, enkele schakelknoppen) zijn behouden in v4.
  • Verander knoppen ' [disabled]naar :disabledals IE9+ ondersteunt :disabled. Het fieldset[disabled]is echter nog steeds nodig omdat native uitgeschakelde velden nog steeds bugs bevatten in IE11 .

Knop groep

  • Component herschreven met flexbox.
  • verwijderd .btn-group-justified. Als vervanging kun je <div class="btn-group d-flex" role="group"></div>als wikkel rond elementen gebruiken met .w-100.
  • De .btn-group-xsklas volledig laten vallen vanwege het verwijderen van .btn-xs.
  • Expliciete afstand tussen knopgroepen in knoppenbalken verwijderd; gebruik nu margehulpprogramma's.
  • Verbeterde documentatie voor gebruik met andere componenten.
  • Overgeschakeld van bovenliggende selectors naar enkelvoudige klassen voor alle componenten, modifiers, enz.
  • Vereenvoudigde dropdown-stijlen om niet langer te worden verzonden met naar boven of naar beneden gerichte pijlen aan het vervolgkeuzemenu.
  • Dropdowns kunnen nu met <div>s of <ul>s worden gebouwd.
  • Opnieuw opgebouwde dropdown-stijlen en markeringen om eenvoudige, ingebouwde ondersteuning te bieden voor <a>en <button>gebaseerde dropdown-items.
  • Hernoemd .dividernaar .dropdown-divider.
  • Dropdown-items vereisen nu .dropdown-item.
  • Dropdown-schakelaars vereisen niet langer een expliciete <span class="caret"></span>; dit wordt nu automatisch aangeboden via CSS'en ::afterop .dropdown-toggle.

Grid-systeem

  • Een nieuw 576pxrasteronderbrekingspunt toegevoegd als sm, wat betekent dat er nu in totaal vijf niveaus zijn ( xs, sm, md, lg, en xl).
  • De responsieve rastermodificatieklassen hernoemd van .col-{breakpoint}-{modifier}-{size}naar .{modifier}-{breakpoint}-{size}voor eenvoudigere rasterklassen.
  • Push- en pull-modificatieklassen laten vallen voor de nieuwe flexbox-aangedreven orderklassen. In plaats van .col-8.push-4en .col-4.pull-8zou u bijvoorbeeld .col-8.order-2en gebruiken .col-4.order-1.
  • Flexbox-hulpprogrammaklassen toegevoegd voor rastersysteem en componenten.

Lijst groepen

  • Component herschreven met flexbox.
  • Vervangen a.list-group-itemdoor een expliciete klasse, .list-group-item-action, voor het opmaken van koppelingen en knopversies van lijstgroepitems.
  • Toegevoegde .list-group-flushklasse voor gebruik met kaarten.
  • Component herschreven met flexbox.
  • Gezien de verplaatsing naar flexbox, is de uitlijning van de afwijspictogrammen in de koptekst waarschijnlijk verbroken omdat we geen floats meer gebruiken. Floated content staat voorop, maar bij flexbox is dat niet meer het geval. Werk uw afwijzingspictogrammen bij om na modale titels te komen die moeten worden opgelost.
  • De remoteoptie (die kan worden gebruikt om automatisch externe inhoud in een modaal te laden en te injecteren) en de bijbehorende loaded.bs.modalgebeurtenis zijn verwijderd. We raden u aan in plaats daarvan sjablonen aan de clientzijde of een raamwerk voor gegevensbinding te gebruiken, of zelf jQuery.load aan te roepen .
  • Component herschreven met flexbox.
  • Bijna alle >selectors laten vallen voor eenvoudigere styling via niet-geneste klassen.
  • In plaats van HTML-specifieke selectors zoals .nav > li > a, gebruiken we aparte klassen voor .navs, .nav-items en .nav-links. Dit maakt uw HTML flexibeler en vergroot de uitbreidbaarheid.

De navigatiebalk is volledig herschreven in flexbox met verbeterde ondersteuning voor uitlijning, reactievermogen en maatwerk.

  • Responsief navbar-gedrag wordt nu toegepast op de .navbarklas via de vereiste .navbar-expand-{breakpoint} waar u kiest waar u de navbar wilt samenvouwen. Voorheen was dit een minder variabele wijziging en moest opnieuw worden gecompileerd.
  • .navbar-defaultis nu .navbar-light, maar .navbar-darkblijft hetzelfde. Een van deze is vereist op elke navigatiebalk. Deze klassen stellen echter niet langer background-colors vast; in plaats daarvan beïnvloeden ze in wezen alleen color.
  • Navbars vereisen nu een of andere achtergrondverklaring. Kies uit onze achtergrondhulpprogramma's ( .bg-*) of stel uw eigen hulpprogramma's in met de licht/inverse klassen hierboven voor gekke aanpassingen .
  • Gezien flexbox-stijlen kunnen navigatiebalken nu flexbox-hulpprogramma's gebruiken voor eenvoudige uitlijningsopties.
  • .navbar-toggleis nu .navbar-toggleren heeft verschillende stijlen en innerlijke opmaak (niet meer drie <span>s).
  • Heb de .navbar-formklas helemaal laten vallen. Het is niet langer nodig; in plaats daarvan, gebruik .form-inlineen pas indien nodig margehulpprogramma's toe.
  • Navbars bevatten niet langer margin-bottomof border-radiusstandaard. Gebruik zo nodig hulpprogramma's.
  • Alle voorbeelden met navigatiebalken zijn bijgewerkt met nieuwe markeringen.

Paginering

  • Component herschreven met flexbox.
  • Expliciete klassen ( .page-item, .page-link) zijn nu vereist op de afstammelingen van .paginations
  • Het .pageronderdeel volledig laten vallen omdat het niet meer was dan aangepaste overzichtsknoppen.
  • Een expliciete klasse, .breadcrumb-item, is nu vereist op de nakomelingen van .breadcrumbs

Etiketten en insignes

  • Geconsolideerd .labelen .badgeondubbelzinnig van het <label>element en gerelateerde componenten te vereenvoudigen.
  • Toegevoegd .badge-pillals modifier voor een afgeronde "pil" -look.
  • Badges worden niet langer automatisch weergegeven in lijstgroepen en andere componenten. Daar zijn nu hulpprogrammaklassen voor nodig.
  • .badge-defaultis verwijderd en .badge-secondarytoegevoegd om overeen te komen met componentmodificatieklassen die elders worden gebruikt.

Panelen, miniaturen en wells

Geheel laten vallen voor de nieuwe kaartcomponent.

Panelen

  • .panelto .card, nu gebouwd met flexbox.
  • .panel-defaultverwijderd en niet vervangen.
  • .panel-groupverwijderd en niet vervangen. .card-groupis geen vervanging, het is anders.
  • .panel-headingtot.card-header
  • .panel-titlenaar .card-title. Afhankelijk van het gewenste uiterlijk, wilt u misschien ook kopelementen of klassen (bijv <h3>. , .h3) of vetgedrukte elementen of klassen (bijv <strong>. , <b>, .font-weight-bold) gebruiken. Merk op dat .card-title, hoewel het dezelfde naam heeft, een ander uiterlijk geeft dan .panel-title.
  • .panel-bodytot.card-body
  • .panel-footertot.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, en .panel-dangerzijn verwijderd voor .bg-, .text-, en .borderhulpprogramma's die zijn gegenereerd op onze $theme-colorsSass-kaart.

Voortgang

  • Contextuele .progress-bar-*klassen vervangen door .bg-*hulpprogramma's. class="progress-bar progress-bar-danger"Wordt bijvoorbeeld class="progress-bar bg-danger".
  • Vervangen .activevoor geanimeerde voortgangsbalken met .progress-bar-animated.
  • Het hele onderdeel gereviseerd om het ontwerp en de styling te vereenvoudigen. We hebben minder stijlen die u kunt overschrijven, nieuwe indicatoren en nieuwe pictogrammen.
  • Alle CSS is niet genest en hernoemd, zodat elke klasse wordt voorafgegaan door .carousel-.
    • Voor carrouselitems zijn .next, .prev, .left, en .rightnu .carousel-item-next, .carousel-item-prev, .carousel-item-left, en .carousel-item-right.
    • .itemis nu ook .carousel-item.
    • Voor prev/next-besturingselementen, .carousel-control.righten .carousel-control.leftzijn nu .carousel-control-nexten .carousel-control-prev, wat betekent dat ze niet langer een specifieke basisklasse vereisen.
  • Alle responsieve stijlen verwijderd, uitstel van hulpprogramma's (bijvoorbeeld het tonen van bijschriften op bepaalde viewports) en aangepaste stijlen indien nodig.
  • Afbeeldingsoverschrijvingen voor afbeeldingen in carrouselitems zijn uitgesteld tot hulpprogramma's.
  • Het Carousel-voorbeeld getweaked om de nieuwe opmaak en stijlen op te nemen.

Tafels

  • Ondersteuning voor gestileerde geneste tabellen verwijderd. Alle tabelstijlen worden nu overgenomen in v4 voor eenvoudigere selectors.
  • Inverse tabelvariant toegevoegd.

Nutsvoorzieningen

  • Weergeven, verborgen en meer:
    • Weergavehulpprogramma's responsief gemaakt (bijv. .d-noneen d-{sm,md,lg,xl}-none).
    • Het grootste deel van de .hidden-*hulpprogramma's voor nieuwe weergavehulpprogramma's laten vallen . Gebruik bijvoorbeeld in plaats van .hidden-sm-up. .d-sm-noneDe hulpprogramma's hernoemd .hidden-printom het naamgevingsschema van de weergavehulpprogramma's te gebruiken. Meer informatie vindt u in het gedeelte Responsieve hulpprogramma's op deze pagina.
    • Classes toegevoegd .float-{sm,md,lg,xl}-{left,right,none}voor responsieve floats en verwijderd .pull-leften .pull-rightaangezien ze overbodig zijn voor .float-leften .float-right.
  • Type:
    • Responsieve variaties toegevoegd aan onze tekstuitlijningsklassen .text-{sm,md,lg,xl}-{left,center,right}.
  • Uitlijning en afstand:
  • Clearfix bijgewerkt om ondersteuning voor oudere browserversies te laten vallen.

Leveranciersvoorvoegsel mixins

De leveranciersvoorvoegsels van Bootstrap 3 , die in v3.2.0 waren verouderd, zijn verwijderd in Bootstrap 4. Sinds we Autoprefixer gebruiken , zijn ze niet langer nodig.

De volgende mixins verwijderd: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d,user-select

Documentatie

Onze documentatie heeft ook over de hele linie een upgrade gekregen. Hier is het dieptepunt:

  • We gebruiken nog steeds Jekyll, maar we hebben plug-ins in de mix:
    • bugify.rbwordt gebruikt om de vermeldingen op onze pagina met browserbugs efficiënt weer te geven .
    • example.rbis een aangepaste fork van de standaard highlight.rbplug-in, waardoor de verwerking van voorbeeldcodes eenvoudiger wordt.
    • callout.rbis een vergelijkbare aangepaste vork daarvan, maar ontworpen voor onze speciale docs-callouts.
    • jekyll-toc wordt gebruikt om onze inhoudsopgave te genereren.
  • Alle inhoud van documenten is herschreven in Markdown (in plaats van HTML) voor eenvoudiger bewerken.
  • Pagina's zijn gereorganiseerd voor eenvoudigere inhoud en een meer benaderbare hiërarchie.
  • We zijn overgestapt van gewone CSS naar SCSS om optimaal te profiteren van de variabelen, mixins en meer van Bootstrap.

Responsieve hulpprogramma's

Alle @screen-variabelen zijn verwijderd in v4.0.0. Gebruik in plaats daarvan de media-breakpoint-up(), media-breakpoint-down(), of media-breakpoint-only()Sass-mixins of de $grid-breakpointsSass-kaart.

Onze responsieve hulpprogrammaklassen zijn grotendeels verwijderd ten gunste van expliciete displayhulpprogramma's.

  • De klassen .hiddenen .showzijn verwijderd omdat ze in strijd waren met jQuery's $(...).hide()en $(...).show()methoden. Probeer in plaats daarvan het attribuut te wisselen [hidden]of gebruik inline-stijlen zoals style="display: none;"en style="display: block;".
  • Alle .hidden-klassen zijn verwijderd, behalve de afdrukhulpprogramma's die een nieuwe naam hebben gekregen.
    • Verwijderd uit 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
    • Verwijderd uit v4-alfa's:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Afdrukhulpprogramma's beginnen niet langer met .hidden-of .visible-, maar met .d-print-.
    • Oude namen: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Nieuwe lessen: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

In plaats van expliciete .visible-*klassen te gebruiken, maak je een element zichtbaar door het simpelweg niet te verbergen op die schermgrootte. U kunt één klasse combineren .d-*-nonemet één .d-*-blockklasse om een ​​element alleen op een bepaald interval van schermgroottes weer te geven ( .d-none.d-md-block.d-xl-nonehet element wordt bijvoorbeeld alleen weergegeven op middelgrote en grote apparaten).

Houd er rekening mee dat de wijzigingen in de rasteronderbrekingspunten in v4 betekenen dat u een breekpunt groter moet gaan om dezelfde resultaten te bereiken. De nieuwe responsieve hulpprogrammaklassen proberen geen minder voorkomende gevallen te accommoderen waarin de zichtbaarheid van een element niet kan worden uitgedrukt als een enkele aaneengesloten reeks viewport-groottes; in dergelijke gevallen moet u in plaats daarvan aangepaste CSS gebruiken.