in English

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.

Su questa pagina

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.

Variabili CSS

Aggiunto nella v5.2.0

Con la v5.1.1, abbiamo standardizzato le nostre richieste @importin tutti i nostri bundle CSS (inclusi bootstrap.css, bootstrap-reboot.css, e bootstrap-grid.css) per includere _root.scss. Questo aggiunge :rootvariabili CSS di livello a tutti i bundle, indipendentemente dal numero di esse utilizzate in quel bundle. In definitiva Bootstrap 5 continuerà a vedere più variabili CSS aggiunte nel tempo, in modo da fornire una maggiore personalizzazione in tempo reale senza la necessità di ricompilare sempre Sass. Il nostro approccio consiste nel prendere le nostre variabili Sass di origine e trasformarle in variabili CSS. In questo modo, anche se non utilizzi variabili CSS, hai comunque tutta la potenza di Sass. Questo è ancora in corso e richiederà tempo per essere implementato completamente.

Ad esempio, considera queste :rootvariabili CSS per <body>stili comuni:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

In pratica, quelle variabili vengono quindi applicate in Reboot in questo modo:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Che ti consente di effettuare personalizzazioni in tempo reale come preferisci:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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. Questa impostazione predefinita del browser può essere ignorata modificando la $font-size-rootvariabile.
Imposta <body>anche un globale font-family, font-weight, line-heighte color. 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

Bootstrap utilizza uno "stack di font nativo" o "stack di font di sistema" per un rendering ottimale del testo su ogni dispositivo e sistema operativo. Questi font di sistema sono stati progettati specificamente pensando ai dispositivi odierni, con un rendering migliorato sugli schermi, supporto per font variabili e altro ancora. Leggi di più sugli stack di font nativi in questo articolo di Smashing Magazine .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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

Regole orizzontali

L' <hr>elemento è stato semplificato. Simile alle impostazioni predefinite del browser, <hr>i messaggi di posta elettronica hanno uno stile tramite border-top, hanno un valore predefinito opacity: .25ed ereditano automaticamente il loro border-colortramite color, incluso quando colorè impostato tramite il genitore. Possono essere modificati con le utilità di testo, bordo e opacità.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Elenchi

Tutti gli elenchi— <ul>, <ol>, e <dl>—sono margin-topstati rimossi e a margin-bottom: 1rem. Gli elenchi nidificati non hanno margin-bottom. Abbiamo anche ripristinato gli elementi padding-lefton <ul>e <ol>.

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.

Codice in linea

Avvolgi frammenti di codice in linea con <code>. Assicurati di sfuggire alle parentesi angolari HTML.

Ad esempio, <section>dovrebbe essere avvolto come inline.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Blocchi di codice

Usa <pre>s per più righe di codice. Ancora una volta, assicurati di evitare le parentesi angolari nel codice per un rendering corretto. L' <pre>elemento viene reimpostato per rimuoverlo margin-tope utilizzare remle unità per il suo margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Variabili

Per indicare le variabili utilizzare il <var>tag.

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Input dell'utente

Utilizzare il <kbd>per indicare l'input che in genere viene immesso tramite tastiera.

Per cambiare directory, digitare cdseguito dal nome della directory.
Per modificare le impostazioni, premere ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Esempio di output

Per indicare l'output di esempio da un programma, utilizzare il <samp>tag.

Questo testo deve essere trattato come output di esempio da un programma per computer.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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.

Esempio di legenda

Esempio di input

Esempio di posta elettronica

Esempio di telefono

Esempio di URL

Numero di esempio

Esempio di ricerca

Esempio di gamma

Esempio di input di file

Esempio selezionare

Seleziona questa casella di controllo

L'opzione uno è questo e quello L'opzione due è qualcos'altro che è anche molto lungo per dimostrare il wrapping di questi fantasiosi controlli dei moduli. L'opzione tre è disabilitata

Esempio di area di testo

Esempio di data

Esempio di tempo

Esempio di password

Esempio datetime-local

Esempio di settimana

Esempio mese

Esempio colore

Esempio di output 100

Supporto per l'immissione di data e colore

Tieni presente che gli input di data non sono completamente supportati da tutti i browser, in particolare Safari.

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

html

<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.

L' elemento dell'abbreviazione HTML .

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.

<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 .

Riavviare

Approccio

Variabili CSS

Impostazioni predefinite della pagina

Pila di caratteri nativi

Intestazioni e paragrafi

Regole orizzontali

Elenchi

Codice in linea

Blocchi di codice

Variabili

Input dell'utente

Esempio di output

Tabelle

Le forme

Supporto per l'immissione di data e colore

Puntatori sui pulsanti

Elementi vari

Indirizzo

Citazione in blocco

Elementi in linea

Riepilogo

[hidden]Attributo HTML5

incompatibilità jQuery

`[hidden]`Attributo HTML5