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
rem
s invece diem
s per la spaziatura dei componenti scalabile. - Evita
margin-top
. I margini verticali possono crollare, producendo risultati inaspettati. Ancora più importante, però, una singola direzione dimargin
è un modello mentale più semplice. - Per un ridimensionamento più semplice tra le dimensioni del dispositivo, gli elementi di blocco dovrebbero usare
rem
s permargin
s. - Riduci al minimo le dichiarazioni di
font
proprietà correlate, utilizzandoinherit
quando 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*::before
e*::after
, aborder-box
. Ciò garantisce che la larghezza dichiarata dell'elemento non venga mai superata a causa del riempimento o del bordo. - Nessuna base
font-size
viene dichiarata su<html>
, ma16px
viene presupposta (l'impostazione predefinita del browser).font-size: 1rem
viene 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 globalefont-family
,line-height
, etext-align
. Questo viene ereditato in seguito da alcuni elementi del modulo per evitare incoerenze dei caratteri. - Per sicurezza,
<body>
ha dichiaratobackground-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 color
stile CSS.
Questo font-family
viene applicato a <body>
ed ereditato automaticamente a livello globale in Bootstrap. Per cambiare il globale font-family
, aggiorna $font-family-base
e ricompila Bootstrap.
Intestazioni e paragrafi
Tutti gli elementi di intestazione, ad esempio, <h1>
e <p>
vengono reimpostati per margin-top
rimuoverli. Sono state aggiunte intestazioni margin-bottom: .5rem
e paragrafi margin-bottom: 1rem
per 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-top
stati 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 margin
s. <dd>
s reimpostare margin-left
e 0
aggiungere 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-top
e utilizzare rem
le 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-align
in tutto. Ulteriori modifiche per bordi, spaziatura interna e altro vengono fornite con la .table
classe .
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 perdisplay: inline-block
consentirnemargin
l'applicazione.<input>
s,<select>
s,<textarea>
s e<button>
s sono per lo più indirizzati da Normalize, ma Reboot rimuove anche loromargin
e setline-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 hannocursor: pointer
quando: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 cursor
modifica.
<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-style
da italic
a normal
. line-height
ora è 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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Nome completo
[email protected]
Citazione in blocco
L'impostazione predefinita margin
su blockquotes è 1em 40px
, quindi lo ripristiniamo 0 0 1rem
per qualcosa di più coerente con altri elementi.
Una citazione ben nota, contenuta in un elemento blockquote.
Elementi in linea
L' <abbr>
elemento riceve uno stile di base per farlo risaltare nel testo del paragrafo.
Riepilogo
L'impostazione predefinita cursor
su riepilogo è text
, quindi lo ripristiniamo pointer
per 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: none
predefinito. Prendendo in prestito un'idea da PureCSS , miglioriamo questa impostazione predefinita [hidden] { display: none !important; }
per evitare che display
venga 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 display
degli elementi.
Per attivare o disattivare semplicemente la visibilità di un elemento, il che significa display
che non viene modificato e l'elemento può ancora influenzare il flusso del documento, utilizzare invece la .invisible
classe .