Source

Migrazione à v4

Bootstrap 4 hè una riscrittura maiò di tuttu u prughjettu. I cambiamenti più notevuli sò riassunti quì sottu, seguiti da cambiamenti più specifichi à i cumpunenti pertinenti.

Cambiamenti stabile

Trascendendu da Beta 3 à a nostra liberazione stabile v4.0, ùn ci sò micca cambiamenti rotulanti, ma ci sò qualchi cambiamenti notevuli.

Stampa

  • Fixed utilità di stampa rotte. In precedenza, l'usu di una .d-print-*classe annullava inaspettatamente qualsiasi altra .d-*classe. Avà, currispondenu à i nostri altri utilità di visualizazione è si applicanu solu à quellu media ( @media print).

  • Utilità di visualizazione di stampa dispunibuli ampliate per currisponde à altre utilità. Beta 3 è più vechji avianu solu block, inline-block, inline, è none. Stable v4 aghjuntu flex, inline-flex, table, table-row, è table-cell.

  • Fixed u rendering di vista di stampa in i navigatori cù novi stili di stampa chì specificanu @page size.

Beta 3 cambia

Mentre a Beta 2 hà vistu a maiò parte di i nostri cambiamenti di rottura durante a fase beta, ma avemu sempre uni pochi chì avianu bisognu à esse indirizzati in a versione Beta 3. Questi cambiamenti s'applicanu se aghjurnà à Beta 3 da Beta 2 o qualsiasi versione più vechja di Bootstrap.

Miscellaneous

  • Eliminatu a $thumbnail-transitionvariabile inutilizata. Ùn avemu micca trasfurmatu nunda, cusì era solu codice extra.
  • U pacchettu npm ùn include più alcunu fugliali altru ch'è i nostri fugliali fonte è dist ; s'è vo avete invintatu nantu à elli è eseguite i nostri script via u node_modulescartulare, duvete adattà u vostru flussu di travagliu.

Forme

  • Riscritte e caselle di spunta è e radiu persunalizate è predeterminate. Avà, tutti dui anu una struttura HTML currispondente (esternu <div>cù fratellu <input>è <label>) è i stessi stili di layout (stacked default, inline with modificateur class). Questu ci permette di stilà l'etichetta basatu annantu à u statu di l'input, simplificà u supportu per l' disabledattributu (previamente esigene una classa parent) è sustene megliu a nostra validazione di forma.

    Comu parte di questu, avemu cambiatu u CSS per a gestione di parechje background-images nantu à caselle di cuntrollu di forma persunalizata è radio. Nanzu, l'elementu avà eliminatu .custom-control-indicatoravia u culore di fondo, u gradiente è l'icona SVG. Personalizà u gradiente di fondo significava rimpiazzà tutti quelli ogni volta chì avete bisognu di cambià solu unu. Avà, avemu .custom-control-label::beforeper u riempimentu è u gradiente è .custom-control-label::aftergestisce l'icona.

    Per fà un cuntrollu persunalizatu in linea, aghjunghje .custom-control-inline.

  • Selettore aghjurnatu per i gruppi di buttone basati in input. Invece di [data-toggle="buttons"] { }stile è cumpurtamentu, usemu l' dataattributu solu per i cumpurtamenti JS è s'appoghjanu in una nova .btn-group-toggleclassa per u stilu.

  • Eliminatu .col-form-legendin favore di un ligeramente migliuratu .col-form-label. Questu modu .col-form-label-smè .col-form-label-lgpò esse usatu in <legend>elementi cun facilità.

  • L'inputs di fugliali persunalizati anu ricevutu un cambiamentu à a so $custom-file-textvariabile Sass. Ùn hè più una mappa Sass nidificata è avà alimenta solu una stringa - u Browsebuttone chì hè avà l'unicu pseudoelementu generatu da u nostru Sass. U Choose filetestu vene avà da u .custom-file-label.

Gruppi di input

  • Addons di u gruppu di input sò avà specifichi à a so piazzamentu relative à un input. Avemu abbandunatu .input-group-addonè .input-group-btnper duie classi novi, .input-group-prependè .input-group-append. Duvete aduprà esplicitamente un append o un prepend avà, simplificendu assai di u nostru CSS. Dentru un append o prepend, mette i vostri buttoni cum'è esistenu in ogni altru locu, ma imbulighjate u testu in .input-group-text.

  • I stili di validazione sò avà supportati, cum'è parechji inputs (ancu se pudete cunvalidà solu un input per gruppu).

  • E classi di dimensionamentu deve esse nantu à i genitori .input-groupè micca l'elementi di forma individuale.

Beta 2 cambia

Mentre in a beta, avemu u scopu di ùn avè micca cambiamenti rotulanti. Tuttavia, e cose ùn viaghjanu micca sempre cum'è previstu. Quì sottu sò i cambiamenti di ruttura da tene à mente quandu si move da Beta 1 à Beta 2.

Rupture

  • Variabile eliminata $badge-colorè u so usu in .badge. Utilizemu una funzione di cuntrastu di culore per sceglie una colorbasata nantu à u background-color, cusì a variàbile ùn hè micca necessariu.
  • Funzione rinominata grayscale()per gray()evità di rompe u cunflittu cù u grayscalefiltru nativu CSS.
  • Rinominatu .table-inverse, .thead-inverse, è .thead-defaultà .*-darkè .*-light, currisponde à i nostri schemi di culori usati in altrò.
  • E tabelle responsive ora generanu classi per ogni breakpoint di griglia. Questu rompe da a Beta 1 in quantu .table-responsivechì avete usatu hè più cum'è .table-responsive-md. Pudete avà aduprà .table-responsiveo .table-responsive-{sm,md,lg,xl}cum'è necessariu.
  • U supportu di Bower abbandunatu cum'è u gestore di pacchetti hè statu deprecatu per l'alternative (per esempiu, Yarn o npm). Vede bower/bower # 2298 per i dettagli.
  • Bootstrap hà sempre bisognu di jQuery 1.9.1 o più altu, ma hè cunsigliatu di utilizà a versione 3.x postu chì i navigatori supportati di v3.x sò quelli chì Bootstrap supporta più v3.x hà alcune correzioni di sicurezza.
  • .form-control-labelEliminatu a classe inutilizata . Se avete fattu usu di sta classa, era duplicata di a .col-form-labelclassa chì centrava verticalmente a <label>cù l'input assuciatu in forma horizontale.
  • Cambiatu color-yiqda un mixin chì includeva a colorpruprietà à una funzione chì torna un valore, chì vi permette di usà per qualsiasi pruprietà CSS. Per esempiu, invece di color-yiq(#000), scriverete color: color-yiq(#000);.

Highlights

  • Introduce un novu pointer-eventsusu nantu à i modali. L'esternu .modal-dialogpassa per l'avvenimenti pointer-events: noneper a gestione di clics persunalizati (facendu pussibule à sente solu .modal-backdropper ogni clic), è poi contru à l'attuale .modal-contentcù pointer-events: auto.

Riassuntu

Eccu i grandi articuli di u bigliettu chì vulete sapè quandu si move da v3 à v4.

Supportu di u navigatore

  • Dropped IE8, IE9, è iOS 6 sustegnu. v4 hè avà solu IE10+ è iOS 7+. Per i siti chì necessitanu unu di quelli, utilizate v3.
  • Aggiuntu supportu ufficiale per u navigatore Android v5.0 Lollipop è WebView. E versioni precedenti di u navigatore Android è WebView restanu solu supportati in modu non ufficiale.

Cambiamenti globale

  • Flexbox hè attivatu per automaticamente. In generale, questu significa un alluntanamentu da i float è più in i nostri cumpunenti.
  • Passatu da Less à Sass per i nostri fugliali CSS fonte.
  • Cambiatu da pxa remnostra unità CSS primaria, anche se i pixel sò sempre aduprati per e dumande di media è u cumpurtamentu di a griglia, postu chì i vetri di u dispositivu ùn sò micca affettati da a dimensione di u tipu.
  • A dimensione di font globale hè aumentata da 14pxa 16px.
  • I livelli di griglia rinnuvati per aghjunghje una quinta opzione (indirizzendu i dispositi più chjuchi à 576pxè sottu) è sguassate l' -xsinfix da queste classi. Esempiu: .col-6.col-sm-4.col-md-3.
  • Sustituitu u tema opzionale separatu cù opzioni configurabili via variabili SCSS (per esempiu, $enable-gradients: true).
  • Sistema di custruzzione rivisionatu per utilizà una seria di script npm invece di Grunt. Vede package.jsonper tutti i scripts, o u nostru prughjettu readme per i bisogni di sviluppu lucale.
  • L'usu non-responsive di Bootstrap ùn hè più supportatu.
  • Abbandunatu u Customizer in linea in favore di una documentazione di configurazione più larga è di custruzzioni persunalizati.
  • Aghjunghjite decine di novi classi di utilità per coppie di proprietà-valore CSS cumuni è scorciatoie di spaziatura di margine / padding.

Sistema di griglia

  • Spostatu in flexbox.
    • Aggiuntu supportu per flexbox in i mixin di griglia è classi predefiniti.
    • Cum'è parte di flexbox, includeu supportu per classi di allineamentu verticale è horizontale.
  • I nomi di classi di griglia aghjurnati è un novu livellu di griglia.
    • Aggiuntu un novu smlivellu di griglia sottu 768pxper un cuntrollu più granulare. Avemu avà xs, sm, md, lgè xl. Questu significa ancu chì ogni livellu hè statu rializatu un livellu (quindi .col-md-6in v3 hè avà .col-lg-6in v4).
    • xsE classi di griglia sò state mudificate per ùn esse micca bisognu di l'infix per rapprisintà più accuratamente chì cumincianu à applicà stili min-width: 0è micca un valore di pixel stabilitu. Invece di .col-xs-6, hè avà .col-6. Tutti l'altri livelli di griglia necessitanu l'infissu (per esempiu, sm).
  • Dimensioni di griglia aghjurnata, mixin è variabili.
    • Les gouttières de grille ont désormais une carte Sass pour que vous puissiez spécifier des largeurs de gouttières spécifiques à chaque point d'arrêt.
    • Mischini di griglia aghjurnati per utilizà un make-col-readymixin di preparazione è un make-colper stabilisce a dimensione di flexe max-widthcolonne individuali.
    • Cambiate i punti di interruzzione di e dumande di media di u sistema di griglia è a larghezza di u containeru per cuntà u novu livellu di griglia è assicura chì e colonne sò divisibili uniformemente da 12a so larghezza massima.
    • I punti di rottura di a griglia è a larghezza di u containeru sò avà gestiti via Sass maps ( $grid-breakpointsè $container-max-widths) invece di una manciata di variabili separati. Quessi rimpiazzanu @screen-*sanu e variàbili è permettenu di persunalizà cumplettamente i livelli di griglia.
    • E dumande di media sò ancu cambiate. Invece di ripetiri e nostre dichjarazioni di media query cù u listessu valore ogni volta, avemu avà @include media-breakpoint-up/down/only. Avà, invece di scrive @media (min-width: @screen-sm-min) { ... }, pudete scrive @include media-breakpoint-up(sm) { ... }.

Cumpunenti

  • Pannelli caduti, miniature, è pozzi per un novu cumpunente cumpletu, carte .
  • Abbandunatu u font di l'icona Glyphicons. Sè avete bisognu di icone, alcune opzioni sò:
  • Abbandunatu u plugin Affix jQuery.
    • Avemu cunsigliatu per aduprà position: stickyinvece. Vede l'HTML5 Per piacè l'entrata per i dettagli è cunsiglii specifichi di polyfill. Un suggerimentu hè di utilizà una @supportsregula per l'implementazione (per esempiu, @supports (position: sticky) { ... })/
    • Sè avete usatu Affix per applicà positionstili supplementari, micca, i polyfills puderanu micca sustene u vostru casu d'usu. Una opzione per tali usi hè a libreria ScrollPos-Styler di terzu .
  • Abbandunatu u cumpunente di paginatore perchè era essenzialmente buttoni ligeramente persunalizati.
  • Refactored quasi tutti i cumpunenti per utilizà più selettori di classi senza nidificazione invece di selettori di zitelli eccessivamente specifichi.

Per cumpunenti

Questa lista mette in risaltu i cambiamenti chjave per cumpunenti trà v3.xx è v4.0.0.

Reboot

Novu à Bootstrap 4 hè u Reboot , una nova foglia di stile chì si basa nantu à Normalize cù i nostri stili di reset un pocu opinione. I selettori chì appariscenu in questu schedariu usanu solu elementi - ùn ci sò micca classi quì. Questu isola i nostri stili di reset da i nostri stili di cumpunenti per un approcciu più modulare. Unipochi di i resets più impurtanti chì includenu sò u box-sizing: border-boxcambiamentu, passanu da ema remunità nantu à parechji elementi, stili di ligame, è parechji resets di elementi di forma.

Tipografia

  • Sposta tutte e .text-utilità à u _utilities.scssschedariu.
  • Abbandunatu .page-headercum'è, fora di u cunfini, tutti i so stili ponu esse appiicati via utilità.
  • .dl-horizontalhè stata abbandunata. Invece, aduprate .rowè <dl>aduprate classi di colonna di griglia (o mixins) nantu à i so <dt>è <dd>i zitelli.
  • U stilu persunalizatu <blockquote>hè cambiatu à e classi .blockquoteè u .blockquote-reversemodificatore.
  • .list-inlineavà esige chì i so elementi di a lista di i zitelli anu a nova .list-inline-itemclasse applicata à elli.

Images

  • Rinominatu .img-responsiveà .img-fluid.
  • Rinominatu .img-roundedà.rounded
  • Rinominatu .img-circleà.rounded-circle

Tavule

  • Quasi tutte e istanze di u >selettore sò state sguassate, vale à dì chì e tavule nidificate erediteranu automaticamente stili da i so genitori. Questu simplifica assai i nostri selettori è e pussibuli persunalizazioni.
  • I tavulini responsivi ùn anu più bisognu di un elementu di imballaggio. Invece, basta mette u .table-responsivedirittu nantu à u <table>.
  • Rinominatu .table-condensedper .table-sma coerenza.
  • Aggiunta una nova .table-inverseopzione.
  • Aggiunti modificatori di l'intestazione di a tavola: .thead-defaultè .thead-inverse.
  • Classi contestuale rinominate per avè un .table--prefissu. Dunque .active, .success, .warning, .dangerè .infoà .table-active, .table-success, .table-warning, .table-dangerè .table-info.

Forme

  • L'elementu spustatu resetta à u _reboot.scssschedariu.
  • Rinominatu .control-labelà .col-form-label.
  • Rinominatu .input-lgè .input-smà .form-control-lgè .form-control-sm, rispettivamente.
  • Abbandunate .form-group-*i corsi per simplicità. Aduprate .form-control-*classi invece avà.
  • Abbandunatu .help-blockè rimpiazzatu cù .form-textu testu d'aiutu à livellu di bloccu. Per u testu d'aiutu in linea è altre opzioni flessibili, utilizate classi di utilità cum'è .text-muted.
  • Abbandunatu .radio-inlineè .checkbox-inline.
  • Cunsolidatu .checkboxè .radioin .form-checke diverse .form-check-*classi.
  • Forme orizzontali rivisitate:
    • Abbandunatu u .form-horizontalrequisitu di a classe.
    • .form-groupùn applica più stili da .rowvia mixin, cusì .rowhè avà necessariu per i layout di griglia horizontale (per esempiu, <div class="form-group row">).
    • Aggiunta una nova .col-form-labelclasse à l'etichette centru verticalmente cù .form-controls.
    • Aggiuntu novu .form-rowper layout di forma compacta cù e classi di griglia (scambià u vostru .rowper a .form-rowè vai).
  • Aghjunghje un supportu di forme persunalizati (per caselle di spunta, radiu, selezzione è input di file).
  • Sustituitu .has-error, .has-warning, è .has-successclassi cù validazione di forma HTML5 via CSS :invalidè :validpseudo-classi.
  • Rinominatu .form-control-staticà .form-control-plaintext.

Bottoni

  • Rinominatu .btn-defaultà .btn-secondary.
  • Abbandunatu a .btn-xsclasse sanu cum'è .btn-smproporzionalmente assai più chjuca di v3.
  • A funzione di u buttone statefulbutton.js di u plugin jQuery hè stata abbandunata. Stu include i metudi $().button(string)è . $().button('reset')Avemu cunsigliatu per utilizà un pocu di JavaScript persunalizatu invece, chì avarà u benefiziu di cumportà esattamente cumu vulete.
    • Nota chì l'altri funziunalità di u plugin (button checkboxes, button radios, single-toggle buttons) sò stati ritenuti in v4.
  • Cambia i buttoni ' [disabled]a :disabledcum'è IE9+ supporta :disabled. Tuttavia fieldset[disabled], hè sempre necessariu perchè i set di campi nativi disabilitati sò sempre buggy in IE11 .

Gruppu di buttone

  • Riscrivite u cumpunente cù flexbox.
  • Eliminatu .btn-group-justified. Cum'è un sustitutu, pudete aduprà <div class="btn-group d-flex" role="group"></div>cum'è un involucro intornu à elementi cù .w-100.
  • Abbandunatu a .btn-group-xsclasse interamente datu a rimozione di .btn-xs.
  • Eliminatu u spaziu esplicitu trà i gruppi di buttone in i toolbars di buttone; aduprà utilità di marghjini avà.
  • Documentazione mejorata per l'usu cù altri cumpunenti.
  • Cambiatu da selettori parenti à classi singulari per tutti i cumpunenti, modificatori, etc.
  • Stili di dropdown simplificati per ùn esse più spedite cù frecce rivolte in su o in giù attaccate à u menu dropdown.
  • Dropdowns ponu esse custruitu cù <div>s o <ul>s avà.
  • Stili di dropdown è marcatu ricustruiti per furnisce un supportu faciule è integratu per <a>l' <button>articuli dropdown basati.
  • Rinominatu .dividerà .dropdown-divider.
  • L'articuli dropdown necessitanu avà .dropdown-item.
  • I toggles dropdown ùn necessitanu più un esplicitu <span class="caret"></span>; questu hè avà furnitu automaticamente via CSS ::afterin .dropdown-toggle.

Sistema di griglia

  • Aggiuntu un novu 576pxpuntu di rottura di griglia cum'è sm, chì significa chì ci sò avà cinque livelli totali ( xs, sm, md, lgè xl).
  • Rinominate e classi di modificatori di griglia responsive da .col-{breakpoint}-{modifier}-{size}à .{modifier}-{breakpoint}-{size}per classi di griglia più simplici.
  • Abbandunate e classi di modificatore push and pull per e novi classi alimentate da flexbox order. Per esempiu, invece di .col-8.push-4è .col-4.pull-8, avete aduprà .col-8.order-2è .col-4.order-1.
  • Aghjunghjite classi di utilità flexbox per u sistema di griglia è i cumpunenti.

Lista gruppi

  • Riscrivite u cumpunente cù flexbox.
  • Sustituitu a.list-group-itemcù una classa esplicita, .list-group-item-action, per u ligame di stile è e versioni di buttone di l'articuli di u gruppu di lista.
  • Classe .list-group-flushaghjunta per aduprà cù carte.
  • Riscrivite u cumpunente cù flexbox.
  • Data u muvimentu in flexbox, l'allineamentu di l'icone di dismissu in l'intestazione hè prubabilmente rottu postu chì ùn usemu più i floats. U cuntenutu flottante vene prima, ma cù flexbox ùn hè più u casu. Aghjurnate e vostre icone di licenzià per vene dopu à i tituli modali per risolve.
  • L' remoteopzione (chì puderia esse aduprata per carica automaticamente è inject u cuntenutu esternu in un modale) è l' loaded.bs.modalavvenimentu currispundenti sò stati eliminati. Hè ricumandemu invece d'utilizà un mudellu di clientela o un framework di ubligatoriu di dati, o chjamà jQuery.load sè stessu.
  • Riscrivite u cumpunente cù flexbox.
  • Abbandunatu quasi tutti i >selettori per un stilu più simplice via classi senza nidificazione.
  • Invece di selettori specifichi HTML cum'è .nav > li > a, usemu classi separati per .navs, .nav-items, è .nav-links. Questu rende u vostru HTML più flexible mentre portanu una estensibilità aumentata.

A barra di navigazione hè stata completamente riscritta in flexbox cù un supportu migliuratu per l'allineamentu, a reattività è a persunalizazione.

  • I cumpurtamenti di navbar responsive sò avà appiicati à a .navbarclassa via u necessariu .navbar-expand-{breakpoint} induve sceglite induve colapsà a navbar. In precedenza, questa era una mudificazione Meno variabile è necessaria una ricompilazione.
  • .navbar-defaulthè avà .navbar-light, ma .navbar-darkresta u listessu. Unu di questi hè necessariu nantu à ogni navbar. Tuttavia, sti classi ùn ponenu più background-colors; invece esse essenzialmente affettanu solu color.
  • I Navbars necessitanu avà una dichjarazione di fondo di qualchì tipu. Sceglite trà e nostre utilità di fondo ( .bg-*) o fate u vostru propiu cù e classi luminose / inverse sopra per una persunalizazione folle .
  • Dati stili di flexbox, i navbars ponu avà aduprà utilità flexbox per l'opzioni di allineamentu facili.
  • .navbar-togglehè avà .navbar-togglerè hà stili diffirenti è marcatura interna (micca più di trè <span>s).
  • Abbandunatu a .navbar-formclasse sanu. Ùn hè più necessariu; invece, basta aduprate .form-inlineè applicà l'utilità di marghjini quantu necessariu.
  • Navbars ùn includenu più margin-bottomo border-radiusper difettu. Aduprate utilità quantu necessariu.
  • Tutti l'esempii cù navbars sò stati aghjurnati per include un novu marcatu.

Paginazione

  • Riscrivite u cumpunente cù flexbox.
  • E classi esplicite ( .page-item, .page-link) sò avà richieste nantu à i discendenti di .paginations
  • Abbandunatu u .pagercumpunente interamente perchè era pocu più cà i buttoni di cuntorni persunalizati.
  • Una classa esplicita, .breadcrumb-item, hè avà dumandata à i discendenti di .breadcrumbs

Etichette e badge

  • Rinominatu .labelà .badgeper disambiguate da l' <label>elementu.
  • Abbandunatu u .badgecumpunente perchè era quasi identica à l'etichette. Aduprate u .badge-pillmodificatore inseme cù u cumpunente di l'etichetta invece per quellu aspettu arrotondatu.
  • I badge ùn sò più flottati automaticamente in gruppi di lista è altri cumpunenti. E classi di utilità sò avà richieste per quessa.
  • .badge-defaulthè stata abbandunata è .badge-secondaryaghjunta per currisponde à e classi di modificatori di cumpunenti utilizati in altrò.

Pannelli, miniature è pozzi

Abbassatu interamente per u novu cumpunente di carta.

Pannelli

  • .panelà .card, avà custruitu cù flexbox.
  • .panel-defaultsguassatu è micca rimpiazzatu.
  • .panel-groupsguassatu è micca rimpiazzatu. .card-groupùn hè micca un sustitutu, hè diversu.
  • .panel-headingà.card-header
  • .panel-titleà .card-title. Sicondu l'aspettu desideratu, pudete ancu vulete usà elementi di intestazioni o classi (per esempiu <h3>, .h3) o elementi o classi in grassu (per esempiu <strong>, <b>, .font-weight-bold). Nota chì .card-title, mentri u listessu nome, pruduce un aspettu sfarente di .panel-title.
  • .panel-bodyà.card-body
  • .panel-footerà.card-footer
  • .panel-primary, .panel-success, .panel-info, .panel-warning, è .panel-dangersò stati abbandunati per .bg-, .text-, è .borderutilità generati da a nostra $theme-colorsmappa Sass.

Prugressu

  • .progress-bar-*E classi contextuale rimpiazzate cù .bg-*utilità. Per esempiu, class="progress-bar progress-bar-danger"diventa class="progress-bar bg-danger".
  • Sustituitu .activeper e barre di prugressu animate cù .progress-bar-animated.
  • Revisionatu tuttu u cumpunente per simplificà u disignu è u stilu. Avemu menu stili per voi per annullà, novi indicatori è novi icone.
  • Tuttu u CSS hè statu annullatu è rinominatu, assicurendu chì ogni classa hè prefissata cù .carousel-.
    • Per l'articuli di carrusel, .next, .prev, .left, è .rightsò avà .carousel-item-next, .carousel-item-prev, .carousel-item-left, è .carousel-item-right.
    • .itemhè ancu avà .carousel-item.
    • Per i cuntrolli prev/next, .carousel-control.rightè .carousel-control.leftsò avà .carousel-control-nextè .carousel-control-prev, chì significheghja ùn anu più bisognu di una classe di basa specifica.
  • Eliminatu tutti i stili responsivi, rinviendu à l'utilità (per esempiu, mustrà i didascalie nantu à certe finestre) è stili persunalizati cum'è necessariu.
  • Eliminate l'imaghjini di l'imaghjini per l'imaghjini in l'articuli carousel, deferendu à l'utilità.
  • Tweaked the Carousel example to include the new markup and styles.

Tavule

  • Eliminatu u supportu per i tavulini nidificati stilati. Tutti i stili di tavulinu sò avà ereditati in v4 per selettori più simplici.
  • Aggiunta una variante di tabella inversa.

Utilità

  • Mostra, ammucciatu è più:
    • Rendite l'utilità di visualizazione rispunsevuli (per esempiu, .d-noneè d-{sm,md,lg,xl}-none).
    • Abbandunatu a maiò parte di l' .hidden-*utilità per i novi utilità di visualizazione . Per esempiu, invece di .hidden-sm-up, utilizate .d-sm-none. Rinominatu l' .hidden-printutilità per utilizà u schema di nomenamentu di l'utilità di visualizazione. Più infurmazione sottu a sezione Utilità Responsive di sta pagina.
    • Classi .float-{sm,md,lg,xl}-{left,right,none}aghjunte per i floats responsivi è eliminati .pull-leftè .pull-rightpostu chì sò ridondanti à .float-leftè .float-right.
  • Tipu:
    • Aghjunghjite variazioni responsive à e nostre classi di allineamentu di testu .text-{sm,md,lg,xl}-{left,center,right}.
  • Allineamentu è spazii:
  • Clearfix aghjurnatu per abbandunà u supportu per e versioni di navigatore più vechje.

Prefissi di venditore mixins

I mixins di prefissi di u venditore di Bootstrap 3 , chì sò stati deprecati in v3.2.0, sò stati sguassati in Bootstrap 4. Siccomu usemu Autoprefixer , ùn sò più necessarii.

Eliminati i seguenti mixins : 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,translatetranslate3duser-select

Documentazione

A nostra ducumentazione hà ricivutu ancu un aghjurnamentu in tuttu u pianu. Eccu u bassu:

  • Avemu sempre aduprà Jekyll, ma avemu plugins in u mischju:
    • bugify.rbhè utilizatu per elencu in modu efficiente l'entrata in a nostra pagina di bug di navigatore.
    • example.rbhè una furchetta persunalizata di u highlight.rbplugin predeterminatu, chì permette una manipulazione di codice di esempiu più faciule.
    • callout.rbhè una furchetta persunalizata simili, ma pensata per i nostri callouts di documenti speciali.
    • markdown-block.rbhè utilizatu per rende snippets Markdown in elementi HTML cum'è e tavule.
    • jekyll-toc hè utilizatu per generà a nostra tabella di cuntenutu.
  • Tuttu u cuntenutu di i documenti hè stata riscritta in Markdown (invece di HTML) per una editazione più faciule.
  • E pagine sò state riorganizate per un cuntenutu più simplice è una ghjerarchia più accessibile.
  • Avemu passatu da CSS regular à SCSS per prufittà pienamente di e variàbili di Bootstrap, mixin, è più.

Utilità rispunsevuli

Tutte @screen-e variàbili sò state eliminate in v4.0.0. Aduprate invece i mixins media-breakpoint-up(), media-breakpoint-down(), o Sass o a mappa Sass.media-breakpoint-only()$grid-breakpoints

E nostre classi di utilità rispunsevuli sò state largamente eliminate in favore di displayutilità esplicite.

  • I classi .hiddenè .showsò stati eliminati perchè anu cunflittu cù jQuery $(...).hide()è $(...).show()i metudi. Invece, pruvate à cambià l' [hidden]attributu o utilizate stili inline cum'è style="display: none;"è style="display: block;".
  • Tutte .hidden-e classi sò state eliminate, salvu per l'utilità di stampa chì sò stati rinominati.
    • Eliminatu da 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
    • Eliminatu da 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
  • L'utilità di stampa ùn cumincianu più cù .hidden-o .visible-, ma cù .d-print-.
    • Nomi antichi: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
    • Nuvelle classi: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Piuttostu cà aduprà .visible-*classi esplicite, rende un elementu visibile solu per ùn ammuccià micca in quella dimensione di u screnu. Pudete cumminà una .d-*-noneclassa cù una .d-*-blockclassa per vede un elementu solu nantu à un intervallu determinatu di dimensioni di schermu (per esempiu .d-none.d-md-block.d-xl-none, mostra l'elementu solu nantu à i dispositi mediu è grande).

Nota chì i cambiamenti à i punti di rottura di a griglia in v4 significa chì avete bisognu di andà un puntu di rottura più grande per ottene i stessi risultati. I novi classi di utilità responsive ùn provanu micca di accoglie casi menu cumuni induve a visibilità di l'elementu ùn pò esse espressa cum'è una sola gamma contigua di dimensioni di vista; vi tuccherà invece à aduprà CSS persunalizata in tali casi.