Reinicieu

Reboot, una col·lecció de canvis CSS específics d'elements en un sol fitxer, inicia Bootstrap per proporcionar una línia de base elegant, coherent i senzilla sobre la qual es basa.

Aproximació

El reinici es basa en Normalize, proporcionant molts elements HTML amb estils una mica opiniosos utilitzant només selectors d'elements. L'estil addicional només es fa amb les classes. Per exemple, reiniciem alguns <table>estils per a una línia de base més senzilla i més tard proporcionem .table, .table-bordered, i més.

A continuació, es mostren les nostres directrius i els motius per triar què anul·lar al reiniciar:

Actualitzeu alguns valors predeterminats del navegador per utilitzar rems en lloc de ems per a l'espaiat de components escalable.
Evitar margin-top. Els marges verticals poden col·lapsar-se, donant resultats inesperats. El que és més important, però, una única direcció marginés un model mental més simple.
Per a una escala més fàcil entre les mides del dispositiu, els elements de bloc haurien d'utilitzar rems per margins.
Manteniu les declaracions de fontpropietats relacionades amb el mínim, utilitzant inheritsempre que sigui possible.

Valors predeterminats de la pàgina

Els elements <html>i <body>s'actualitzen per oferir millors valors predeterminats a tota la pàgina. Més específicament:

El box-sizings'estableix globalment en tots els elements, inclosos *::beforei *::after, a border-box. Això garanteix que l'amplada declarada de l'element mai es superi a causa del farciment o la vora.
No font-sizees declara cap base a <html>, però 16pxs'assumeix (el navegador predeterminat). font-size: 1rems'aplica a l' <body>escalat de tipus de resposta fàcil mitjançant consultes multimèdia respectant les preferències de l'usuari i garantint un enfocament més accessible.
També <body>estableix un global font-family, line-height, i text-align. Això s'hereta més tard per alguns elements del formulari per evitar incoherències de tipus de lletra.
Per seguretat, <body>té una declarada background-color, per defecte #fff.

Pila de tipus de lletra nativa

Els tipus de lletra web predeterminats (Helvetica Neue, Helvetica i Arial) s'han eliminat a Bootstrap 4 i s'han substituït per una "pila de fonts natives" per a una representació de text òptima a tots els dispositius i SO. Llegiu més sobre les piles de fonts natives en aquest article de 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;

Tingueu en compte que, com que la pila de tipus de lletra inclou tipus de lletra emoji, molts caràcters Unicode de símbols/dingbat comuns es representaran com a pictogrames de diversos colors. La seva aparença variarà, depenent de l'estil utilitzat al tipus de lletra emoji natiu del navegador/plataforma, i no es veuran afectats per cap colorestil CSS.

Això font-familys'aplica a <body>i s'hereta automàticament a tot Bootstrap. Per canviar el global font-family, actualitzeu $font-family-basei recompileu Bootstrap.

Encapçalaments i paràgrafs

Tots els elements d'encapçalament, per exemple, <h1>i <p>es reinicien per margin-topeliminar-los. S'han afegit encapçalaments margin-bottom: .5remi paràgrafs margin-bottom: 1remper facilitar l'espaiat.

Encapçalament	Exemple
`<h1></h1>`	h1. Encapçalament d'arrencada
`<h2></h2>`	h2. Encapçalament d'arrencada
`<h3></h3>`	h3. Encapçalament d'arrencada
`<h4></h4>`	h4. Encapçalament d'arrencada
`<h5></h5>`	h5. Encapçalament d'arrencada
`<h6></h6>`	h6. Encapçalament d'arrencada

Llistes

Totes les llistes— <ul>, <ol>, i <dl>—s'han margin-topeliminat i un margin-bottom: 1rem. Les llistes imbricades no tenen margin-bottom.

Totes les llistes tenen el seu marge superior eliminat
I el seu marge inferior es va normalitzar
Les llistes imbricades no tenen marge inferior
- D'aquesta manera tenen un aspecte més uniforme
- Sobretot quan va seguit de més elements de la llista
El farciment esquerre també s'ha restablert

Aquí teniu una llista ordenada
Amb uns quants elements de la llista
Té el mateix aspecte general
Com la llista no ordenada anterior

Per a un estil més senzill, una jerarquia clara i un millor espaiat, les llistes de descripcions han actualitzat margins. s'ha de <dd>restablir i afegir . s estan en negreta .margin-left0margin-bottom: .5rem<dt>

Llistes de descripció: Una llista de descripció és perfecta per definir termes.
Terme: Definició del terme.; Una segona definició per al mateix terme.
Un altre terme: Definició per a aquest altre terme.

Text preformatat

L' <pre>element es reinicia per eliminar-ne margin-topi utilitzar remunitats per al seu margin-bottom.

.example-element {
  marge inferior: 1rem;
}

Taules

Les taules s'ajusten lleugerament a l'estil <caption>s, redueixen les vores i garanteixen la coherència text-aligna tot arreu. La .tableclasse inclou canvis addicionals per a les vores, el farciment i molt més .

Aquesta és una taula d'exemple i aquest és el seu títol per descriure el contingut.
Encapçalament de la taula	Encapçalament de la taula	Encapçalament de la taula	Encapçalament de la taula
Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula
Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula
Cel·la de la taula	Cel·la de la taula	Cel·la de la taula	Cel·la de la taula

Formes

S'han reiniciat diversos elements de formulari per a estils bàsics més senzills. Aquests són alguns dels canvis més destacats:

<fieldset>No tenen vores, farciment ni marge, de manera que es poden utilitzar fàcilment com a embolcall per a entrades individuals o grups d'entrades.
<legend>s, com els conjunts de camps, també s'han redissenyat per mostrar-se com una mena d'encapçalament.
<label>s s'estableixen a display: inline-blockper permetre marginl'aplicació.
<input>s, <select>s, <textarea>s i <button>s s'aborden principalment per Normalize, però Reboot també elimina els seus margini sets line-height: inherit.
<textarea>s es modifiquen perquè només es puguin canviar de mida verticalment, ja que el canvi de mida horitzontal sovint "interromp" el disseny de la pàgina.
<button>Els elements s i <input>botó tenen cursor: pointerquan :not(:disabled).

Aquests canvis, i més, es mostren a continuació.

Punters als botons

Reiniciar inclou una millora per role="button"canviar el cursor predeterminat a pointer. Afegiu aquest atribut als elements per ajudar a indicar que els elements són interactius. Aquest paper no és necessari per als <button>elements, que aconsegueixen el seu propi cursorcanvi.

Botó d'element sense botó

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

Elements diversos

adreça

L' <address>element s'actualitza per restablir el valor predeterminat font-styledel navegador de italica normal. line-heightara també s'hereta i margin-bottom: 1rems'ha afegit. <address>s són per presentar informació de contacte de l'avantpassat més proper (o d'un conjunt de treballs). Conserva el format acabant les línies amb <br>.

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

Nom complet
[email protected]

Cita de bloc

El valor predeterminat marginde les quotes de bloc és 1em 40px, de manera que ho restablirem a 0 0 1remuna cosa més coherent amb altres elements.

Una cita coneguda, continguda en un element blockquote.

Algú famós a Source Title

Elements en línia

L' <abbr>element rep un estil bàsic per fer-lo destacar entre el text del paràgraf.

Nulla attr vitae elit libero, a pharetra augue.

Resum

cursorEl resum per defecte és text, de manera que ho restablirem a pointerper transmetre que es pot interactuar amb l'element fent-hi clic.

Alguns detalls

Més informació sobre els detalls.

Encara més detalls

Aquí hi ha encara més detalls sobre els detalls.

`[hidden]`Atribut HTML5

HTML5 afegeix un nou atribut global anomenat[hidden] , que té l'estil display: nonepredeterminat. Prenent en préstec una idea de PureCSS , millorem aquesta predeterminada per [hidden] { display: none !important; }ajudar a evitar que s'anul·liqui displayaccidentalment. Tot i que [hidden]IE10 no és compatible de manera nativa, la declaració explícita del nostre CSS soluciona aquest problema.

<input type="text" hidden>

Incompatibilitat de jQuery

[hidden]no és compatible amb jQuery $(...).hide()i $(...).show()mètodes. Per tant, actualment no avalem especialment [hidden]altres tècniques per gestionar els displayelements.

Per només canviar la visibilitat d'un element, és a dir, displayno es modifica i l'element encara pot afectar el flux del document, utilitzeu la .invisibleclasse .