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.
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à
rem
s invece diem
s per u spaziu di cumpunenti scalabile. - Evite
margin-top
. I margini verticali ponu colapsà, dendu risultati inespettati. A più impurtante però, una sola direzzione dimargin
hè un mudellu mentale più simplice. - Per una scala più faciule trà e dimensioni di u dispositivu, l'elementi di bloccu duveranu aduprà
rem
s permargin
s. - Mantene dichjarazioni di
font
pruprietà -related à u minimu, usenduinherit
sempre chì pussibule.
Variabili CSS
Aggiuntu in v5.1.1
Cù v5.1.1, avemu standardizatu i nostri @import
s richiesti in tutti i nostri bundle CSS (cumpresu bootstrap.css
, bootstrap-reboot.css
, è bootstrap-grid.css
per include _root.scss
. Questu aghjunghje :root
varià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-sizing
hè 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-size
hè dichjarata nantu à u<html>
, ma16px
hè assunta (u navigatore predeterminatu).font-size: 1rem
hè 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-root
variàbile.
- Nisuna basa
- U
<body>
stabilisce ancu un globalefont-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 dichjarazionebackground-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 color
stili CSS.
Questu font-family
hè 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 :root
varià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-top
eliminati. Intestazioni anu margin-bottom: .5rem
aghjustatu è paragrafi margin-bottom: 1rem
per 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-top
stati 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 margin
s. <dd>
s resettate margin-left
è 0
aghjunghje 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.
<section>
deve esse impannillatu cum'è in linea.
For example, <code><section></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à rem
unità per u so margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Variabili
Per indicà variàbili utilizate l' <var>
etichetta.
<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 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.
<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-align
in tuttu. Cambiamenti supplementari per e fruntiere, padding, è più venenu cù a .table
classe .
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-block
permettemargin
à esse applicata.<input>
s,<select>
s,<textarea>
s, è<button>
s sò soprattuttu indirizzati da Normalize, ma Reboot sguassate ancu i somargin
è setline-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 anucursor: pointer
quandu: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 cursor
cambiamentu.
<span role="button" tabindex="0">Non-button element button</span>
Vari elementi
Indirizzu
L' <address>
elementu hè aghjurnatu per resettate u navigatore predeterminatu font-style
da italic
à normal
. line-height
hè ancu avà ereditatu, è margin-bottom: 1rem
hè 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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Nome
pienu [email protected]
Blockquote
U predeterminatu margin
nantu à i blockquotes hè 1em 40px
, cusì avemu resettatu quellu 0 0 1rem
per 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.
Riassuntu
U predeterminatu cursor
in u riassuntu hè text
, cusì avemu resettatu chì pointer
per 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: none
predeterminatu. Prestu un'idea da PureCSS , migliuramu stu predefinitu [hidden] { display: none !important; }
per aiutà à prevene ch'ella display
sia 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' display
elementi.
Per solu bascà a visibilità di un elementu, vale à display
dì chì ùn hè micca mudificatu è l'elementu pò ancu influenzà u flussu di u documentu, utilizate a .invisible
classa invece.