Source

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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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.
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

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

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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 .