in English

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

Cù v5.1.1, avemu standardizatu i nostri @imports richiesti in tutti i nostri pacchetti CSS (cumpresi bootstrap.css, bootstrap-reboot.cssè bootstrap-grid.css) per include _root.scss. Questu aghjunghjenu :rootvariabili CSS di livellu à tutti i bundle, indipendentemente da quanti di elli sò usati in quellu bundle. In ultimamente, Bootstrap 5 hà da cuntinuà à vede più variabili CSS aghjunte cù u tempu, 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 {
    --#{$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, sti variàbili sò allora appiicati in Reboot cusì:

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
}

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

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

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 nativa

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,
  // 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;

Innota chì, perchè a pila di fonti include fonti emoji, parechji simboli cumuni / caratteri Unicode dingbat seranu resi cum'è pittogrammi 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.

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

Reguli horizontali

L' <hr>elementu hè statu simplificatu. Simile à i predefiniti di u navigatore, <hr>i s sò stilati via border-top, anu un predeterminatu opacity: .25è ereditanu automaticamente u so border-colorvia color, ancu quandu colorhè stabilitu via u parent. Puderanu esse mudificate cù utilità di testu, cunfini è 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">

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 resetta margin-leftè 0aghjunghje margin-bottom: .5rem. <dt>s sò in grassetto .

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.

html

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>

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

y = m x + b

html

<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 + ,

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>

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.

html

<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

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>

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ò principalmente indirizzati da Normalize, ma Reboot sguassate ancu i so margine 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.

Esempiu di legenda

Esempiu di input

Esempiu di email

Esempiu di telefonu

Esempiu url

Esempiu numeru

Esempiu di ricerca

Esempiu gamma

Esempiu di input di file

Esempiu di selezzione

Verificate sta casella

L'opzione unu hè questu è quellu L'opzione duie hè una altra cosa chì hè ancu super longa per dimustrà l'imballaggio di sti cuntrolli di forma fantastica. L'opzione trè hè disattivata

Esempiu testu area

Data di esempiu

Esempiu di tempu

Esempiu di password

Esempiu datetime-local

Esempiu settimana

Esempiu mese

Esempiu di culore

Esempiu di output 100

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 d'elementu senza buttone

html

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

Intestazioni è paragrafi

Reguli horizontali

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