in English

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,
  // 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;

Teña en conta que, debido a que a pila de fontes inclúe fontes emoji, moitos caracteres Unicode de símbolos/dingbat comúns mostraranse como pictogramas de varias cores. A súa aparencia variará, dependendo do estilo empregado na fonte emoji nativa do navegador/plataforma, e non se verán afectados por ningún colorestilo CSS.

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.

Todas as listas teñen a súa marxe superior eliminada
E a súa marxe inferior normalizouse
As listas aniñadas non teñen marxe inferior
- Deste xeito teñen un aspecto máis uniforme
- Especialmente cando vai seguido de máis elementos da lista
Tamén se restableceu o recheo esquerdo

Aquí tes unha lista ordenada
Con algúns elementos da lista
Ten o mesmo aspecto xeral
Como a lista anterior sen ordenar

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.
Prazo: Definición para o termo.; Unha segunda definición para o mesmo termo.
Outro termo: Definición para este outro termo.

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.

Punteros nos botóns

O reinicio inclúe unha mellora para role="button"cambiar o cursor predeterminado a pointer. Engade este atributo aos elementos para indicar que os elementos son interactivos. Este papel non é necesario para <button>os elementos, que reciben o seu propio cursorcambio.

Botón de elemento sen botón

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

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.

Unha cita coñecida, contida nun elemento blockquote.

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 .