Migrazione alla v4

Bootstrap 4 è un'importante riscrittura dell'intero progetto. Le modifiche più significative sono riepilogate di seguito, seguite da modifiche più specifiche alle componenti rilevanti.

Cambiamenti stabili

Passando dalla Beta 3 alla nostra versione stabile v4.0, non ci sono modifiche sostanziali, ma ci sono alcune modifiche degne di nota.

Stampa

• Risolto il problema con le utilità di stampa interrotte. In precedenza, l'utilizzo di una .d-print-*classe prevaleva inaspettatamente su qualsiasi altra .d-*classe. Ora corrispondono alle nostre altre utilità di visualizzazione e si applicano solo a quel supporto ( @media print).

• Utilità di visualizzazione della stampa disponibili ampliate per adattarsi ad altre utilità. Beta 3 e precedenti avevano solo block, inline-block, inlinee none. Stable v4 aggiunto flex, inline-flex, table, table-rowe table-cell.

• Risolto il problema con il rendering dell'anteprima di stampa nei browser con nuovi stili di stampa che specificano @page size.

Beta 3 cambia

Sebbene la Beta 2 abbia visto la maggior parte delle nostre modifiche sostanziali durante la fase beta, ne abbiamo ancora alcune che devono essere affrontate nella versione Beta 3. Queste modifiche si applicano se stai aggiornando alla Beta 3 dalla Beta 2 o qualsiasi versione precedente di Bootstrap.

Varie

• $thumbnail-transitionRimossa la variabile inutilizzata . Non stavamo effettuando la transizione di nulla, quindi era solo codice extra.
• Il pacchetto npm non include più file diversi dai nostri file sorgente e dist; se ti affidi a loro e stavi eseguendo i nostri script tramite la node_modulescartella, dovresti adattare il tuo flusso di lavoro.

Le forme

• Ha riscritto le caselle di controllo e le radio sia personalizzate che predefinite. Ora, entrambi hanno una struttura HTML corrispondente (esterno <div>con fratello <input>e <label>) e gli stessi stili di layout (impostazione predefinita in pila, in linea con la classe del modificatore). Questo ci consente di definire lo stile dell'etichetta in base allo stato dell'input, semplificando il supporto per l' disabledattributo (che in precedenza richiedeva una classe padre) e supportando meglio la nostra convalida del modulo.

  Come parte di questo, abbiamo cambiato il CSS per la gestione di più background-imagemessaggi di posta su caselle di controllo e radio di moduli personalizzati. In precedenza, l'elemento ora rimosso .custom-control-indicatoraveva il colore di sfondo, la sfumatura e l'icona SVG. Personalizzare il gradiente di sfondo significava sostituirli tutti ogni volta che ne dovevi cambiare solo uno. Ora abbiamo .custom-control-label::beforeper il riempimento e il gradiente e .custom-control-label::aftergestisce l'icona.

  Per creare un controllo personalizzato in linea, aggiungi .custom-control-inline.

• Selettore aggiornato per i gruppi di pulsanti basati su input. Invece [data-toggle="buttons"] { }che per lo stile e il comportamento, utilizziamo l' dataattributo solo per i comportamenti JS e ci affidiamo a una nuova .btn-group-toggleclasse per lo stile.

• Rimosso .col-form-legenda favore di un leggermente migliorato .col-form-label. In questo modo .col-form-label-sme .col-form-label-lgpuò essere utilizzato sugli <legend>elementi con facilità.

• Gli input di file personalizzati hanno ricevuto una modifica alla loro $custom-file-textvariabile Sass. Non è più una mappa Sass annidata e ora alimenta solo una stringa: il Browsepulsante poiché ora è l'unico pseudo-elemento generato dal nostro Sass. Il Choose filetesto ora deriva dal .custom-file-label.

Gruppi di input

• I componenti aggiuntivi del gruppo di input ora sono specifici per il loro posizionamento rispetto a un input. Abbiamo abbandonato .input-group-addone .input-group-btnper due nuove classi, .input-group-prepende .input-group-append. È necessario utilizzare esplicitamente un'aggiunta o un anteposto ora, semplificando gran parte del nostro CSS. All'interno di un'accodamento o di una prepensione, posiziona i tuoi pulsanti come se esistessero altrove, ma avvolgi il testo in .input-group-text.

• Gli stili di convalida sono ora supportati, così come più input (sebbene sia possibile convalidare solo un input per gruppo).

• Le classi di dimensionamento devono essere sul genitore .input-groupe non sui singoli elementi del modulo.

Beta 2 cambia

Durante la versione beta, miriamo a non avere modifiche sostanziali. Tuttavia, le cose non vanno sempre come previsto. Di seguito sono riportate le principali modifiche da tenere a mente quando si passa dalla Beta 1 alla Beta 2.

Rottura

• Rimossa $badge-colorla variabile e il suo utilizzo su .badge. Usiamo una funzione di contrasto del colore per scegliere un colorbasato su background-color, quindi la variabile non è necessaria.
• grayscale()Funzione rinominata in gray()per evitare di rompere il conflitto con il grayscalefiltro nativo CSS.
• Rinominato .table-inverse, .thead-inverse, e .thead-defaultin .*-darke .*-light, corrispondente ai nostri schemi di colori usati altrove.
• Le tabelle reattive ora generano classi per ogni punto di interruzione della griglia. Questo si discosta dalla Beta 1 in quanto quello .table-responsiveche hai utilizzato è più simile a .table-responsive-md. È ora possibile utilizzare .table-responsiveo .table-responsive-{sm,md,lg,xl}secondo necessità.
• Abbandonato il supporto di Bower poiché il gestore dei pacchetti è stato deprecato per le alternative (ad esempio, Yarn o npm). Vedere bower/bower#2298 per i dettagli.
• Bootstrap richiede ancora jQuery 1.9.1 o versioni successive, ma ti consigliamo di utilizzare la versione 3.x poiché i browser supportati da v3.x sono quelli supportati da Bootstrap più v3.x ha alcune correzioni di sicurezza.
• Rimossa la .form-control-labelclasse inutilizzata. Se hai utilizzato questa classe, era un duplicato della .col-form-labelclasse che centrava verticalmente a <label>con il suo input associato nei layout dei moduli orizzontali.
• Modificato color-yiqda un mixin che includeva la colorproprietà a una funzione che restituisce un valore, consentendo di utilizzarlo per qualsiasi proprietà CSS. Ad esempio, invece di color-yiq(#000), dovresti scrivere color: color-yiq(#000);.

Mette in risalto

• Introdotto un nuovo pointer-eventsutilizzo sui modali. L'esterno .modal-dialogpassa attraverso gli eventi con pointer-events: nonela gestione dei clic personalizzata (consentendo di ascoltare solo .modal-backdropper eventuali clic) e quindi lo contrasta per l'effettivo .modal-contentcon pointer-events: auto.

Riepilogo

Ecco i big ticket di cui vorrai essere a conoscenza quando passi dalla v3 alla v4.

Supporto browser

• Eliminato il supporto per IE8, IE9 e iOS 6. v4 ora è solo IE10+ e iOS 7+. Per i siti che necessitano di uno di questi, utilizzare v3.
• Aggiunto il supporto ufficiale per il browser e WebView di Android v5.0 Lollipop. Le versioni precedenti del browser Android e WebView rimangono supportate solo in modo non ufficiale.

Cambiamenti globali

• Flexbox è abilitato per impostazione predefinita. In generale questo significa un allontanamento dai galleggianti e altro attraverso i nostri componenti.
• Passato da Less a Sass per i nostri file CSS di origine.
• Passata da pxa remcome unità CSS principale, anche se i pixel sono ancora utilizzati per le query multimediali e il comportamento della griglia poiché le viste del dispositivo non sono influenzate dalle dimensioni del tipo.
• Dimensione carattere globale aumentata da 14pxa 16px.
• Livelli di griglia rinnovati per aggiungere una quinta opzione (indirizzando dispositivi più piccoli a 576pxe sotto) e rimosso l' -xsinfisso da quelle classi. Esempio: .col-6.col-sm-4.col-md-3.
• Sostituito il tema opzionale separato con opzioni configurabili tramite variabili SCSS (ad esempio, $enable-gradients: true).
• Sistema di build revisionato per utilizzare una serie di script npm invece di Grunt. Vedi package.jsontutti gli script o il readme del nostro progetto per le esigenze di sviluppo locale.
• L'utilizzo non reattivo di Bootstrap non è più supportato.
• Eliminato il Customizer online a favore di una documentazione di installazione più ampia e build personalizzate.
• Aggiunte dozzine di nuove classi di utilità per coppie di valori proprietà CSS comuni e scorciatoie per spaziatura margini/padding.

Sistema a griglia

• Spostato in Flexbox.
  • Aggiunto supporto per flexbox nei mixin della griglia e nelle classi predefinite.
  • Come parte di flexbox, includeva il supporto per le classi di allineamento verticale e orizzontale.
• Nomi delle classi della griglia aggiornati e un nuovo livello della griglia.
  • Aggiunto un nuovo smlivello di griglia di seguito 768pxper un controllo più granulare. Ora abbiamo xs, sm, md, lge xl. Ciò significa anche che ogni livello è stato aumentato di un livello (quindi .col-md-6in v3 è ora .col-lg-6in v4).
  • xsle classi grid sono state modificate per non richiedere che l'infisso rappresenti in modo più accurato che iniziano ad applicare gli stili a min-width: 0e non a un valore pixel impostato. Invece di .col-xs-6, è ora .col-6. Tutti gli altri livelli della griglia richiedono l'infisso (ad esempio, sm).
• Dimensioni griglia, mixin e variabili aggiornati.
  • Le grondaie della griglia ora hanno una mappa Sass in modo da poter specificare larghezze di grondaia specifiche in ogni punto di interruzione.
  • Mixin griglia aggiornati per utilizzare un make-col-readymixin di preparazione e a make-colper impostare flexe max-widthper il dimensionamento delle singole colonne.
  • Modificati i punti di interruzione delle query multimediali del sistema della griglia e le larghezze dei contenitori per tenere conto del nuovo livello della griglia e garantire che le colonne siano equamente divisibili per 12la larghezza massima.
  • I punti di interruzione della griglia e le larghezze dei contenitori ora vengono gestiti tramite le mappe Sass ( $grid-breakpointse $container-max-widths) invece di una manciata di variabili separate. Questi sostituiscono @screen-*completamente le variabili e consentono di personalizzare completamente i livelli della griglia.
  • Anche le query sui media sono cambiate. Invece di ripetere le nostre dichiarazioni di media query con lo stesso valore ogni volta, ora abbiamo @include media-breakpoint-up/down/only. Ora, invece di scrivere @media (min-width: @screen-sm-min) { ... }, puoi scrivere @include media-breakpoint-up(sm) { ... }.

Componenti

• Pannelli, miniature e pozzi eliminati per un nuovo componente onnicomprensivo, le carte .
• Rilasciato il carattere dell'icona Glyphicons. Se hai bisogno di icone, alcune opzioni sono:
  • la versione a monte di Glyphicons
  • Octicons
  • Carattere fantastico
  • Vedere la pagina Estendi per un elenco di alternative. Hai ulteriori suggerimenti? Si prega di aprire un problema o PR.
• Rilasciato il plug-in Affix jQuery.
  • Si consiglia di utilizzare position: stickyinvece. Vedere la voce HTML5 Please per i dettagli e le raccomandazioni specifiche per il polyfill. Un suggerimento è quello di utilizzare una @supportsregola per implementarla (ad esempio, @supports (position: sticky) { ... })/
  • Se stavi utilizzando Affix per applicare ulteriori non positionstili, i polyfill potrebbero non supportare il tuo caso d'uso. Un'opzione per tali usi è la libreria ScrollPos-Styler di terze parti.
• Rilasciato il componente cercapersone poiché si trattava essenzialmente di pulsanti leggermente personalizzati.
• È stato eseguito il refactoring di quasi tutti i componenti per utilizzare più selettori di classe non nidificati anziché selettori figlio eccessivamente specifici.

Per componente

Questo elenco evidenzia le modifiche chiave per componente tra v3.xx e v4.0.0.

Riavviare

Una novità di Bootstrap 4 è Reboot , un nuovo foglio di stile che si basa su Normalize con i nostri stili di ripristino un po' supponenti. I selettori che appaiono in questo file usano solo elementi, non ci sono classi qui. Questo isola i nostri stili di ripristino dai nostri stili di componenti per un approccio più modulare. Alcuni dei reset più importanti inclusi sono la box-sizing: border-boxmodifica, il passaggio da unità ema remmolti elementi, stili di collegamento e molti reset di elementi del modulo.

Tipografia

• Spostate tutte le .text-utilità nel _utilities.scssfile.
• Rilasciato .page-headerpoiché, a parte il bordo, tutti i suoi stili possono essere applicati tramite utilità.
• .dl-horizontalè stato abbandonato. Invece, usa e usa .rowle <dl>classi di colonne della griglia (o mixin) su suoi <dt>e <dd>figli.
• Lo stile personalizzato <blockquote>è passato alle classi .blockquotee al .blockquote-reversemodificatore.
• .list-inlineora richiede che agli elementi dell'elenco figli sia .list-inline-itemapplicata la nuova classe.

immagini

• Rinominato .img-responsivein .img-fluid.
• Rinominato .img-roundedin.rounded
• Rinominato .img-circlein.rounded-circle

Tabelle

• Quasi tutte le istanze del >selettore sono state rimosse, il che significa che le tabelle nidificate ora erediteranno automaticamente gli stili dai loro genitori. Ciò semplifica notevolmente i nostri selettori e le potenziali personalizzazioni.
• Le tabelle reattive non richiedono più un elemento di avvolgimento. Invece, metti semplicemente il .table-responsivediritto sul <table>.
• Rinominato .table-condensedper .table-smcoerenza.
• Aggiunta una nuova .table-inverseopzione.
• Aggiunti modificatori dell'intestazione della tabella: .thead-defaulte .thead-inverse.
• Classi contestuali rinominate per avere un .table--prefisso. Quindi .active, .success, .warning, .dangere .infoa .table-active, .table-success, .table-warning, .table-dangere .table-info.

Le forme

• L'elemento spostato viene reimpostato sul _reboot.scssfile.
• Rinominato .control-labelin .col-form-label.
• Rinominato .input-lge .input-smto .form-control-lge .form-control-sm, rispettivamente.
• Classi abbandonate .form-group-*per semplicità. Usa .form-control-*invece le classi ora.
• Eliminato .help-blocke sostituito con .form-textper il testo della guida a livello di blocco. Per il testo della guida in linea e altre opzioni flessibili, utilizzare classi di utilità come .text-muted.
• Caduto .radio-inlinee .checkbox-inline.
• Consolidato .checkboxe .radioin .form-checke le varie .form-check-*classi.
• Forme orizzontali revisionate:
  • Abbandonato il .form-horizontalrequisito di classe.
  • .form-groupnon applica più gli stili dal .rowmixin via, quindi .rowè ora richiesto per i layout a griglia orizzontali (ad esempio, <div class="form-group row">).
  • Aggiunta una nuova .col-form-labelclasse per centrare verticalmente le etichette con .form-controls.
  • Aggiunte nuove .form-rowper layout di moduli compatti con le classi della griglia (scambia il tuo .rowper un .form-rowe vai).
• Aggiunto supporto per moduli personalizzati (per caselle di controllo, radio, selezioni e input di file).
• Sostituite le classi .has-error, .has-warninge .has-successcon la convalida dei moduli HTML5 tramite CSS :invalide :validpseudo-classi.
• Rinominato .form-control-staticin .form-control-plaintext.

Bottoni

• Rinominato .btn-defaultin .btn-secondary.
• La .btn-xsclasse è stata completamente eliminata poiché .btn-smè proporzionalmente molto più piccola di quella della v3.
• La funzione del pulsantebutton.js con stato del plug- in jQuery è stata eliminata. Ciò include i metodi $().button(string)e . $().button('reset')Ti consigliamo invece di utilizzare un po' di JavaScript personalizzato, che avrà il vantaggio di comportarsi esattamente come desideri.
  • Si noti che le altre funzionalità del plug-in (caselle di controllo dei pulsanti, pulsanti di opzione, pulsanti a commutazione singola) sono state mantenute nella v4.
• Cambia pulsanti' [disabled]in :disabledIE9+ supporta :disabled. Tuttavia fieldset[disabled]è ancora necessario perché i fieldset nativi disabilitati sono ancora difettosi in IE11 .

Gruppo di pulsanti

• Componente riscritto con flexbox.
• Rimosso .btn-group-justified. In sostituzione puoi usare <div class="btn-group d-flex" role="group"></div>come wrapper gli elementi con .w-100.
• La classe è stata completamente abbandonata a .btn-group-xscausa della rimozione di .btn-xs.
• Rimossa la spaziatura esplicita tra i gruppi di pulsanti nelle barre degli strumenti dei pulsanti; usa le utilità di margine ora.
• Documentazione migliorata per l'utilizzo con altri componenti.

Dropdown

• Passato da selettori padre a classi singolari per tutti i componenti, modificatori, ecc.
• Stili a discesa semplificati per non essere più spediti con frecce rivolte verso l'alto o verso il basso attaccate al menu a discesa.
• I menu a discesa possono essere creati con <div>s o <ul>s ora.
• Stili e markup a discesa ricostruiti per fornire un supporto integrato semplice per elementi <a>a <button>discesa basati su.
• Rinominato .dividerin .dropdown-divider.
• Gli elementi a discesa ora richiedono .dropdown-item.
• Gli interruttori a discesa non richiedono più un esplicito <span class="caret"></span>; questo è ora fornito automaticamente tramite CSS ::aftersu .dropdown-toggle.

Sistema a griglia

• Aggiunto un nuovo 576pxpunto di interruzione della griglia come sm, il che significa che ora ci sono cinque livelli totali ( xs, sm, md, lge xl).
• Rinominate le classi del modificatore di griglia reattivo da .col-{breakpoint}-{modifier}-{size}a .{modifier}-{breakpoint}-{size}per classi di griglia più semplici.
• Classi modificatori push e pull eliminate per le nuove classi basate su flexbox order. Ad esempio, invece di .col-8.push-4e .col-4.pull-8, useresti .col-8.order-2e .col-4.order-1.
• Aggiunte classi di utilità flexbox per il sistema e i componenti della griglia.

Elenca i gruppi

• Componente riscritto con flexbox.
• Sostituita a.list-group-itemcon una classe esplicita, .list-group-item-action, per lo stile delle versioni dei collegamenti e dei pulsanti degli elementi del gruppo di elenchi.
• Aggiunta .list-group-flushclasse per l'uso con le carte.

Modale

• Componente riscritto con flexbox.
• Dato il passaggio a flexbox, è probabile che l'allineamento delle icone di eliminazione nell'intestazione sia interrotto poiché non utilizziamo più i float. Il contenuto mobile viene prima, ma con flexbox non è più così. Aggiorna le icone di eliminazione in modo che vengano dopo i titoli modali da correggere.
• L' remoteopzione (che potrebbe essere utilizzata per caricare e inserire automaticamente contenuto esterno in un modale) e l' loaded.bs.modalevento corrispondente sono stati rimossi. Ti consigliamo invece di utilizzare modelli lato client o un framework di associazione dati o di chiamare tu stesso jQuery.load .

navi

• Componente riscritto con flexbox.
• Eliminati quasi tutti i >selettori per uno stile più semplice tramite classi non nidificate.
• Invece di selettori specifici per HTML come .nav > li > a, utilizziamo classi separate per .navs, .nav-items e .nav-links. Ciò rende il tuo codice HTML più flessibile e allo stesso tempo aumenta l'estendibilità.

barra di navigazione

La barra di navigazione è stata interamente riscritta in flexbox con un supporto migliorato per allineamento, reattività e personalizzazione.

• I comportamenti reattivi della barra di navigazione vengono ora applicati alla .navbarclasse tramite il campo richiesto .navbar-expand-{breakpoint} in cui scegli dove comprimere la barra di navigazione. In precedenza si trattava di una modifica meno variabile e richiedeva la ricompilazione.
• .navbar-defaultè ora .navbar-light, anche se .navbar-darkrimane lo stesso. Uno di questi è richiesto su ciascuna barra di navigazione. Tuttavia, queste classi non impostano più background-colors; invece essenzialmente influiscono solo su color.
• Le barre di navigazione ora richiedono una dichiarazione in background di qualche tipo. Scegli tra le nostre utilità in background ( .bg-*) o impostane una tua con le classi light/inverse sopra per una personalizzazione pazzesca .
• Dati gli stili flexbox, le barre di navigazione ora possono utilizzare le utilità flexbox per semplificare le opzioni di allineamento.
• .navbar-toggleè ora .navbar-togglere ha stili e markup interni diversi (non più tre <span>s).
• Abbandonato .navbar-formcompletamente la classe. Non è più necessario; invece, usa .form-inlinee applica le utilità di margine secondo necessità.
• Le barre di navigazione non includono più margin-bottomo border-radiusper impostazione predefinita. Utilizzare le utilità secondo necessità.
• Tutti gli esempi con le barre di navigazione sono stati aggiornati per includere un nuovo markup.

Impaginazione

• Componente riscritto con flexbox.
• Classi esplicite ( .page-item, .page-link) sono ora richieste ai discendenti di .paginations
• Rilasciato .pagercompletamente il componente perché era poco più che pulsanti di contorno personalizzati.

Briciole di pane

• Una classe esplicita, .breadcrumb-item, è ora richiesta ai discendenti di .breadcrumbs

Etichette e distintivi

• Rinominato .labelin .badgeper disambiguare <label>dall'elemento.
• È caduto il .badgecomponente perché era quasi identico alle etichette. Usa il .badge-pillmodificatore insieme al componente etichetta invece per quell'aspetto arrotondato.
• I badge non vengono più spostati automaticamente nei gruppi di elenchi e in altri componenti. Le classi di utilità ora sono necessarie per questo.
• .badge-defaultè stato eliminato e .badge-secondaryaggiunto per abbinare le classi di modificatori di componenti utilizzate altrove.

Pannelli, miniature e pozzi

Eliminato completamente per il nuovo componente della carta.

Pannelli

• .panela .card, ora costruito con flexbox.
• .panel-defaultrimosso e nessuna sostituzione.
• .panel-grouprimosso e nessuna sostituzione. .card-groupnon è un sostituto, è diverso.
• .panel-headinga.card-header
• .panel-titlea .card-title. A seconda dell'aspetto desiderato, potresti anche voler utilizzare elementi di intestazione o classi (es <h3>. , .h3) o elementi o classi in grassetto (es . <strong>, <b>, .font-weight-bold). Si noti che .card-title, sebbene abbia un nome simile, produce un aspetto diverso da .panel-title.
• .panel-bodya.card-body
• .panel-footera.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, e .panel-dangersono stati eliminati per .bg-, .text-, e .borderle utilità generate dalla nostra $theme-colorsmappa Sass.

Progresso

• .progress-bar-*Classi contestuali sostituite con .bg-*utilità. Ad esempio, class="progress-bar progress-bar-danger"diventa class="progress-bar bg-danger".
• Sostituito .activeper le barre di avanzamento animate con .progress-bar-animated.

Giostra

• Revisionato l'intero componente per semplificare il design e lo styling. Abbiamo meno stili da sovrascrivere, nuovi indicatori e nuove icone.
• Tutti i CSS sono stati annullati e rinominati, assicurando che ogni classe abbia il prefisso .carousel-.
  • Per gli elementi del carosello, .next, .prev, .left, e .rightora sono .carousel-item-next, .carousel-item-prev, .carousel-item-lefte .carousel-item-right.
  • .itemè anche adesso .carousel-item.
  • Per i controlli prev/next, .carousel-control.righte .carousel-control.leftsono ora .carousel-control-nexte .carousel-control-prev, il che significa che non richiedono più una classe base specifica.
• Rimosso tutto lo stile reattivo, rinviando alle utilità (ad es. mostrare didascalie su determinate finestre) e agli stili personalizzati secondo necessità.
• Rimosse le sostituzioni delle immagini per le immagini negli elementi del carosello, rinviando alle utilità.
• Modificato l'esempio Carousel per includere il nuovo markup e gli stili.

Tabelle

• Rimosso il supporto per le tabelle nidificate con stili. Tutti gli stili di tabella sono ora ereditati nella v4 per i selettori più semplici.
• Aggiunta la variante della tabella inversa.

Utilità

• Visualizza, nascosto e altro:
  • Rese reattive le utilità di visualizzazione (ad es. .d-nonee d-{sm,md,lg,xl}-none).
  • Eliminata la maggior parte delle .hidden-*utilità per le nuove utilità di visualizzazione . Ad esempio, invece di .hidden-sm-up, usa .d-sm-none. Rinominate le .hidden-printutilità per utilizzare lo schema di denominazione delle utilità di visualizzazione. Maggiori informazioni nella sezione Utilità reattive di questa pagina.
  • Aggiunte .float-{sm,md,lg,xl}-{left,right,none}classi per float reattivi e rimosse .pull-lefte .pull-rightpoiché sono ridondanti per .float-lefte .float-right.
• Tipo:
  • Aggiunte variazioni reattive alle nostre classi di allineamento del testo .text-{sm,md,lg,xl}-{left,center,right}.
• Allineamento e spaziatura:
  • Aggiunti nuovi margini reattivi e utilità di riempimento per tutti i lati, oltre a abbreviazioni verticali e orizzontali.
  • Aggiunto carico di barche di utilità flexbox .
  • Abbandonato .center-blockper la nuova .mx-autoclasse.
• Clearfix aggiornato per eliminare il supporto per le versioni precedenti del browser.

Prefisso fornitore mixins

I mixin del prefisso del fornitore di Bootstrap 3 , che erano deprecati nella v3.2.0, sono stati rimossi in Bootstrap 4. Poiché utilizziamo Autoprefixer , non sono più necessari.

Rimossi i seguenti mixin: 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

Documentazione

Anche la nostra documentazione ha ricevuto un aggiornamento su tutta la linea. Ecco il basso:

• Stiamo ancora usando Jekyll, ma abbiamo dei plugin nel mix:
  • bugify.rbviene utilizzato per elencare in modo efficiente le voci sulla nostra pagina dei bug del browser .
  • example.rbè un fork personalizzato del plug-in predefinito highlight.rb, che consente una gestione più semplice del codice di esempio.
  • callout.rbè un fork personalizzato simile, ma progettato per i nostri callout di documenti speciali.
  • markdown-block.rbviene utilizzato per eseguire il rendering di frammenti di Markdown all'interno di elementi HTML come le tabelle.
  • jekyll-toc viene utilizzato per generare il nostro sommario.
• Tutto il contenuto dei documenti è stato riscritto in Markdown (invece che in HTML) per una modifica più semplice.
• Le pagine sono state riorganizzate per un contenuto più semplice e una gerarchia più accessibile.
• Siamo passati da CSS normale a SCSS per sfruttare appieno le variabili, i mixin e altro di Bootstrap.

Utilità reattive

Tutte @screen-le variabili sono state rimosse nella v4.0.0. Utilizzare invece i mixin media-breakpoint-up(), media-breakpoint-down(), o Sass o la mappa Sass.media-breakpoint-only()$grid-breakpoints

Le nostre classi di utilità reattive sono state in gran parte rimosse a favore di displayutilità esplicite.

• Le classi .hiddene .showsono state rimosse perché erano in conflitto con jQuery $(...).hide()e $(...).show()metodi. Prova invece a cambiare l' [hidden]attributo o usa stili inline come style="display: none;"e style="display: block;".
• Tutte le .hidden-classi sono state rimosse, ad eccezione delle utilità di stampa che sono state rinominate.
  • Rimosso dalla 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
  • Rimosso dagli alpha v4:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• Le utilità di stampa non iniziano più con .hidden-o .visible-, ma con .d-print-.
  • Vecchi nomi: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Nuove classi: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

Invece di usare .visible-*classi esplicite, rendi visibile un elemento semplicemente non nascondendolo a quella dimensione dello schermo. Puoi combinare una .d-*-noneclasse con una .d-*-blockclasse per mostrare un elemento solo su un determinato intervallo di dimensioni dello schermo (es. .d-none.d-md-block.d-xl-nonemostra l'elemento solo su dispositivi di medie e grandi dimensioni).

Tieni presente che le modifiche ai punti di interruzione della griglia nella v4 significano che dovrai aumentare di un punto di interruzione per ottenere gli stessi risultati. Le nuove classi di utilità reattive non tentano di accogliere casi meno comuni in cui la visibilità di un elemento non può essere espressa come un unico intervallo contiguo di dimensioni del viewport; dovrai invece utilizzare CSS personalizzati in questi casi.