Riavviare

Reboot, una raccolta di modifiche CSS specifiche dell'elemento in un unico file, kickstart Bootstrap per fornire una linea di base elegante, coerente e semplice su cui basarsi.

Approccio

Reboot si basa su Normalize, fornendo molti elementi HTML con stili alquanto supponenti usando solo selettori di elementi. Lo stile aggiuntivo viene eseguito solo con le classi. Ad esempio, riavviamo alcuni <table>stili per una linea di base più semplice e in seguito forniamo .table, .table-bordered, e altro.

Ecco le nostre linee guida e i motivi per scegliere cosa sovrascrivere in Reboot:

Aggiorna alcuni valori predefiniti del browser per utilizzare rems invece di ems per la spaziatura dei componenti scalabile.
Evita margin-top. I margini verticali possono crollare, producendo risultati inaspettati. Ancora più importante, però, una singola direzione di marginè un modello mentale più semplice.
Per un ridimensionamento più semplice tra le dimensioni del dispositivo, gli elementi di blocco dovrebbero usare rems per margins.
Riduci al minimo le dichiarazioni di fontproprietà correlate, utilizzando inheritquando possibile.

Impostazioni predefinite della pagina

Gli elementi <html>e <body>vengono aggiornati per fornire impostazioni predefinite migliori a livello di pagina. Più specificamente:

Il box-sizingè impostato globalmente su ogni elemento, inclusi *::beforee *::after, a border-box. Ciò garantisce che la larghezza dichiarata dell'elemento non venga mai superata a causa del riempimento o del bordo.
Nessuna base font-sizeviene dichiarata su <html>, ma 16pxviene presupposta (l'impostazione predefinita del browser). font-size: 1remviene applicato <body>per un facile ridimensionamento reattivo del tipo tramite query multimediali, rispettando le preferenze dell'utente e garantendo un approccio più accessibile.
Imposta <body>anche un globale font-family, line-height, e text-align. Questo viene ereditato in seguito da alcuni elementi del modulo per evitare incoerenze dei caratteri.
Per sicurezza, <body>ha dichiarato background-color, in difetto di #fff.

Pila di caratteri nativi

I caratteri Web predefiniti (Helvetica Neue, Helvetica e Arial) sono stati eliminati in Bootstrap 4 e sostituiti con uno "stack di caratteri nativo" per un rendering ottimale del testo su ogni dispositivo e sistema operativo. Leggi di più sugli stack di font nativi in questo articolo di Smashing Magazine .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Si noti che poiché la pila di caratteri include caratteri emoji, molti caratteri Unicode simbolo/dingbat comuni verranno visualizzati come pittogrammi multicolori. Il loro aspetto varierà a seconda dello stile utilizzato nel carattere emoji nativo del browser/della piattaforma e non saranno influenzati da alcuno colorstile CSS.

Questo font-familyviene applicato a <body>ed ereditato automaticamente a livello globale in Bootstrap. Per cambiare il globale font-family, aggiorna $font-family-basee ricompila Bootstrap.

Intestazioni e paragrafi

Tutti gli elementi di intestazione, ad esempio, <h1>e <p>vengono reimpostati per margin-toprimuoverli. Sono state aggiunte intestazioni margin-bottom: .5reme paragrafi margin-bottom: 1remper una facile spaziatura.

Intestazione	Esempio
`<h1></h1>`	h1. Intestazione Bootstrap
`<h2></h2>`	h2. Intestazione Bootstrap
`<h3></h3>`	h3. Intestazione Bootstrap
`<h4></h4>`	h4. Intestazione Bootstrap
`<h5></h5>`	h5. Intestazione Bootstrap
`<h6></h6>`	h6. Intestazione Bootstrap

Elenchi

Tutti gli elenchi— <ul>, <ol>, e <dl>—sono margin-topstati rimossi e amargin-bottom: 1rem . Gli elenchi nidificati non hanno margin-bottom.

Tutti gli elenchi hanno il margine superiore rimosso
E il loro margine inferiore si è normalizzato
Gli elenchi nidificati non hanno margine inferiore
- In questo modo hanno un aspetto più uniforme
- In particolare se seguito da più voci di elenco
Anche il riempimento sinistro è stato ripristinato

Ecco una lista ordinata
Con alcune voci di elenco
Ha lo stesso aspetto generale
Come la precedente lista non ordinata

Per uno stile più semplice, una gerarchia chiara e una migliore spaziatura, gli elenchi di descrizioni hanno aggiornato margins. <dd>s reimpostare margin-lefte 0aggiungere margin-bottom: .5rem. <dt>le s sono in grassetto .

Elenchi di descrizione: Un elenco di descrizioni è perfetto per definire i termini.
Termine: Definizione per il termine.; Una seconda definizione per lo stesso termine.
Un altro termine: Definizione per quest'altro termine.

Testo preformattato

L' <pre>elemento viene reimpostato per rimuoverlo margin-tope utilizzare remle unità per il suo margin-bottom.

.elemento-esempio {
  margine inferiore: 1rem;
}

Tabelle

Le tabelle sono leggermente adattate agli stili <caption>, comprimono i bordi e garantiscono la coerenza text-alignin tutto. Ulteriori modifiche per bordi, spaziatura interna e altro vengono fornite con la .tableclasse .

Questa è una tabella di esempio e questa è la sua didascalia per descrivere il contenuto.
Intestazione tabella	Intestazione tabella	Intestazione tabella	Intestazione tabella
Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella
Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella
Cella della tabella	Cella della tabella	Cella della tabella	Cella della tabella

Le forme

Vari elementi del modulo sono stati riavviati per stili di base più semplici. Ecco alcune delle modifiche più importanti:

<fieldset>s non hanno bordi, riempimento o margine, quindi possono essere facilmente utilizzati come wrapper per singoli input o gruppi di input.
<legend>s, come i fieldset, sono stati anche ridisegnati per essere visualizzati come una sorta di intestazione.
<label>s sono impostati per display: inline-blockconsentirne marginl'applicazione.
<input>s, <select>s, <textarea>s e <button>s sono per lo più indirizzati da Normalize, ma Reboot rimuove anche loro margine set line-height: inherit.
<textarea>I messaggi di posta elettronica vengono modificati per essere ridimensionabili solo verticalmente poiché il ridimensionamento orizzontale spesso "interrompe" il layout della pagina.
<button>se gli <input>elementi del pulsante hanno cursor: pointerquando :not(:disabled).

Questi cambiamenti, e altro ancora, sono illustrati di seguito.

Puntatori sui pulsanti

Il riavvio include un miglioramento per role="button"modificare il cursore predefinito in pointer. Aggiungi questo attributo agli elementi per aiutare a indicare che gli elementi sono interattivi. Questo ruolo non è necessario per <button>gli elementi che ottengono la propria cursormodifica.

Pulsante elemento senza pulsante

<span role="button" tabindex="0">Non-button element button</span>

Elementi vari

Indirizzo

L' <address>elemento viene aggiornato per ripristinare l'impostazione predefinita del browser font-styleda italica normal. line-heightora è anche ereditato ed margin-bottom: 1remè stato aggiunto. <address>s servono per presentare le informazioni di contatto per l'antenato più vicino (o un intero corpus di lavori). Mantieni la formattazione terminando le righe con <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Nome completo
[email protected]

Citazione in blocco

L'impostazione predefinita marginsu blockquotes è 1em 40px, quindi lo ripristiniamo 0 0 1remper qualcosa di più coerente con altri elementi.

Una citazione ben nota, contenuta in un elemento blockquote.

Qualcuno famoso nel titolo della fonte

Elementi in linea

L' <abbr>elemento riceve uno stile di base per farlo risaltare nel testo del paragrafo.

Nulla attr vitae elit libero, a pharetra augue.

Riepilogo

L'impostazione predefinita cursorsu riepilogo è text, quindi lo ripristiniamo pointerper comunicare che è possibile interagire con l'elemento facendo clic su di esso.

Alcuni dettagli

Maggiori informazioni sui dettagli.

Ancora più dettagli

Qui ci sono ancora più dettagli sui dettagli.

`[hidden]`Attributo HTML5

HTML5 aggiunge un nuovo attributo globale denominato[hidden] , con lo stile display: nonepredefinito. Prendendo in prestito un'idea da PureCSS , miglioriamo questa impostazione predefinita [hidden] { display: none !important; }per evitare che displayvenga accidentalmente sovrascritta. Sebbene [hidden]non sia supportato nativamente da IE10, la dichiarazione esplicita nel nostro CSS risolve questo problema.

<input type="text" hidden>

incompatibilità jQuery

[hidden]non è compatibile con jQuery $(...).hide()e $(...).show()metodi. Pertanto, al momento non approviamo in modo particolare [hidden]altre tecniche per la gestione displaydegli elementi.

Per attivare o disattivare semplicemente la visibilità di un elemento, il che significa displayche non viene modificato e l'elemento può ancora influenzare il flusso del documento, utilizzare invece la .invisibleclasse .