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.

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.

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.
  • U <body>stabilisce ancu un globale font-family, line-height, è text-align. 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

I fonti web predeterminati (Helvetica Neue, Helvetica, è Arial) sò stati abbandunati in Bootstrap 4 è rimpiazzati cù una "pila di font nativa" per una resa di testu ottimali in ogni dispositivu è OS. Leghjite più nantu à stacks di font nativu in questu articulu 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;

Nota chì, perchè a pila di fonti include fonti emoji, parechji caratteri cumuni di simboli / dingbat Unicode 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

Listi

Tutti i listi <ul>- , <ol>, è <dl>- sò margin-topstati eliminati è un margin-bottom: 1rem. Listi nidificati ùn anu micca margin-bottom.

  • 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
  1. Eccu una lista urdinata
  2. Cù uni pochi di elementi di lista
  3. Hà u listessu aspettu generale
  4. 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.

Testu preformattatu

L' <pre>elementu hè resettatu per sguassà u so margin-topè aduprà remunità per u so margin-bottom.

.elementu-esempiu {
  margin-bottom: 1rem;
}

Tavule

I tavulini 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 .tableclassa .

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 tavulinu Cellula di tavulinu Cellula di tavulinu Cellula di tavulinu
Cellula di tavulinu Cellula di tavulinu Cellula di tavulinu Cellula di tavulinu
Cellula di tavulinu Cellula di tavulinu Cellula di tavulinu Cellula di tavulinu

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.

Esempiu di legenda

100

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 u Titulu Fonte

Elementi in linea

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

Nulla attr vitae elit libero, a pharetra augue.

Riassuntu

U predeterminatu cursorin u riassuntu hè text, cusì avemu resettatu chì pointerper trasmette chì l'elementu pò esse interazzione 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. Mentre [hidden]ùn hè micca supportatu nativamente da IE10, a dichjarazione esplicita in u nostru CSS risolve stu prublema.

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