Source

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, inadempiente a #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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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 a margin-bottom: 1rem. Gli elenchi nidificati non hanno margin-bottom.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Intero molestie lorem a massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibolo laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Intero molestie lorem a massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Testo preformattato

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

.esempio-elemento {
  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>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.

Elementi vari

Indirizzo

L' <address>elemento viene aggiornato per ripristinare l'impostazione predefinita del browser font-styleda italica normal. line-heightè anche ora 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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Intero posuere erat a ante.

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 .