Source

Migrearje nei v4

Bootstrap 4 is in wichtige herskriuwing fan it heule projekt. De meast opmerklike feroarings wurde hjirûnder gearfette, folge troch mear spesifike feroarings oan relevante komponinten.

Stabile feroarings

Ferpleatse fan Beta 3 nei ús stabile v4.0-release, d'r binne gjin brekende feroarings, mar d'r binne wat opmerklike feroarings.

Printsjen

  • Fêste brutsen printhelpprogramma's. Earder soe it brûken fan in .d-print-*klasse elke oare .d-*klasse ûnferwachts oerskriuwe. No komme se oerien mei ús oare display-hulpprogramma's en jilde allinich foar dy media ( @media print).

  • Utwreide beskikbere nutsfoarsjenningen foar printsjen om oerien te kommen mei oare nutsfoarsjenningen. Beta 3 en âlder hie allinnich block, inline-block, inline, en none. Stabile v4 tafoege flex, inline-flex, table, table-row, en table-cell.

  • Fêste werjefte fan printfoarbylden oer browsers mei nije printstilen dy't spesifisearje @page size.

Beta 3 feroarings

Wylst Beta 2 it grutste part fan ús brekende feroaringen seach yn 'e beta-faze, mar wy hawwe noch in pear dy't moatte wurde oanpakt yn' e Beta 3-release. Dizze wizigingen jilde as jo bywurkje nei Beta 3 fan Beta 2 of in âldere ferzje fan Bootstrap.

Diversen

  • De net brûkte $thumbnail-transitionfariabele fuortsmiten. Wy wiene neat oer te setten, dus it wie gewoan ekstra koade.
  • It npm-pakket befettet gjin oare bestannen mear as ús boarne- en dist-bestannen; as jo op har fertrouden en ús skripts útfiere fia de node_modulesmap, moatte jo jo workflow oanpasse.

Formulieren

  • Skreau sawol oanpaste as standert karfakjes en radio's. No, beide hawwe oerienkommende HTML-struktuer (bûtenste <div>mei sibling <input>en <label>) en deselde opmaakstilen (steapele standert, ynline mei modifikaasjeklasse). Hjirmei kinne wy ​​it label stylearje op basis fan 'e steat fan' e ynfier, it ferienfâldigjen fan stipe foar it disabledattribút (foarhinne in âlderklasse nedich) en ús formuliervalidaasje better stypje.

    As ûnderdiel fan dit, wy hawwe feroare de CSS foar it behearen fan meardere background-images op oanpaste foarm checkboxes en radios. Earder hie it no fuorthelle .custom-control-indicatorelemint de eftergrûnkleur, gradient en SVG-ikoan. It oanpassen fan de eftergrûngradiënt betsjutte it ferfangen fan al dy elke kear as jo mar ien moatte feroarje. No, wy hawwe .custom-control-label::beforefoar de folling en gradient en .custom-control-label::afterbehannelet it ikoan.

    Om in oanpaste kontrôle ynline te meitsjen, foegje jo ta .custom-control-inline.

  • Bywurke selector foar ynfier-basearre knop groepen. Yn stee fan [data-toggle="buttons"] { }foar styl en gedrach, wy brûke it dataattribút allinnich foar JS gedrach en fertrouwe op in nije .btn-group-toggleklasse foar styling.

  • Fuortsmiten .col-form-legendyn it foardiel fan in bytsje ferbettere .col-form-label. Dizze manier .col-form-label-smen .col-form-label-lgkin brûkt wurde op <legend>eleminten mei gemak.

  • Oanpaste triem-ynputen krigen in feroaring yn har $custom-file-textSass-fariabele. It is net langer in geneste Sass-kaart en hat no mar ien tekenrige - de Browseknop, om't dat no it ienige pseudo-elemint is generearre fan ús Sass. De Choose filetekst komt no fan 'e .custom-file-label.

Ynput groepen

  • Add-ons foar ynfiergroepen binne no spesifyk foar har pleatsing relatyf oan in ynfier. Wy hawwe sakke .input-group-addonen .input-group-btnfoar twa nije klassen, .input-group-prependen .input-group-append. Jo moatte no eksplisyt in taheaksel of in prepend brûke, wat in protte fan ús CSS ferienfâldigje. Plak jo knoppen binnen in append of prepend, sa't se earne oars bestean, mar wrap tekst yn .input-group-text.

  • Validaasjestilen wurde no stipe, lykas meardere ynputs (hoewol jo mar ien ynfier per groep kinne falidearje).

  • Klassen fan grutte moatte op 'e âlder wêze .input-groupen net de yndividuele foarmeleminten.

Beta 2 feroarings

Wylst yn beta, binne wy ​​fan doel gjin brekende feroarings te hawwen. Dingen geane lykwols net altyd lykas pland. Hjirûnder binne de brekende feroaringen om yn gedachten te hâlden by it ferpleatsen fan Beta 1 nei Beta 2.

Brekke

  • Ferwiderje $badge-colorfariabele en it gebrûk dêrfan op .badge. Wy brûke in kleur kontrast funksje foar in pick a colorbasearre op de background-color, sadat de fariabele is net nedich.
  • grayscale()Funksje omneamd gray()ta om konflikt te foarkommen mei it CSS-native grayscalefilter.
  • Omneamd .table-inverse, .thead-inverse, en .thead-defaultnei .*-darken .*-light, oerienkommende mei ús kleurskema's dy't earne oars wurde brûkt.
  • Responsive tabellen generearje no klassen foar elk grid breakpoint. Dit brekt fan Beta 1 yn dat de dy't .table-responsivejo hawwe brûkt mear liket op .table-responsive-md. Jo kinne no brûke .table-responsiveof .table-responsive-{sm,md,lg,xl}as nedich.
  • Ferfalle Bower-stipe as de pakketbehearder is ôfkard foar alternativen (bygelyks Yarn of npm). Sjoch bower / bower # 2298 foar details.
  • Bootstrap fereasket noch altyd jQuery 1.9.1 of heger, mar jo wurde advisearre om ferzje 3.x te brûken, om't de stipe browsers fan v3.x dejingen binne dy't Bootstrap stipet plus v3.x hat wat befeiligingsreparaasjes.
  • Fuortsmite de net brûkte .form-control-labelklasse. As jo ​​dien gebrûk meitsje fan dizze klasse, it wie duplikaat fan de .col-form-labelklasse dy't fertikaal centered a <label>mei syn assosjearre ynfier yn horizontale foarm opmaak.
  • Feroare de color-yiqfan in mixin dat opnaam it colorpân nei in funksje dy't jout in wearde, sadat jo brûke it foar eltse CSS eigendom. Bygelyks, ynstee fan color-yiq(#000), soene jo skriuwe color: color-yiq(#000);.

Hichtepunten

  • Yntrodusearre nij pointer-eventsgebrûk op modals. De bûtenste .modal-dialogpasses troch eveneminten mei pointer-events: nonefoar oanpaste klik ôfhanneling (meitsje it mooglik om gewoan harkje op de .modal-backdropfoar eltse klikken), en dan tsjinkomme it foar de eigentlike .modal-contentmei pointer-events: auto.

Gearfetting

Hjir binne de grutte kaartsjes wêrfan jo bewust wolle wêze as jo fan v3 nei v4 ferpleatse.

Browser stipe

  • Stipe foar IE8, IE9 en iOS 6 ferdwûn. v4 is no allinich IE10+ en iOS 7+. Foar siden dy't ien fan dy nedich binne, brûk v3.
  • Offisjele stipe tafoege foar Android v5.0 Lollipop's Browser en WebView. Eardere ferzjes fan 'e Android-blêder en WebView bliuwe allinich net-offisjeel stipe.

Globale feroarings

  • Flexbox is standert ynskeakele. Yn it algemien betsjut dit in ferhuzing fuort fan driuwers en mear oer ús komponinten.
  • Oerskeakele fan Minder nei Sass foar ús boarne CSS-bestannen.
  • Oerskeakele fan pxnei remas ús primêre CSS-ienheid, hoewol piksels noch wurde brûkt foar mediafragen en rastergedrach, om't werjefteporten fan apparaat net wurde beynfloede troch typegrutte.
  • Globale lettertypegrutte ferhege fan 14pxnei 16px.
  • Fernijde rastertiers om in fyfde opsje ta te foegjen (oanpakken fan lytsere apparaten by 576pxen ûnder) en it -xsynfix fan dy klassen fuorthelle. Foarbyld .col-6.col-sm-4.col-md-3:.
  • Ferfong it aparte opsjonele tema mei ynstelbere opsjes fia SCSS fariabelen (bgl. $enable-gradients: true).
  • Build systeem overhauled te brûken in rige fan npm skripts ynstee fan Grunt. Sjoch package.jsonfoar alle skripts, of ús projekt readme foar pleatslike ûntwikkelingsbehoeften.
  • Net-responsyf gebrûk fan Bootstrap wurdt net langer stipe.
  • De online Customizer liet falle yn it foardiel fan wiidweidigere opsetdokumintaasje en oanpaste builds.
  • Tsientallen nije nutklassen tafoege foar mienskiplike CSS-eigendomswearde-pearen en fluchtoetsen foar marzje / padding-ôfstân.

Grid systeem

  • Ferpleatst nei flexbox.
    • Stipe tafoege foar flexbox yn 'e gridmixins en foarôf definieare klassen.
    • As ûnderdiel fan flexbox, opnommen stipe foar fertikale en horizontale alignment klassen.
  • Bywurke rasterklassenammen en in nije rastertier.
    • In nije smrastertier hjirûnder tafoege 768pxfoar mear korrelige kontrôle. Wy hawwe no xs, sm, md, lg, en xl. Dit betsjut ek dat elke tier ien nivo is opknapt (dus .col-md-6yn v3 is no .col-lg-6yn v4).
    • xsrasterklassen binne wizige om de infix net te fereaskje om sekuer foar te stellen dat se stilen begjinne te tapassen op min-width: 0en net in ynstelde pikselwearde. Ynstee fan .col-xs-6, it is no .col-6. Alle oare grid tiers fereaskje de infix (bgl. sm).
  • Bywurke rastergrutte, mixins en fariabelen.
    • Rastergoaten hawwe no in Sass-kaart, sadat jo by elk brekpunt spesifike gutterbreedtes kinne opjaan.
    • Bywurke gridmixins om in prepmixin te brûken make-col-readyen in make-colom de flexen max-widthfoar yndividuele kolomgrutte yn te stellen.
    • Feroare rastersysteem media query breakpoints en container widths om rekken te hâlden mei nije raster tier en te soargjen dat kolommen lykwichtich dield binne troch 12op har maksimale breedte.
    • Grid breakpoints en container widths wurde no ôfhannele fia Sass maps ( $grid-breakpointsen $container-max-widths) ynstee fan in hânfol aparte fariabelen. Dizze ferfange de @screen-*fariabelen folslein en kinne jo de rastertiers folslein oanpasse.
    • Mediafragen binne ek feroare. Ynstee fan it werheljen fan ús media-query-deklaraasjes elke kear mei deselde wearde, hawwe wy no @include media-breakpoint-up/down/only. No, ynstee fan skriuwen @media (min-width: @screen-sm-min) { ... }, kinne jo skriuwe @include media-breakpoint-up(sm) { ... }.

Components

  • Panielen, thumbnails en putten falle foar in nij alles omfiemjend komponint, kaarten .
  • It lettertype Glyphicons-ikoan falle. As jo ​​​​ikoanen nedich binne, binne guon opsjes:
  • It Affix jQuery-plugin falle.
    • Wy riede oan om position: stickyynstee te brûken. Sjoch de HTML5 Please yngong foar details en spesifike polyfill oanbefellings. Ien suggestje is om in @supportsregel te brûken foar it útfieren dêrfan (bgl. @supports (position: sticky) { ... })/
    • As jo ​​​​Affix brûkten om ekstra, net position-stilen oan te passen, kinne de polyfills jo gebrûksgefal net stypje. Ien opsje foar sokke gebrûk is de ScrollPos-Styler- bibleteek fan tredden.
  • It pager-komponint sakke, om't it yn essinsje wat oanpaste knoppen wiene.
  • Refactored hast alle komponinten te brûken mear un-nêste klasse selectors ynstee fan over-spesifike bern selectors.

By komponint

Dizze list markearret wichtige feroarings troch komponint tusken v3.xx en v4.0.0.

Reboot

Nij foar Bootstrap 4 is de Reboot , in nij stylblêd dat bout op Normalize mei ús eigen wat eigensinnige resetstilen. Selektors dy't yn dit bestân ferskine, brûke allinich eleminten - d'r binne hjir gjin klassen. Dit isolearret ús resetstilen fan ús komponintstilen foar in mear modulêre oanpak. Guon fan 'e wichtichste resets dy't dit omfettet binne de box-sizing: border-boxferoaring, ferpleatse fan emnei remienheden op in protte eleminten, keppelingsstilen, en in protte formulierelemintresets.

Typografy

  • .text-Alle hulpprogramma's ferpleatst nei it _utilities.scssbestân.
  • Falle .page-headeras syn stilen kinne wurde tapast fia nutsbedriuwen.
  • .dl-horizontalis fallen. Brûk ynstee .rowop <dl>en brûk gridkolomklassen (of mixins) op har <dt>en <dd>bern.
  • Redesigned blockquotes, ferpleatse har stilen fan it <blockquote>elemint nei ien klasse .blockquote,. De .blockquote-reversemodifier foar teksthulpprogramma's falle.
  • .list-inlineno fereasket dat syn bern list items hawwe de nije .list-inline-itemklasse tapast op harren.

Ofbyldings

  • Omneamd .img-responsiveta .img-fluid.
  • Omneamd .img-roundedta.rounded
  • Omneamd .img-circleta.rounded-circle

Tabellen

  • Hast alle eksimplaren fan 'e >selektor binne fuortsmiten, wat betsjuttet dat nestele tabellen no automatysk stilen fan har âlden sille erve. Dit ferienfâldigt ús selektors en potensjele oanpassingen sterk.
  • Omneamd .table-condensedta .table-smfoar konsistinsje.
  • In nije .table-inverseopsje tafoege.
  • Tafoege tabel koptekst modifiers: .thead-defaulten .thead-inverse.
  • Ferneamde kontekstuele klassen om in .table--foarheaksel te hawwen. Dêrfandinne .active, .success, en oan , , , en . .warning_.danger.info.table-active.table-success.table-warning.table-danger.table-info

Formulieren

  • Ferpleatse elemint wurdt weromset nei de _reboot.scsstriem.
  • Omneamd .control-labelta .col-form-label.
  • Omneamd .input-lgen .input-smnei .form-control-lgen .form-control-sm, respektivelik.
  • Klassen falle .form-group-*foar de ienfâld. Brûk .form-control-*no klassen ynstee.
  • Falle .help-blocken ferfong it mei .form-textfoar helptekst op bloknivo. Foar inline helptekst en oare fleksibele opsjes, brûk nutklassen lykas .text-muted.
  • Fallen .radio-inlineen .checkbox-inline.
  • Konsolidearre .checkboxen .radioyn .form-checken de ferskate .form-check-*klassen.
  • Horizontale foarmen opknapt:
    • De .form-horizontalklasse eask foel.
    • .form-groupnet mear jildt stilen út de .rowfia mixin, sa .rowis no nedich foar horizontale raster opmaak (bgl. <div class="form-group row">).
    • Nije klasse tafoege .col-form-labeloan fertikaal sintrum labels mei .form-controls.
    • Nije tafoege .form-rowfoar kompakte foarmyndielingen mei de rasterklassen (ruilje jo .rowfoar in .form-rowen gean).
  • Stipe foar oanpaste formulieren tafoege (foar karfakjes, radio's, seleksjes en bestânynputs).
  • Ferfongen .has-error, .has-warning, en .has-successklassen mei HTML5-formuliervalidaasje fia CSS's :invaliden :validpseudo-klassen.
  • Omneamd .form-control-staticta .form-control-plaintext.

Knoppen

  • Omneamd .btn-defaultta .btn-secondary.
  • De .btn-xsklasse folslein sakke, om't .btn-smproporsjoneel folle lytser is as v3's.
  • De stateful knopfunksje fan it button.jsjQuery-plugin is fallen. Dit omfettet de $().button(string)en $().button('reset')metoaden. Wy advisearje ynstee in lyts bytsje oanpast JavaScript te brûken, wat it foardiel sil hawwe om krekt te gedragen sa't jo it wolle.
    • Tink derom dat de oare funksjes fan 'e plugin (knopfakjes, knopradio's, single-toggle-knoppen) binne bewarre bleaun yn v4.
  • Feroarje knoppen' [disabled]nei :disabledas IE9+ stipet :disabled. It fieldset[disabled]is lykwols noch altyd nedich om't native útskeakele fjildsets noch buggy binne yn IE11 .

Knop groep

  • Rewrote komponint mei flexbox.
  • Fuortsmite .btn-group-justified. As ferfanging kinne jo brûke <div class="btn-group d-flex" role="group"></div>as wrapper om eleminten mei .w-100.
  • Dropped de .btn-group-xsklasse hielendal jûn fuortheljen fan .btn-xs.
  • Fuortsmite eksplisite ôfstân tusken knop groepen yn knop arkbalken; brûk no marzje-nutsbedriuwen.
  • Ferbettere dokumintaasje foar gebrûk mei oare komponinten.
  • Oerskeakele fan âlder selectors nei iental klassen foar alle komponinten, modifiers, etc.
  • Fersifere dropdown-stilen om net mear te ferstjoeren mei pylken nei boppen of nei ûnderen taheakke oan it útklapmenu.
  • Dropdowns kinne wurde boud mei <div>s of <ul>s no.
  • Ferboude dropdown-stilen en markearring om maklike, ynboude stipe te leverjen foar <a>en <button>basearre dropdown-items.
  • Omneamd .dividerta .dropdown-divider.
  • Dropdown-items binne no nedich .dropdown-item.
  • Dropdown-skeakels fereaskje net langer in eksplisite <span class="caret"></span>; dit wurdt no automatysk levere fia CSS's ::afterop .dropdown-toggle.

Grid systeem

  • In nij 576pxrasterbrekpunt tafoege as sm, wat betsjut dat d'r no fiif totale lagen binne ( xs, sm, md, lg, en xl).
  • De responsive rastermodifikaasje-klassen omneamd fan .col-{breakpoint}-{modifier}-{size}nei .{modifier}-{breakpoint}-{size}foar ienfâldiger rasterklassen.
  • Dropped push and pull modifier klassen foar de nije flexbox-oandreaune orderklassen. Bygelyks, ynstee fan .col-8.push-4en .col-4.pull-8, soene jo .col-8.order-2en brûke .col-4.order-1.
  • Flexbox-nutsklassen tafoege foar rastersysteem en komponinten.

List groepen

  • Rewrote komponint mei flexbox.
  • Ferfongen a.list-group-itemmei in eksplisite klasse, .list-group-item-action, foar styling keppeling en knop ferzjes fan list groep items.
  • .list-group-flushKlasse tafoege foar gebrûk mei kaarten.
  • Rewrote komponint mei flexbox.
  • Sjoen ferhuzing nei flexbox, is de ôfstimming fan ûntslach-ikoanen yn 'e koptekst wierskynlik brutsen, om't wy gjin driuwers mear brûke. Floated ynhâld komt foarop, mar mei flexbox is dat net mear it gefal. Update jo ûntslach-ikoanen om nei modale titels te kommen om te reparearjen.
  • De remoteopsje (dy't koe wurde brûkt om automatysk laden en ynjeksje fan eksterne ynhâld yn in modal) en it oerienkommende loaded.bs.modalevenemint waarden fuortsmiten. Wy riede ynstee in gebrûk client-side sjabloanen of in gegevens binende ramt, of calling jQuery.load sels.
  • Rewrote komponint mei flexbox.
  • Hast alle >selektors sakke foar ienfâldiger styling fia un-neste klassen.
  • Ynstee fan HTML-spesifike selectors lykas .nav > li > a, brûke wy aparte klassen foar .navs, .nav-items en .nav-links. Dit makket jo HTML fleksibeler, wylst jo ferhege útwreidzjen bringe.

De navbar is folslein opnij skreaun yn flexbox mei ferbettere stipe foar ôfstimming, responsiviteit en oanpassing.

  • Responsive navbargedrach wurdt no tapast op 'e .navbarklasse fia de fereaske .navbar-expand-{breakpoint} wêr't jo kieze wêr't de navbar ynstoart. Earder wie dit in Minder fariabele modifikaasje en fereaske opnij kompilearjen.
  • .navbar-defaultis no .navbar-light, hoewol .navbar-darkbliuwt itselde. Ien fan dizze is fereaske op elke navbar. Lykwols, dizze klassen net mear set background-colors; ynstee hawwe se yn essinsje allinich ynfloed color.
  • Navbars fereaskje no in eftergrûnferklearring fan wat soarte. Kies út ús eftergrûnhulpprogramma's ( .bg-*) of set jo eigen yn mei de ljocht-/omkearklassen hjirboppe foar gekke oanpassing .
  • Sjoen flexbox-stilen kinne navbars no flexbox-hulpprogramma's brûke foar maklike ôfstimmingsopsjes.
  • .navbar-toggleis no .navbar-toggleren hat ferskillende stilen en ynderlike markup (net mear trije <span>s).
  • De .navbar-formklasse hielendal falle. It hoecht net mear; ynstee, gewoan brûke .form-inlineen tapasse marzje nutsbedriuwen as nedich.
  • Navbars net mear befetsje margin-bottomof border-radiusstandert. Brûk nutsbedriuwen as nedich.
  • Alle foarbylden mei navbars binne bywurke om nije markearring op te nimmen.

Paginaasje

  • Rewrote komponint mei flexbox.
  • Eksplisite klassen ( .page-item, .page-link) binne no ferplichte op 'e neiteam fan .paginations
  • It .pagerkomponint folslein falle, om't it net folle mear wie dan oanpaste omtrekknoppen.
  • In eksplisite klasse, .breadcrumb-item, is no ferplichte op 'e neiteam fan .breadcrumbs

Labels en badges

  • Konsolidearre .labelen .badgedisambiguate út it <label>elemint en ferienfâldigje besibbe komponinten.
  • Tafoege .badge-pillas modifier foar rûne "pil" look.
  • Badges wurde net mear automatysk float yn listgroepen en oare komponinten. Der binne no gebrûksklassen foar nedich.
  • .badge-defaultis fallen en .badge-secondarytafoege om te oerienkomme mei klassen fan komponintmodifikaasje dy't op oare plakken brûkt wurde.

Panelen, thumbnails en putten

Falle hielendal foar de nije kaart komponint.

Panels

  • .paneloan .card, no boud mei flexbox.
  • .panel-defaultfuorthelle en gjin ferfanging.
  • .panel-groupfuorthelle en gjin ferfanging. .card-groupis gjin ferfanging, it is oars.
  • .panel-headingnei.card-header
  • .panel-titleoan .card-title. Ofhinklik fan it winske uterlik, kinne jo ek kopteksteleminten of klassen brûke (bygelyks <h3>, .h3) of fet eleminten of klassen (bygelyks <strong>, <b>, .font-weight-bold). Tink derom dat .card-title, hoewol deselde namme, in oar uterlik produseart dan .panel-title.
  • .panel-bodynei.card-body
  • .panel-footernei.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, en .panel-dangerbinne fallen foar .bg-, .text-, en .bordernutsbedriuwen oanmakke fan ús $theme-colorsSass-kaart.

Foarútgong

  • Ferfongen kontekstuele .progress-bar-*klassen mei .bg-*nutsbedriuwen. Bygelyks, class="progress-bar progress-bar-danger"wurdt class="progress-bar bg-danger".
  • Ferfongen .activefoar animearre foarútgongsbalken mei .progress-bar-animated.
  • De hiele komponint oerbrocht om ûntwerp en styling te ferienfâldigjen. Wy hawwe minder stilen foar jo om te oerskriuwen, nije yndikatoaren en nije ikoanen.
  • Alle CSS is net-nêst en omneamd, sadat elke klasse foarôfgeand is mei .carousel-.
    • Foar carousel items, .next, .prev, .left, en .rightbinne no .carousel-item-next, .carousel-item-prev, .carousel-item-left, en .carousel-item-right.
    • .itemis no ek .carousel-item.
    • Foar prev / folgjende kontrôles, .carousel-control.righten .carousel-control.leftbinne no .carousel-control-nexten .carousel-control-prev, betsjut dat se net mear nedich in spesifike basis klasse.
  • Fuortsmite alle responsive styling, útsteld nei nutsfoarsjennings (bgl. ûndertiteling sjen litte op bepaalde viewports) en oanpaste stilen as nedich.
  • Fuortsmite ôfbylding oerskriuwen foar ôfbyldings yn carrousel items, útstellen nei nutsbedriuwen.
  • Tweaked it Carousel-foarbyld om de nije markup en stilen op te nimmen.

Tabellen

  • Stipe fuortsmiten foar ynstelde nestele tabellen. Alle tabelstilen binne no erfd yn v4 foar ienfâldiger selektors.
  • Added inverse tabel fariant.

Utilities

  • Werjaan, ferburgen, en mear:
    • Makke display nutsbedriuwen responsive (bygelyks, .d-noneen d-{sm,md,lg,xl}-none).
    • It grutste part fan .hidden-*nutsbedriuwen sakke foar nije display-hulpprogramma's . Bygelyks, ynstee fan .hidden-sm-up, brûke .d-sm-none. De .hidden-printnutsfoarsjenningen omneame om it nammeskema foar werjaanprogramma's te brûken. Mear ynfo ûnder de seksje Responsive utilities fan dizze side.
    • Tafoege .float-{sm,md,lg,xl}-{left,right,none}klassen foar responsive driuwers en fuortsmiten .pull-leften .pull-rightsûnt se binne oerstallich oan .float-leften .float-right.
  • Type:
    • Responsive fariaasjes tafoege oan ús tekstôfstimmingsklassen .text-{sm,md,lg,xl}-{left,center,right}.
  • Alignaasje en ôfstân:
  • Clearfix bywurke om stipe foar âldere browserferzjes te fallen.

Ferkeaper prefix mixins

Bootstrap 3's ferkeaper prefix mixins, dy't waarden ôfret yn v3.2.0, binne fuortsmiten yn Bootstrap 4. Sûnt wy brûke Autoprefixer , se binne net mear nedich.

De folgjende mixins fuortsmiten : 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-functiontransition-transformtranslatetranslate3duser-select

Dokumintaasje

Us dokumintaasje krige ek in upgrade oer de hiele breedte. Hjir is de leechste:

  • Wy brûke noch Jekyll, mar wy hawwe plugins yn 'e miks:
    • bugify.rbwurdt brûkt om effisjint list út de ynstjoerings op ús browser bugs side.
    • example.rbis in oanpaste foarke fan 'e standert highlight.rbplugin, wêrtroch makliker foarbyld-koade-ôfhanneling mooglik is.
    • callout.rbis in ferlykbere oanpaste foarke fan dat, mar ûntwurpen foar ús spesjale docs callouts.
    • jekyll-toc wurdt brûkt om ús ynhâldsopjefte te generearjen.
  • Alle dokumintenynhâld is opnij skreaun yn Markdown (ynstee fan HTML) foar makliker bewurkjen.
  • Siden binne reorganisearre foar ienfâldiger ynhâld en in mear benaderbere hiërargy.
  • Wy ferhuze fan gewoane CSS nei SCSS om folslein te profitearjen fan Bootstrap's fariabelen, mixins, en mear.

Responsive utilities

Alle @screen-fariabelen binne fuortsmiten yn v4.0.0. Brûk ynstee de media-breakpoint-up(), media-breakpoint-down(), of media-breakpoint-only()Sass-mixins as de $grid-breakpointsSass-kaart.

Us responsive nutsklassen binne foar it grutste part fuorthelle yn it foardiel fan eksplisite displaynutsbedriuwen.

  • De .hiddenen .showklassen binne fuortsmiten omdat se yn konflikt mei jQuery's $(...).hide()en $(...).show()metoaden. Besykje ynstee it [hidden]attribút te wikseljen of brûk ynline-stilen lykas style="display: none;"en style="display: block;".
  • Alle .hidden-klassen binne fuortsmiten, útsein foar de printhelpprogramma's dy't omneamd binne.
    • Fuortsmite fan 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
    • Fuortsmite fan 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
  • Printhelpprogramma's begjinne net mear mei .hidden-of .visible-, mar mei .d-print-.
    • Alde nammen: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Nije klassen: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Yn stee fan eksplisite .visible-*klassen te brûken, meitsje jo in elemint sichtber troch it gewoan net te ferbergjen op dy skermgrutte. Jo kinne ien klasse kombinearje .d-*-nonemei ien .d-*-blockklasse om in elemint allinich te sjen op in opjûne ynterval fan skermgrutte (bgl .d-none.d-md-block.d-xl-none. toant it elemint allinich op middelgrutte en grutte apparaten).

Tink derom dat de wizigingen oan 'e rasterbrekkingspunten yn v4 betsjutte dat jo ien brekpunt grutter moatte gean om deselde resultaten te berikken. De nije responsive nutklassen besykje net minder foarkommende gefallen te foldwaan wêr't de sichtberens fan in elemint net kin wurde útdrukt as ien oanienwei berik fan viewportgrutte; jo moatte ynstee oanpaste CSS brûke yn sokke gefallen.