Reiniciar

Reboot, una colección de cambios CSS específicos de elementos en un solo archivo, kickstart Bootstrap para proporcionar una línea de base elegante, consistente y simple sobre la que construir.

Acercarse

Reboot se basa en Normalize, proporcionando muchos elementos HTML con estilos algo obstinados utilizando solo selectores de elementos. El estilo adicional se realiza solo con clases. Por ejemplo, reiniciamos algunos <table> estilos para una línea de base más simple y más tarde proporcionamos .table , .table-bordered y más.

Aquí están nuestras pautas y razones para elegir qué anular en Reboot:

Actualice algunos valores predeterminados del navegador para usar rem s en lugar de em s para el espaciado de componentes escalable.
Evite margin-top . Los márgenes verticales pueden colapsar y producir resultados inesperados. Sin embargo, lo que es más importante, una sola dirección de margin es un modelo mental más simple.
Para facilitar el escalado entre los tamaños de dispositivos, los elementos de bloque deben usar rem s para margin s.
Mantenga las declaraciones de font propiedades relacionadas al mínimo, utilizando inherit siempre que sea posible.

Valores predeterminados de página

Los elementos <html> y <body> se actualizan para proporcionar mejores valores predeterminados en toda la página. Más específicamente:

Se box-sizing establece globalmente en todos los elementos, incluidos *::before y *::after , a border-box . Esto asegura que el ancho declarado del elemento nunca se exceda debido al relleno o al borde.
No font-size se declara ninguna base en el <html> , pero 16px se asume (el navegador predeterminado). font-size: 1rem se aplica en la <body> escala de tipos de fácil respuesta a través de consultas de medios respetando las preferencias del usuario y asegurando un enfoque más accesible.
El <body> también establece un mundial font-family , line-height y text-align . Esto se hereda más tarde por algunos elementos de formulario para evitar inconsistencias de fuentes.
Por motivos de seguridad, el <body> ha declarado background-color , por defecto #fff .

Pila de fuentes nativas

Las fuentes web predeterminadas (Helvetica Neue, Helvetica y Arial) se han eliminado en Bootstrap 4 y se han reemplazado por una "pila de fuentes nativas" para una representación de texto óptima en cada dispositivo y sistema operativo. Lea más sobre las pilas de fuentes nativas en este artículo de Smashing Magazine .

$font-family-sans-serif:
  // Default Typography
  "Reddit Sans",
  // 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",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Esto font-family se aplica a <body> y se hereda automáticamente de forma global a través de Bootstrap. Para cambiar el global font-family , actualice $font-family-base y recompile Bootstrap.

Encabezados y párrafos

Todos los elementos de encabezado, por ejemplo, <h1> y <p> se restablecen para que se margin-top eliminen. Se han margin-bottom: .5rem agregado títulos y párrafos margin-bottom: 1rem para facilitar el espaciado.

Bóveda	Ejemplo
`<h1></h1>`	h1. Encabezado de Bootstrap
`<h2></h2>`	h2. Encabezado de Bootstrap
`<h3></h3>`	h3. Encabezado de Bootstrap
`<h4></h4>`	h4. Encabezado de Bootstrap
`<h5></h5>`	h5. Encabezado de Bootstrap
`<h6></h6>`	h6. Encabezado de Bootstrap

Liza

Todas las listas— <ul> , <ol> y <dl> — se han margin-top eliminado y a margin-bottom: 1rem . Las listas anidadas no tienen margin-bottom .

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

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

Para un estilo más simple, una jerarquía clara y un mejor espaciado, las listas de descripción han actualizado margin s. <dd> s de reposición margin-left a 0 y complemento margin-bottom: .5rem . <dt> s están en negrita .

Listas de descripciones: Una lista de descripción es perfecta para definir términos.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida en eget metus.
Porta Malesuada: Etiam porta sem malesuada magna mollis euismod.

Texto preformateado

El <pre> elemento se reinicia para eliminar su margin-top y usar rem unidades para su margin-bottom .

.example-element {
  margin-bottom: 1rem;
}

Mesas

Las tablas se ajustan ligeramente a los estilos <caption> , contraen los bordes y garantizan la coherencia en text-align todas partes. Los cambios adicionales para los bordes, el relleno y más vienen con la .table clase .

Esta es una tabla de ejemplo, y este es su título para describir el contenido.
Encabezado de la tabla	Encabezado de la tabla	Encabezado de la tabla	Encabezado de la tabla
Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla
Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla
Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla

Formularios

Se han reiniciado varios elementos de formulario para estilos base más simples. Estos son algunos de los cambios más notables:

<fieldset> Los s no tienen bordes, relleno ni margen, por lo que se pueden usar fácilmente como envoltorios para entradas individuales o grupos de entradas.
<legend> s, como los conjuntos de campos, también se han rediseñado para mostrarse como una especie de encabezado.
<label> Los s están configurados para display: inline-block permitir margin su aplicación.
<input> s, <select> s, <textarea> s y <button> s son abordados principalmente por Normalize, pero Reboot elimina sus margin conjuntos line-height: inherit y también.
<textarea> Los mensajes de correo electrónico se modifican para que solo se puedan cambiar de tamaño verticalmente, ya que el cambio de tamaño horizontal a menudo "rompe" el diseño de la página.
<button> s y los <input> elementos button tienen cursor: pointer when :not(:disabled) .

Estos cambios, y más, se muestran a continuación.

Leyenda de ejemplo

Entrada de ejemplo

Ejemplo seleccionar

Marque esta casilla de verificación

La primera opción es esto y aquello La opción dos es algo más que también es muy largo para demostrar el envoltorio de estos elegantes controles de formulario. La opción tres está deshabilitada

Ejemplo textarea

Fecha de ejemplo

Tiempo de ejemplo

Salida de ejemplo 100

Punteros en botones

Reboot incluye una mejora para role="button" cambiar el cursor predeterminado a pointer . Agregue este atributo a los elementos para ayudar a indicar que los elementos son interactivos. Este rol no es necesario para los <button> elementos, que obtienen su propio cursor cambio.

Botón de elemento sin botón

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

Elementos misceláneos

Habla a

El <address> elemento se actualiza para restablecer el navegador predeterminado font-style de italic a normal . line-height ahora también se hereda y margin-bottom: 1rem se ha agregado. <address> s son para presentar la información de contacto del antepasado más cercano (o todo un trabajo). Conserve el formato terminando las líneas con <br> .

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

Nombre completo
first.last@example.com

Blockquote

El valor predeterminado margin en blockquotes es 1em 40px , por lo que lo restablecemos a 0 0 1rem algo más consistente con otros elementos.

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

Alguien famoso en el título fuente

Elementos en línea

El <abbr> elemento recibe un estilo básico para que se destaque entre el texto del párrafo.

Nulla attr vitae elit libero, un pharetra augue.

Resumen

El cursor resumen predeterminado es text , así que lo restablecemos pointer para transmitir que se puede interactuar con el elemento haciendo clic en él.

Algunos detalles

Más información sobre los detalles.

Aún más detalles

Aquí hay más detalles sobre los detalles.

`[hidden]` Atributo HTML5

HTML5 agrega un nuevo atributo global llamado [hidden] , que tiene el estilo display: none predeterminado. Tomando prestada una idea de PureCSS , mejoramos este valor predeterminado [hidden] { display: none !important; } para ayudar a evitar display que se anule accidentalmente. Si bien [hidden] IE10 no es compatible de forma nativa, la declaración explícita en nuestro CSS soluciona ese problema.

<input type="text" hidden>

incompatibilidad jQuery

[hidden] no es compatible con los métodos $(...).hide() y de jQuery $(...).show() . Por lo tanto, actualmente no respaldamos especialmente [hidden] otras técnicas para administrar los display elementos.

Para simplemente alternar la visibilidad de un elemento, lo que significa display que no se modifica y el elemento aún puede afectar el flujo del documento, use la .invisible clase en su lugar.