Source

Reinicie

Reiniciar, unha colección de cambios de CSS específicos de elementos nun único ficheiro, inicia Bootstrap para proporcionar unha liña de base elegante, consistente e sinxela para construír.

Aproximación

O reinicio baséase en Normalize, proporcionando moitos elementos HTML con estilos algo obstinados usando só selectores de elementos. O estilo adicional realízase só coas clases. Por exemplo, reiniciamos algúns <table>estilos para obter unha liña de base máis sinxela e máis tarde fornecemos .table, .table-bordered, etc.

Estas son as nosas directrices e os motivos para escoller o que quere anular no reinicio:

Actualice algúns valores predeterminados do navegador para usar rems en lugar de ems para o espazamento de compoñentes escalables.
Evitar margin-top. As marxes verticais poden colapsar, producindo resultados inesperados. Máis importante aínda, unha única dirección marginé un modelo mental máis sinxelo.
Para facilitar a escala entre os tamaños dos dispositivos, os elementos de bloque deberían usar rems para margins.
Mantén as declaracións de fontpropiedades relacionadas ao mínimo, utilizando inheritsempre que sexa posible.

Valores predeterminados da páxina

Os elementos <html>e <body>actualízanse para ofrecer mellores valores predeterminados en toda a páxina. Máis concretamente:

Establécese box-sizingglobalmente en todos os elementos, incluíndo *::beforee *::after, a border-box. Isto garante que o ancho declarado do elemento nunca se exceda debido ao recheo ou ao bordo.
Non se declara ningunha base font-sizeno <html>, pero 16pxasúmese (o navegador predeterminado). font-size: 1remaplícase <body>para facilitar a escala de tipos de resposta mediante consultas de medios respectando as preferencias do usuario e garantindo un enfoque máis accesible.
Tamén <body>establece un global font-family, line-height, e text-align. Isto é herdado máis tarde por algúns elementos do formulario para evitar incoherencias de fontes.
Por seguridade, <body>ten un declarado background-color, por defecto #fff.

Pila de fontes nativas

As fontes web predeterminadas (Helvetica Neue, Helvetica e Arial) foron eliminadas en Bootstrap 4 e substituíronse por unha "pila de fontes nativas" para unha representación óptima do texto en cada dispositivo e sistema operativo. Lea máis sobre as pilas de fontes nativas neste artigo 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;

Isto font-familyaplícase ao <body>e herdarase automaticamente globalmente en Bootstrap. Para cambiar a versión global font-family, actualice $font-family-basee recompile Bootstrap.

Títulos e parágrafos

Todos os elementos de título, por exemplo, <h1>e <p>restablecéronse para que se margin-topeliminen. Engadíronse títulos margin-bottom: .5reme parágrafos margin-bottom: 1rempara facilitar o espazado.

Título	Exemplo
`<h1></h1>`	h1. Título de bootstrap
`<h2></h2>`	h2. Título de bootstrap
`<h3></h3>`	h3. Título de bootstrap
`<h4></h4>`	h4. Título de bootstrap
`<h5></h5>`	h5. Título de bootstrap
`<h6></h6>`	h6. Título de bootstrap

Listas

Elimínanse todas as listas— <ul>, <ol>, e <dl>— margin-tope un margin-bottom: 1rem. As listas aniñadas non teñen 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 portttitor 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 portttitor Lorem

Para un estilo máis sinxelo, xerarquía clara e mellor espazo, as listas de descricións actualizaron margins. <dd>s restablecer margin-lefte 0engadir margin-bottom: .5rem. <dt>s están en negra .

Listas de descricións: Unha lista de descricións é perfecta para definir termos.
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.

Texto preformateado

O <pre>elemento restableceuse para eliminar o seu margin-tope utilizar remunidades para o seu margin-bottom.

.elemento-exemplo {
  marxe-inferior: 1rem;
}

Táboas

As táboas axústanse lixeiramente ao estilo <caption>s, contraen bordos e garanten a coherencia text-alignen todo momento. Os cambios adicionais para os bordos, o recheo e moito máis veñen coa .tableclase .

Esta é unha táboa de exemplo, e este é o seu título para describir o contido.
Título da táboa	Título da táboa	Título da táboa	Título da táboa
Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa
Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa
Cela da táboa	Cela da táboa	Cela da táboa	Cela da táboa

Formularios

Varios elementos de formulario foron reiniciados para estilos de base máis sinxelos. Estes son algúns dos cambios máis salientables:

<fieldset>s non teñen bordos, recheos ou marxes polo que poden usarse facilmente como envoltorios para entradas individuais ou grupos de entradas.
<legend>s, como os conxuntos de campos, tamén foron rediseñados para mostrarse como un tipo de título.
<label>s están configurados display: inline-blockpara permitir marginque se apliquen.
<input>s, <select>s, <textarea>s e <button>s son abordados principalmente por Normalize, pero Reboot tamén elimina os seus margine sets line-height: inherit.
<textarea>s modifícanse para que só se poidan cambiar de tamaño verticalmente xa que o cambio de tamaño horizontal a miúdo "rompe" o deseño da páxina.
<button>s e <input>os elementos botón teñen cursor: pointercando :not(:disabled).

Estes cambios, e máis, móstranse a continuación.

Varios elementos

Enderezo

O <address>elemento actualízase para restablecer a configuración predeterminada do navegador font-stylede italica normal. line-heightagora tamén se herda e margin-bottom: 1remfoi engadido. <address>s son para presentar información de contacto para o antepasado máis próximo (ou todo un traballo). Conserva o formato rematando as liñas con <br>.

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

Nome completo
[email protected]

Cita de bloque

O predeterminado marginen blockquotes é 1em 40px, polo que restablecemos iso 0 0 1rempara algo máis consistente con outros elementos.

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

Alguén famoso en Source Title

Elementos en liña

O <abbr>elemento recibe un estilo básico para que se destaque entre o texto dos parágrafos.

Nulla attr vitae elit libero, a pharetra augue.

Resumo

cursorO resumo predeterminado é text, polo que restablecemos iso para pointerindicar que se pode interactuar co elemento facendo clic nel.

Algúns detalles

Máis información sobre os detalles.

Aínda máis detalles

Aquí tes aínda máis detalles sobre os detalles.

`[hidden]`atributo HTML5

HTML5 engade un novo atributo global chamado[hidden] , que ten o estilo display: nonepredeterminado. Tomando prestada unha idea de PureCSS , melloramos esta opción predeterminada [hidden] { display: none !important; }para axudar a evitar que displayse anule accidentalmente. Aínda [hidden]que IE10 non é compatible de forma nativa, a declaración explícita do noso CSS soluciona ese problema.

<input type="text" hidden>

Incompatibilidade de jQuery

[hidden]non é compatible con jQuery $(...).hide()e $(...).show()métodos. Polo tanto, actualmente non avalamos especialmente [hidden]outras técnicas para xestionar os displayelementos.

Para simplemente cambiar a visibilidade dun elemento, o que significa displayque non se modifica e que o elemento aínda pode afectar o fluxo do documento, use a .invisibleclase .