in English

Migréieren op v4

Bootstrap 4 ass eng grouss Iwwerschrëft vum ganze Projet. Déi bemierkenswäert Ännerungen ginn hei ënnen zesummegefaasst, gefollegt vu méi spezifesche Ännerunge fir relevante Komponenten.

Stabil Ännerungen

Plënneren aus Beta 3 op eis stabil v4.x Verëffentlechung, et gi keng briechen Ännerungen, mä et sinn e puer Notabele Ännerungen.

Dréckerei

  • Fixed gebrach Print Utilities. Virdrun, d'Benotzung vun enger .d-print-*Klass géif onerwaart all aner .d-*Klass iwwerschreiden. Elo passen se un eis aner Display-Utilities a gëllen nëmmen op dës Medien ( @media print).

  • Erweidert verfügbar Print Display Utilities fir aner Utilities ze passen. Beta 3 a méi al haten nëmmen block, inline-block, inline, an none. Stabil v4 dobäigesat flex, inline-flex, table, table-row, an table-cell.

  • Fixed Print Virschau Rendering iwwer Browser mat neie Printstiler déi spezifizéieren @page size.

Beta 3 Ännerungen

Wärend Beta 2 de gréissten Deel vun eise briechen Ännerungen während der Beta Phase gesinn huet, awer mir hunn nach e puer déi an der Beta 3 Verëffentlechung adresséiert musse ginn. Dës Ännerungen gëllen wann Dir op Beta 3 vun Beta 2 oder all eeler Versioun vu Bootstrap aktualiséiert.

Verschiddenes

  • Déi onbenotzt $thumbnail-transitionVariabel geläscht. Mir hunn näischt iwwerginn, also war et just extra Code.
  • Den npm Package enthält keng Dateien méi wéi eis Quell- a Dist-Dateien; Wann Dir op se vertraut hutt an eis Scripten iwwer den node_modulesDossier leeft, sollt Dir Äre Workflow upassen.

Formen

  • Schreift souwuel personaliséiert wéi Standardcheckboxen a Radios ëm. Elo hu béid eng passend HTML Struktur (äussert <div>mat Geschwëster <input>an <label>) an déiselwecht Layoutstiler (Stacked Default, inline mat Modifier Klass). Dëst erlaabt eis de Label baséiert op den Input Staat ze styléieren, d'Ënnerstëtzung fir den disabledAttribut vereinfacht (virdrun eng Elterenklass erfuerdert) a besser eis Formvalidatioun z'ënnerstëtzen.

    Als Deel vun dësem hu mir d'CSS geännert fir verschidde background-images op personaliséierte Form Checkboxen a Radios ze managen. Virdrun huet dat elo ewechgeholl .custom-control-indicatorElement den Hannergrondfaarf, Gradient an SVG Ikon. Den Hannergrondgradient personaliséiere bedeit datt Dir all déi ersetzt all Kéier wann Dir just een geännert hutt. Elo hu mir .custom-control-label::beforefir d'Fëllung a Gradient a .custom-control-label::afterbehandelt d'Ikon.

    Fir e personaliséierte Scheck inline ze maachen, add .custom-control-inline.

  • Aktualiséiert Selector fir Input-baséiert Knäppchengruppen. Amplaz [data-toggle="buttons"] { }fir Stil a Verhalen, benotze mir den dataAttribut just fir JS Verhalen a vertrauen op eng nei .btn-group-toggleKlass fir Styling.

  • Geläscht .col-form-legendzugonschte vun engem liicht verbessert .col-form-label. Dës Manéier .col-form-label-sma .col-form-label-lgkann op <legend>Elementer mat Liichtegkeet benotzt ginn.

  • Benotzerdefinéiert Dateieinputen kruten eng Ännerung vun hirer $custom-file-textSass Variabel. Et ass net méi eng nestéiert Sass Kaart an elo dréit nëmmen eng String - de BrowseKnäppchen well dat ass elo dat eenzegt Pseudo-Element, deen aus eisem Sass generéiert gëtt. Den Choose fileText kënnt elo vun der .custom-file-label.

Input Gruppen

  • Input Grupp Addons sinn elo spezifesch fir hir Plazéierung relativ zu engem Input. Mir hunn erofgaang .input-group-addona .input-group-btnfir zwee nei Klassen, .input-group-prependan .input-group-append. Dir musst elo explizit en Append oder e Prepend benotzen, wat vill vun eisem CSS vereinfacht. Bannent engem Append oder Prepend, setzt Är Knäppercher wéi se soss anzwousch existéiere géifen, awer wéckelt Text an .input-group-text.

  • Validatiounsstiler ginn elo ënnerstëtzt, sou wéi verschidde Inputen (och wann Dir nëmmen een Input pro Grupp validéiere kënnt).

  • Gréisst Klassen mussen op den Elterendeel sinn .input-groupan net déi eenzel Formelementer.

Beta 2 Ännerungen

Wärend an der Beta, ziele mir keng brechen Ännerungen ze hunn. Et geet awer net ëmmer wéi geplangt. Drënner sinn déi breet Ännerunge fir am Kapp ze halen wann Dir vu Beta 1 op Beta 2 plënnert.

Ofbriechen

  • Geläscht $badge-colorVariabel a seng Notzung op .badge. Mir benotzen eng Faarfkontrastfunktioun fir e colorbaséiert op der ze wielen background-color, sou datt d'Variabel onnéideg ass.
  • Ëmbenannt grayscale()Funktioun fir gray()ze vermeiden Konflikt mam CSS native grayscaleFilter.
  • Umbenannt .table-inverse, .thead-inverse, an .thead-defaultzu .*-darkan .*-light, passenden eise Faarfschemaen soss anzwousch benotzt.
  • Responsabel Dëscher generéieren elo Klassen fir all Gitterbriechpunkt. Dëst brécht aus Beta 1 an datt deen .table-responsiveDir benotzt hutt méi wéi .table-responsive-md. Dir kënnt elo benotzen .table-responsiveoder .table-responsive-{sm,md,lg,xl}wéi néideg.
  • Entlooss Bower Ënnerstëtzung wéi de Package Manager gouf fir Alternativen ofgeschaaft (zB Yarn oder npm). Gesinn Bower / Bower # 2298 fir Detailer.
  • Bootstrap erfuerdert nach ëmmer jQuery 1.9.1 oder méi héich, awer Dir sidd ugeroden d'Versioun 3.x ze benotzen, well déi ënnerstëtzte Browser vum v3.x sinn déi, déi Bootstrap ënnerstëtzt plus v3.x huet e puer Sécherheetsfixer.
  • Déi onbenotzt .form-control-labelKlass geläscht. Wann Dir dës Klass benotzt hutt, war et Duplikat vun der .col-form-labelKlass déi vertikal zentréiert a <label>mat der assoziéierter Input an horizontalen Form Layouten.
  • Geännert der color-yiqvun engem Mixin datt d' colorPropriétéit op eng Funktioun abegraff déi e Wäert zréck, erlaabt Iech et fir all CSS Propriétéit ze benotzen. Zum Beispill, amplaz color-yiq(#000), géift Dir schreiwen color: color-yiq(#000);.

Highlights

  • Nei pointer-eventsBenotzung op Modal agefouert. De baussenzege .modal-dialogPassë duerch Evenementer mat pointer-events: nonefir Mooss klickt Ëmgank (mécht et méiglech just op der .modal-backdropfir all klickt lauschteren), an dann entgéintgeholl et fir déi tatsächlech .modal-contentmat pointer-events: auto.

Resumé

Hei sinn déi grouss Ticketartikelen déi Dir wëllt bewosst sinn wann Dir vu v3 op v4 plënnert.

Browser Ënnerstëtzung

  • IE8, IE9, an iOS 6 Ënnerstëtzung erofgaang. v4 ass elo nëmmen IE10+ an iOS 7+. Fir Siten déi entweder vun deenen brauchen, benotzt v3.
  • Zousätzlech offiziell Ënnerstëtzung fir Android v5.0 Lollipop's Browser a WebView. Fréier Versioune vum Android Browser a WebView bleiwen nëmmen inoffiziell ënnerstëtzt.

Global Ännerungen

  • Flexbox ass par défaut aktivéiert. Am Allgemengen heescht dat e Beweegung ewech vu Schwammen a méi iwwer eis Komponenten.
  • Gewiesselt vu Manner op Sass fir eis Quell CSS Dateien.
  • Gewiesselt vun pxop remals eis primär CSS Eenheet, obwuel Pixel nach ëmmer fir Medienufroen a Gitterverhalen benotzt ginn well Apparat Viewports net vun der Typgréisst beaflosst ginn.
  • Global Schrëftgréisst vergréissert vun 14pxop 16px.
  • Renovéiert Gittertiere fir eng fënneft Optioun ze addéieren (adressert méi kleng Apparater um 576pxan ënnen) an huet den -xsInfix aus dëse Klassen ewechgeholl. Beispill .col-6.col-sm-4.col-md-3:.
  • Ersat déi separat fakultativ Thema mat konfiguréierbaren Optiounen iwwer SCSS Variablen (zB $enable-gradients: true.
  • Build System iwwerschafft fir eng Serie vun npm Scripten ze benotzen amplaz Grunt. Kuckt package.jsonfir all Scripten, oder eise Projet Readme fir lokal Entwécklungsbedürfnisser.
  • Net-reaktiounsfäeger Notzung vu Bootstrap gëtt net méi ënnerstëtzt.
  • Den Online Customizer erofgefall fir méi extensiv Setupdokumentatioun a personaliséiert Builds.
  • Dosende vun neien Utility-Klassen bäigefüügt fir gemeinsam CSS Eegeschafte-Wäertpaaren a Ofkierzungen fir Ofkierzungen fir Margin / Padding.

Gitter System

  • Geplënnert op Flexbox.
    • Zousätzlech Ënnerstëtzung fir Flexbox an de Gittermixins a virdefinéierte Klassen.
    • Als Deel vun flexbox, abegraff Ënnerstëtzung fir vertikal an horizontal Ausriichtung Klassen.
  • Aktualiséiert Gitter Klass Nimm an en neit Gitter Tier.
    • En neie smGittertier ënnen bäigefüügt 768pxfir méi granulär Kontroll. Mir hunn elo xs, sm, md, lg, an xl. Dëst bedeit och datt all Tier een Niveau eropgehéiert gouf (also .col-md-6am v3 ass elo .col-lg-6a v4).
    • xsGitterklassen goufen geännert fir den Infix net ze erfuerderen fir méi präzis duerzestellen datt se ufänken Stiler unzefänken min-width: 0an net e bestëmmte Pixelwäert. Amplaz .col-xs-6ass et elo .col-6. All aner Gitterniveauen erfuerderen d'Infix (zB sm).
  • Aktualiséiert Gittergréissten, Mixins a Variablen.
    • Gitterrennen hunn elo eng Sass Kaart sou datt Dir spezifesch Rennebreeten op all Breakpunkt spezifizéiere kënnt.
    • Aktualiséiert Gittermixins fir e make-col-readyPrep Mixin ze benotzen an e make-colfir d' flexa max-widthfir eenzel Kolonngréisst ze setzen.
    • Geännert Gittersystem Medien Query Breakpoints a Container Breet fir den neie Gitter Tier ze berechnen a sécherzestellen datt d'Säulen gläichméisseg deelbar mat 12hirer maximaler Breet sinn.
    • Gitterbriechpunkten a Containerbreet ginn elo iwwer Sass Kaarten ( $grid-breakpointsan $container-max-widths) gehandhabt anstatt eng Handvoll getrennte Variabelen. Dës ersetzen d' @screen-*Variabelen ganz an erlaben Iech d'Gittertier komplett ze personaliséieren.
    • Medien Ufroen hunn och geännert. Amplaz eis Medien Ufroen Deklaratioune mat deemselwechte Wäert all Kéier ze widderhuelen, hu mir elo @include media-breakpoint-up/down/only. Elo, amplaz ze schreiwen @media (min-width: @screen-sm-min) { ... }, kënnt Dir schreiwen @include media-breakpoint-up(sm) { ... }.

Komponenten

  • Gefall Panelen, Miniaturbiller, a Wells fir eng nei alles ëmfaassend Komponent, Kaarte .
  • D'Glyphicons Ikon Schrëft erofgelooss. Wann Dir Ikonen braucht, sinn e puer Optiounen:
  • Den Affix jQuery Plugin erofgefall.
    • Mir recommandéieren position: stickyamplaz ze benotzen. Kuckt den HTML5 W.e.g. Entrée fir Detailer a spezifesch Polyfill Empfehlungen. Ee Virschlag ass eng @supportsRegel ze benotzen fir se ëmzesetzen (zB, @supports (position: sticky) { ... })
    • Wann Dir Affix benotzt fir zousätzlech, net- positionStiler z'applizéieren, kënnen d'Polyfills Äre Gebrauchsfall net ënnerstëtzen. Eng Optioun fir sou Benotzung ass d'Drëtt Partei ScrollPos-Styler Bibliothéik.
  • De Pagerkomponent erofgefall well et wesentlech liicht personaliséiert Knäppercher war.
  • Refactored bal all Komponente fir méi un-nested Klass selectors ze benotzen amplaz iwwer-spezifesch Kanner selectors.

Duerch Komponent

Dës Lëscht Highlight Schlëssel Ännerungen vun Komponent tëscht v3.xx an v4.0.0.

Neistarten

Nei op Bootstrap 4 ass de Reboot , en neie Stylesheet deen op Normalize baut mat eisen eegenen e bëssen Meenungsfräie Resetstiler. Selektoren, déi an dësem Fichier erschéngen, benotzen nëmmen Elementer - et gi keng Klassen hei. Dëst isoléiert eis Resetstiler vun eise Komponentstiler fir eng méi modulär Approche. E puer vun de wichtegsten Resets, déi dëst enthält, sinn d' box-sizing: border-boxÄnnerung, vun emop remEenheeten op vill Elementer, Linkstiler a vill Formelementresets.

Typographie

  • All .text-Utilities op d' _utilities.scssDatei geplënnert.
  • Gefall .page-headerwell seng Stiler iwwer Utilities applizéiert kënne ginn.
  • .dl-horizontalerofgaang ass. Amplaz benotzt .rowop <dl>a benotzt Gitterkolonneklassen (oder Mixins) op seng <dt>a <dd>Kanner.
  • Redesignéiert Blockquotes, réckelen hir Stiler vum <blockquote>Element an eng eenzeg Klass .blockquote,. Den .blockquote-reverseModifier fir Text Utilities erofgefall.
  • .list-inlineerfuerdert elo datt seng Kannerlëscht Elementer déi nei .list-inline-itemKlass op si applizéiert hunn.

Biller

  • Umbenannt .img-responsiveop .img-fluid.
  • Umbenannt .img-roundedop.rounded
  • Umbenannt .img-circleop.rounded-circle

Dëscher

  • Bal all Instanzen vum >Selektor goufen ewechgeholl, dat heescht datt nestet Dëscher elo automatesch Stiler vun hiren Elteren ierwen. Dëst vereinfacht immens eis Selektoren a potenziell Personnalisatiounen.
  • .table-condensedFir .table-smKonsistenz ëmbenannt .
  • Eng nei .table-inverseOptioun dobäigesat.
  • Zousätzlech Dësch Header Modifikateur: .thead-defaultan .thead-inverse.
  • Kontextuell Klassen ëmbenannt fir e .table--Präfix ze hunn. Dofir .active,,,, an zu ,,, an . .success_ .warning_ _ _.danger.info.table-active.table-success.table-warning.table-danger.table-info

Formen

  • Geplënnert Element zréckgesat op d' _reboot.scssDatei.
  • Umbenannt .control-labelop .col-form-label.
  • Ëmbenannt .input-lgan .input-smzu .form-control-lgan .form-control-sm, respektiv.
  • Ausgefall .form-group-*Klassen fir Simplicitéit. Benotzt .form-control-*Klassen amplaz elo.
  • Gefall .help-blockan ersat et mat .form-textfir Block-Niveau Hëllef Text. Fir Inline Hëllef Text an aner flexibel Optiounen, benotzt Utility Klassen wéi .text-muted.
  • Gefall .radio-inlinean .checkbox-inline.
  • Konsolidéiert .checkboxan .radioan .form-checkan déi verschidde .form-check-*Klassen.
  • Horizontal Formen iwwerschafft:
    • D'Klassfuerderung erofgefall .form-horizontal.
    • .form-groupgëlt net méi Stiler aus dem .rowVia Mixin, also .rowass elo fir horizontal Gitter Layouten erfuerderlech (zB <div class="form-group row">).
    • Dobäi nei .col-form-labelKlass ze vertikal Zentrum Etiketten mat .form-controls.
    • Nei bäigefüügt .form-rowfir kompakt Form Layouten mat de Gitterklassen (tauscht Är .rowfir e .form-rowa gitt).
  • Füügt personaliséiert Formulaire Ënnerstëtzung (fir Checkboxen, Radios, Wielt a Dateieinputen).
  • Ersat .has-error, .has-warning, a .has-successKlassen mat HTML5 Form Validatioun iwwer CSS's :invalida :validPseudo-Klassen.
  • Umbenannt .form-control-staticop .form-control-plaintext.

Knäppercher

  • Umbenannt .btn-defaultop .btn-secondary.
  • D' .btn-xsKlass ganz erofgefall well .btn-smass proportional vill méi kleng wéi v3's.
  • Déi statesch Knäppchen Feature vum button.jsjQuery Plugin gouf erofgelooss. Dëst beinhalt d' $().button(string)a $().button('reset')Methoden. Mir roden Iech e bëssen personaliséiert JavaScript amplaz ze benotzen, wat de Virdeel huet fir Iech genau ze behuelen wéi Dir et wëllt.
    • Bedenkt datt déi aner Features vum Plugin (Knäppchen Checkboxen, Knäppercher, Single-toggle Knäppercher) am v4 behalen goufen.
  • Ännere Knäppercher [disabled]op :disabledwéi IE9+ ënnerstëtzt :disabled. Wéi fieldset[disabled]och ëmmer ass nach ëmmer néideg well gebierteg behënnert Feldsets nach ëmmer buggy an IE11 sinn .

Knäppchen Grupp

  • Komponent mat Flexbox ëmgeschriwwen.
  • Geläscht .btn-group-justified. Als Ersatz kënnt Dir <div class="btn-group d-flex" role="group"></div>als Wrapper ronderëm Elementer mat .w-100.
  • Huelt d' .btn-group-xsKlass komplett ewechgeholl .btn-xs.
  • Ewechzehuelen explizit Abstand tëscht Knäppchen Gruppen an Knäppchen Toolbaren; benotzt Margin Utilities elo.
  • Verbessert Dokumentatioun fir Benotzung mat anere Komponenten.
  • Gewiesselt vun Elterendeelselektoren op Singular Klassen fir all Komponenten, Modifikateur, etc.
  • Vereinfacht Dropdown-Stile fir net méi mat Upward- oder Downward-Pfeile mat dem Dropdown-Menü ze verschécken.
  • Dropdowns kënnen elo mat <div>s oder <ul>s gebaut ginn.
  • Nei opgebaut Dropdown Stiler a Markup fir einfach, agebauter Ënnerstëtzung fir <a>a <button>baséiert Dropdown Artikelen ze bidden.
  • Umbenannt .dividerop .dropdown-divider.
  • Dropdown Artikelen erfuerderen elo .dropdown-item.
  • Dropdown Toggles erfuerderen net méi explizit <span class="caret"></span>; dëst gëtt elo automatesch iwwer CSS'en ::afterop .dropdown-toggle.

Gitter System

  • En neie 576pxGitterbriechpunkt bäigefüügt als sm, dat heescht datt et elo fënnef Gesamtniveauen ( xs, sm, md, lg, an xl) sinn.
  • Déi reaktiounsfäeger Gittermodifikateur Klassen ëmbenannt vun .col-{breakpoint}-{modifier}-{size}op .{modifier}-{breakpoint}-{size}fir méi einfach Gitterklassen.
  • Dropgesat Push and Pull Modifikateur Klassen fir déi nei Flexbox-ugedriwwen orderKlassen. Zum Beispill, amplaz .col-8.push-4an .col-4.pull-8, benotzt Dir .col-8.order-2an .col-4.order-1.
  • Zousätzlech Flexbox Utility Klassen fir Gittersystem a Komponenten.

Lëscht Gruppen

  • Komponent mat Flexbox ëmgeschriwwen.
  • Ersat a.list-group-itemmat enger explizit Klass, .list-group-item-action, fir Styling Link a Knäppchen Versiounen vun Lëscht Grupp Elementer.
  • Zousätzlech .list-group-flushKlass fir mat Kaarten ze benotzen.
  • Komponent mat Flexbox ëmgeschriwwen.
  • Mat der Beweegung op Flexbox ass d'Ausrichtung vun den Entloossikonen am Header méiglecherweis gebrach well mir net méi Schwammen benotzen. Floated Inhalt kënnt als éischt, awer mat Flexbox ass dat net méi de Fall. Update Är Entloossikonen fir no modal Titelen ze kommen fir ze fixéieren.
  • D' remoteOptioun (déi benotzt ka ginn fir automatesch externen Inhalt an e Modal ze lueden an ze sprëtzen) an dat entspriechend loaded.bs.modalEvent goufen ewechgeholl. Mir recommandéieren amplaz Client-Säit Schabloun oder engem Daten bindender Kader benotzen, oder ruffen jQuery.load selwer.
  • Komponent mat Flexbox ëmgeschriwwen.
  • Bal all >Selektor erofgefall fir méi einfach Styling iwwer net-nestéiert Klassen.
  • Amplaz vun HTML-spezifesche Selektorer wéi .nav > li > a, benotze mir separat Klassen fir .navs, .nav-items, an .nav-links. Dëst mécht Är HTML méi flexibel wärend Dir eng erweidert Extensibilitéit bréngt.

D'Navbar ass komplett a Flexbox nei geschriwwe ginn mat verbesserter Ënnerstëtzung fir Ausrichtung, Reaktiounsfäegkeet a Personnalisatioun.

  • Reaktiounsfäeger navbar Verhalen ginn elo op d' .navbarKlass applizéiert iwwer déi erfuerderlech, .navbar-expand-{breakpoint} wou Dir wielt wou d'Navbar zesummeklappt. Virdrun war dëst eng Manner Variabel Ännerung an erfuerderlech nei kompiléieren.
  • .navbar-defaultass elo .navbar-light, awer .navbar-darkbleift d'selwecht. Ee vun dësen ass op all Navbar erfuerderlech. Allerdéngs setzen dës Klassen net méi background-colors; amplaz beaflossen se am Wesentlechen nëmmen color.
  • Navbars verlaangen elo eng Hannergrond Deklaratioun vun iergendenger. Wielt aus eisen Hannergrond Utilities ( .bg-*) oder setzt Är eege mat de Liicht / Inverse Klassen hei uewen fir verréckt Personnalisatioun .
  • Gitt Flexbox Stiler, kënnen Navbars elo Flexbox Utilities benotzen fir einfach Ausrichtungsoptiounen.
  • .navbar-toggleass elo .navbar-toggleran huet verschidde Stiler an bannenzeg Markup (net méi dräi <span>s).
  • D' .navbar-formKlass komplett erofgefall. Et ass net méi néideg; amplaz, just benotzen .form-inlinea Spillraum Utilities wéi néideg.
  • Navbars enthalen net méi margin-bottomoder border-radiusals Standard. Benotzt Utilities wéi néideg.
  • All Beispiller mat Navbars goufen aktualiséiert fir nei Markup ze enthalen.

Paginatioun

  • Komponent mat Flexbox ëmgeschriwwen.
  • Explizit Klassen ( .page-item, .page-link) sinn elo op den Nokommen vun .paginations néideg
  • D' .pagerKomponente ganz erofgefall well et wéineg méi war wéi personaliséiert Konturknäppercher.
  • Eng explizit Klass, .breadcrumb-item, ass elo op den Nokommen vun .breadcrumbs néideg

Etiketten a Schëlder

  • Konsolidéiert .labela .badgefir aus dem Element ze disambiguéieren <label>an verbonne Komponenten ze vereinfachen.
  • Füügt .badge-pillals Modifikateur fir ofgerënnt "Pill" Look.
  • Schëlder ginn net méi automatesch an Lëschtgruppen an aner Komponenten geflunn. Utility-Klassen sinn elo dofir erfuerderlech.
  • .badge-defaultass erofgaang an .badge-secondarydobäigesat fir d'Komponentemodifikateur Klassen anzwousch anescht ze benotzen.

Panelen, Thumbnails a Wells

Gefall ganz fir déi nei Kaart Komponent.

Panneauen

  • .panelze .card, elo mat flexbox gebaut.
  • .panel-defaultgeläscht a keen Ersatz.
  • .panel-groupgeläscht a keen Ersatz. .card-groupass keen Ersatz, et ass anescht.
  • .panel-headingzu.card-header
  • .panel-titlezu .card-title. Ofhängeg vum gewënschten Look, kënnt Dir och Rubrikelementer oder Klassen benotzen (zB <h3>, .h3) oder fett Elementer oder Klassen (zB <strong>, <b>, .font-weight-bold). Notéiert datt .card-title, wärend ähnlech genannt, en anere Look produzéiert wéi .panel-title.
  • .panel-bodyzu.card-body
  • .panel-footerzu.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, a .panel-dangergoufen erofgelooss fir .bg-, .text-, an .borderUtilities generéiert vun eiser $theme-colorsSass Kaart.

Fortschrëtt

  • Ersat kontextuell .progress-bar-*Klassen mat .bg-*Utilities. Zum Beispill class="progress-bar progress-bar-danger"gëtt class="progress-bar bg-danger".
  • Ersat .activefir animéiert Fortschrëtter Baren mat .progress-bar-animated.
  • Déi ganz Komponent iwwerschafft fir den Design a Styling ze vereinfachen. Mir hunn manner Stiler fir Iech ze iwwerschreiden, nei Indikatoren an nei Symboler.
  • All CSS gouf net-nestéiert an ëmbenannt, a garantéiert datt all Klass mat Präfix ass .carousel-.
    • Fir Karussellartikelen, .next, .prev, .left, a .rightsinn elo .carousel-item-next, .carousel-item-prev, .carousel-item-left, an .carousel-item-right.
    • .itemass och elo .carousel-item.
    • Fir virun / nächst Kontrollen, .carousel-control.righta .carousel-control.leftsinn elo .carousel-control-nextan .carousel-control-prev, Bedeitung, datt se net méi eng spezifesch Basis Klass verlaangen.
  • All reaktiounsfäeger Styling geläscht, op Utilities ofgeleent (zB Ënnertitelen op bestëmmte Viewports weisen) a personaliséiert Stiler wéi néideg.
  • Ewechzehuelen Bild Iwwerschreiden fir Biller a Karussellartikelen, déi op Utilities ofgeleent ginn.
  • Tweaked de Carousel Beispill fir déi nei Markup a Stiler ze enthalen.

Dëscher

  • Ewechzehuelen Ënnerstëtzung fir stylesch nested Dëscher. All Dëschstiler ginn elo an v4 ierflecher fir méi einfach Selektiounen.
  • Inverse Tabellvariant dobäigesat.

Utilities

  • Display, verstoppt a méi:
    • Made Display Utilities reaktiounsfäeger (zB .d-nonean d-{sm,md,lg,xl}-none).
    • De Gros vun .hidden-*Utilities fir nei Display Utilities erofgefall . Zum Beispill, amplaz .hidden-sm-up, benotzen .d-sm-none. D' .hidden-printUtilities ëmbenannt fir de Display Utility Benennungsschema ze benotzen. Méi Informatioun ënner der Responsive Utilities Sektioun vun dëser Säit.
    • Dobäigesat .float-{sm,md,lg,xl}-{left,right,none}Klassen fir reaktiounsfäeger Schwämm a geläscht .pull-lefta .pull-rightwell se redundant sinn .float-leftan .float-right.
  • Typ:
    • Reaktiounsfäeger Variatiounen op eis Textausrichtungsklassen bäigefüügt .text-{sm,md,lg,xl}-{left,center,right}.
  • Ausriichtung an Abstand:
  • Clearfix aktualiséiert fir Ënnerstëtzung fir eeler Browser Versiounen ze falen.

Verkeefer Präfix mixins

Bootstrap 3 d' Verkeefer Präfix mixins, déi am v3.2.0 deprecated goufen, goufen an Bootstrap geläscht 4. Well mir Autoprefixer benotzen , si sinn net méi néideg.

Déi folgend Mëschunge geläscht : 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-durationtransition-propertytransition-timing-functiontransition-transformtranslatetranslate3duser-select

Dokumentatioun

Eis Dokumentatioun krut och en Upgrade iwwerall. Hei ass déi niddereg:

  • Mir benotzen ëmmer nach Jekyll, awer mir hunn Plugins am Mix:
    • bugify.rbgëtt benotzt fir d'Entréen op eiser Browser-Bugs Säit effizient ze lëschten.
    • example.rbass e personaliséierte Gabel vum Standard highlight.rbPlugin, wat e méi einfache Beispill-Code-Handhabung erlaabt.
    • callout.rbass eng ähnlech personaliséiert Gabel vun deem, awer entworf fir eis speziell Dokumenter Callouts.
    • jekyll-toc gëtt benotzt fir eisen Inhaltsverzeechnes ze generéieren.
  • All Dokumenter Inhalt gouf am Markdown nei geschriwwe ginn (amplaz HTML) fir méi einfach ze änneren.
  • Säite goufen nei organiséiert fir méi einfach Inhalter an eng méi accessibel Hierarchie.
  • Mir sinn vun normale CSS op SCSS geplënnert fir de Bootstrap Variabelen, Mixins a méi voll ze profitéieren.

Responsabel Utilities

All @screen-Verännerlechen goufen an v4.0.0 geläscht. Benotzt d' media-breakpoint-up(), media-breakpoint-down(), oder media-breakpoint-only()Sass Mixins oder d' $grid-breakpointsSass Kaart amplaz.

Eis reaktiounsfäeger Utility Klassen goufen gréisstendeels zugonschte vun explizit displayUtilities geläscht.

  • D' Klassen .hiddena .showgoufen geläscht well se mat jQuery's $(...).hide()a $(...).show()Methoden konflikt sinn. Amplaz, probéiert d' [hidden]Attribut ze wiesselen oder benotzt Inline Stiler wéi style="display: none;"an style="display: block;".
  • All .hidden-Klasse goufen ewechgeholl, ausser fir d'Drécker Utilities déi ëmbenannt goufen.
    • Geläscht aus 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
    • Aus v4 Alphas geläscht:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
  • Print Utilities fänken net méi mat .hidden-oder .visible-un, mee mat .d-print-.
    • Al Nimm: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Nei Klassen: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Anstatt explizit .visible-*Klassen ze benotzen, maacht Dir en Element siichtbar andeems Dir et einfach net op där Écrangréisst verstoppt. Dir kënnt eng .d-*-noneKlass mat enger .d-*-blockKlass kombinéieren fir en Element nëmmen op engem bestëmmten Intervall vun Écran Gréissten ze weisen (zB .d-none.d-md-block.d-xl-noneweist d'Element nëmmen op mëttel- a grouss Apparater).

Bedenkt datt d'Ännerunge vun de Gitterbriechpunkten am v4 bedeit datt Dir e Breakpoint méi grouss muss goen fir déiselwecht Resultater z'erreechen. Déi nei reaktiounsfäeger Utility Klassen probéieren net manner heefeg Fäll z'empfänken, wou d'Visibilitéit vun engem Element net als eenzeg kontinuéierlech Gamme vu Viewportgréissten ausgedréckt ka ginn; Dir musst amplaz personaliséiert CSS an esou Fäll benotzen.