Reboot

Reboot, una cullizzioni di cambiamenti CSS specifichi di l'elementu in un unicu schedariu, kickstart Bootstrap per furnisce una linea di base elegante, coherente è simplice per custruisce.

In sta pagina

Avvicinamentu

Reboot si basa nantu à Normalize, chì furnisce parechji elementi HTML cù stili un pocu opinioni chì utilizanu solu selettori di elementi. Stile supplementu hè fattu solu cù classi. Per esempiu, riavviamu certi <table>stili per una basa più simplice è più tardi furnisce .table, .table-bordered, è più.

Eccu i nostri linee guida è motivi per sceglie ciò chì annullà in Reboot:

Aghjurnate alcuni valori predeterminati di u navigatore per utilizà rems invece di ems per u spaziu di cumpunenti scalabile.
Evite margin-top. I margini verticali ponu colapsà, dendu risultati inespettati. A più impurtante però, una sola direzzione di marginhè un mudellu mentale più simplice.
Per una scala più faciule trà e dimensioni di u dispositivu, l'elementi di bloccu duveranu aduprà rems per margins.
Mantene dichjarazioni di fontpruprietà -related à u minimu, usendu inheritsempre chì pussibule.

Variabili CSS

Aggiuntu in v5.1.1

Cù v5.1.1, avemu standardizatu i nostri @imports richiesti in tutti i nostri bundle CSS (cumpresu bootstrap.css, bootstrap-reboot.css, è bootstrap-grid.cssper include _root.scss. Questu aghjunghje :rootvariàbili CSS di livellu à tutti i bundle, indipendentemente da quanti di elli sò usati in quellu bundle. In ultimamente, Bootstrap 5 cuntinuerà à cuntinuà). vede più variabili CSS aghjuntu cù u tempu.

Pagina predefinita

L' elementi <html>è <body>sò aghjurnati per furnisce megliu predefiniti in tutta a pagina. Più specificamente:

U box-sizinghè stabilitu globalmente nantu à ogni elementu, cumpresu *::beforeè *::after, à border-box. Questu assicura chì a larghezza dichjarata di l'elementu ùn hè mai superata per via di padding o frontiere.
- Nisuna basa font-sizehè dichjarata nantu à u <html>, ma 16pxhè assunta (u navigatore predeterminatu). font-size: 1remhè appiicata nantu à u <body>tippu di rispunsabilità faciule per una scala di tippu per mezu di e dumande di media mentre rispettendu e preferenze di l'utilizatori è assicurendu un approcciu più accessibile. Stu navigatore predeterminatu pò esse rimpiazzatu mudificà a $font-size-rootvariàbile.
U <body>stabilisce ancu un globale font-family, font-weight, line-height, è color. Questu hè ereditatu dopu da alcuni elementi di forma per prevene inconsistenzi di font.
Per a sicurità, <body>hà una dichjarazione background-color, predeterminata à #fff.

Pila di font nativu

Bootstrap utilizza una "pila di font nativa" o "pila di fonti di sistema" per un rendering di testu ottimali in ogni dispositivu è OS. Questi fonti di u sistema sò stati cuncepiti specificamente cù i dispositi di l'oghje in mente, cù una resa mejorata nantu à i schermi, supportu di fonti variabili, è più. Leghjite più nantu à stacks di font nativu in questu articulu 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,
  // 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;

Nota chì, perchè a pila di fonti include fonti emoji, parechji caratteri cumuni di simboli / dingbat Unicode saranu resi cum'è pictografi multicolori. U so aspettu varierà, secondu u stilu utilizatu in u font nativu emoji di u navigatore/piattaforma, è ùn saranu micca affettati da alcunu colorstili CSS.

Questu font-familyhè appiicatu à u <body>è ereditatu automaticamente in u mondu in tuttu Bootstrap. Per cambià u glubale font-family, aghjurnà $font-family-baseè ricumpila Bootstrap.

Variabili CSS

Cume Bootstrap 5 cuntinueghja à maturà, più è più stili seranu custruiti cù variabili CSS cum'è un mezzu per furnisce più persunalizazione in tempu reale senza a necessità di ricumpià sempre Sass. U nostru approcciu hè di piglià a nostra variabile Sass fonte è trasfurmà in variabili CSS. In questu modu, ancu s'ellu ùn utilizate micca variabili CSS, avete sempre tuttu u putere di Sass. Questu hè sempre in prugressu è duverà tempu per implementà cumplettamente.

Per esempiu, cunzidira sti :rootvariàbili CSS per <body>stili cumuni:

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

In pratica, sti variàbili sò allora appiicati in Reboot cusì:

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

Chì vi permette di fà persunalizazione in tempu reale cumu vulete:

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

Intestazioni è paragrafi

Tutti l'elementi di l'intestazione - per esempiu - <h1>è <p>sò resettati per esse margin-topeliminati. Intestazioni anu margin-bottom: .5remaghjustatu è paragrafi margin-bottom: 1remper un spaziu faciule.

Titulu	Esempiu
`<h1></h1>`	h1. Titulu Bootstrap
`<h2></h2>`	h2. Titulu Bootstrap
`<h3></h3>`	h3. Titulu Bootstrap
`<h4></h4>`	h4. Titulu Bootstrap
`<h5></h5>`	h5. Titulu Bootstrap
`<h6></h6>`	h6. Titulu Bootstrap

Listi

Tutti i listi <ul>- , <ol>, è <dl>- sò margin-topstati eliminati è un margin-bottom: 1rem. Listi nidificati ùn anu micca margin-bottom. Avemu ancu resettatu l'accensione padding-leftè <ul>l' <ol>elementi.

Tutte e liste anu u so margine superiore eliminatu
È u so margine di fondu hè normalizatu
Listi nidificati ùn anu micca un margine di fondu
- Questu modu anu un aspettu più uniforme
- In particulare quandu seguita da più elementi di lista
L'imbottitura sinistra hè stata ancu resettata

Eccu una lista urdinata
Cù uni pochi di elementi di lista
Hà u listessu aspettu generale
Cum'è a lista precedente senza ordine

Per un stilu più simplice, una ghjerarchia chjara, è un spaziu megliu, i listi di descrizzione anu aghjurnatu margins. <dd>s resettate margin-leftè 0aghjunghje margin-bottom: .5rem. <dt>s sò in grassu .

Lista di descrizzione: Una lista di descrizzione hè perfetta per definisce i termini.
Terminu: Definizione di u termine.; Una seconda definizione per u stessu terminu.
Un altru termini: Definizione per questu altru termine.

Codice in linea

Imbulighjate snippets inline di codice cù <code>. Assicuratevi di scappà parentesi d'angolo HTML.

Per esempiu, <section>deve esse impannillatu cum'è in linea.

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

Blocchi di codice

Aduprate <pre>s per parechje linee di codice. Una volta, assicuratevi di scappà qualsiasi parentesi angulari in u codice per un rendering propiu. L' <pre>elementu hè resettatu per sguassà u so margin-topè aduprà remunità per u so margin-bottom.

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

<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 indicà variàbili utilizate l' <var>etichetta.

y = m x + b

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

Input di l'utilizatori

Aduprate u <kbd>per indicà l'input chì hè tipicamente inseritu cù u teclatu.

Per cambià u cartulare, scrivite cdseguitu da u nome di u cartulare.
Per edità i paràmetri, appughjà ctrl + ,

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>

Sample output

Per indicà l'output di mostra da un prugramma utilizate u <samp>tag.

Stu testu hè destinatu à esse trattatu cum'è output di mostra da un prugramma di computer.

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

Tavule

I tavule sò ligeramente adattati à u stilu <caption>s, colapsanu e fruntiere, è assicuranu a coherenza text-alignin tuttu. Cambiamenti supplementari per e fruntiere, padding, è più venenu cù a .tableclasse .

Questa hè una tabella di esempiu, è questu hè u so didascalia per discrìviri u cuntenutu.
Titulu di a tavula	Titulu di a tavula	Titulu di a tavula	Titulu di a tavula
Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula
Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula
Cellula di a tavula	Cellula di a tavula	Cellula di a tavula	Cellula di a tavula

Forme

Diversi elementi di forma sò stati riavviati per stili di basa più simplici. Eccu alcuni di i cambiamenti più notevuli:

<fieldset>s ùn anu micca cunfini, padding, o margini cusì ponu esse facilmente utilizati cum'è wrappers per inputs individuali o gruppi di inputs.
<legend>s, cum'è fieldsets, sò stati ancu rimodellati per esse affissati cum'è una sorta di intestazione.
<label>s sò messe à display: inline-blockpermette marginà esse applicata.
<input>s, <select>s, <textarea>s, è <button>s sò soprattuttu indirizzati da Normalize, ma Reboot sguassate ancu i so marginè set line-height: inherit.
<textarea>s sò mudificate per esse ridimensionabili solu verticalmente cum'è ridimensionamentu horizontale spessu "rompe" u layout di pagina.
<button>s è <input>l'elementi di buttone anu cursor: pointerquandu :not(:disabled).

Questi cambiamenti, è più, sò dimustrati quì sottu.

Data è supportu di input di culore

Tenite in mente l'input di data ùn sò micca cumplettamente supportati da tutti i navigatori, vale à dì Safari.

Puntatori nantu à i buttoni

Reboot include un miglioramentu per role="button"cambià u cursore predeterminatu in pointer. Aghjunghje stu attributu à elementi per aiutà à indicà chì l'elementi sò interattivi. Stu rolu ùn hè micca necessariu per l' <button>elementi, chì uttene u so propiu cursorcambiamentu.

U buttone di l'elementu senza buttone

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

Vari elementi

Indirizzu

L' <address>elementu hè aghjurnatu per resettate u navigatore predeterminatu font-styleda italicà normal. line-heighthè ancu avà ereditatu, è margin-bottom: 1remhè statu aghjuntu. <address>s sò per presentà l'infurmazioni di cuntattu per l'antenatu più vicinu (o un corpu tutale di travagliu). Preservate u furmatu finendu e linee cù <br>.

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

Nome
pienu [email protected]

Blockquote

U predeterminatu marginnantu à i blockquotes hè 1em 40px, cusì avemu resettatu quellu 0 0 1remper qualcosa più coherente cù altri elementi.

Una cita ben cunnisciuta, cuntenuta in un elementu blockquote.

Qualchissia famosu in Source Title

Elementi in linea

L' <abbr>elementu riceve un stilu di basa per fà si distingue trà u testu di paragrafu.

L' elementu di abbreviazione HTML .

Riassuntu

U predeterminatu cursorin u riassuntu hè text, cusì avemu resettatu chì pointerper trasmette chì l'elementu pò esse interattuatu cù clicchendu nantu à ellu.

Certi dettagli

Più infurmazione nantu à i dettagli.

Ancu più dettagli

Eccu ancu più dettagli nantu à i dettagli.

`[hidden]`attributu HTML5

HTML5 aghjunghjenu un novu attributu globale chjamatu[hidden] , chì hè stilatu cum'è display: nonepredeterminatu. Prestu un'idea da PureCSS , migliuramu stu predefinitu [hidden] { display: none !important; }per aiutà à prevene ch'ella displaysia annullata accidentalmente.

<input type="text" hidden>

Incompatibilità di jQuery

[hidden]ùn hè micca cumpatibile cù jQuery $(...).hide()è $(...).show()i metudi. Dunque, attualmente ùn appruvemu micca sopra [hidden]à altre tecniche per gestisce l' displayelementi.

Per solu bascà a visibilità di un elementu, vale à displaydì chì ùn hè micca mudificatu è l'elementu pò ancu influenzà u flussu di u documentu, utilizate a .invisibleclassa invece.

Reboot

Avvicinamentu

Variabili CSS

Pagina predefinita

Pila di font nativu

Variabili CSS

Intestazioni è paragrafi

Listi

Codice in linea

Blocchi di codice

Variabili

Input di l'utilizatori

Sample output

Tavule

Forme

Data è supportu di input di culore

Puntatori nantu à i buttoni

Vari elementi

Indirizzu

Blockquote

Elementi in linea

Riassuntu

[hidden]attributu HTML5

Incompatibilità di jQuery

`[hidden]`attributu HTML5