Reboot

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

On this page

Enfoque

Reboot se basa en Normalize, proporcionando a muchos elementos HTML estilos algo opinados usando solo selectores de elementos. El estilo adicional se aplica solo con clases. Por ejemplo, reiniciamos algunos estilos de <table> para una base más simple y luego proporcionamos .table, .table-bordered, y más.

Aquí están nuestras directrices y razones para elegir qué sobrescribir en Reboot:

Actualizamos algunos valores predeterminados del navegador para usar rems en lugar de ems para un espaciado escalable de componentes.
Evita margin-top. Los márgenes verticales pueden colapsar, produciendo resultados inesperados. Más importante aún, una sola dirección de margin es un modelo mental más simple.
Para un escalado más fácil entre diferentes tamaños de dispositivo, los elementos de bloque deben usar rems para los margins.
Mantén las declaraciones de propiedades relacionadas con font al mínimo, usando inherit siempre que sea posible.

Variables CSS

Añadido en v5.2.0

Con v5.1.1, estandarizamos nuestros @imports requeridos en todos nuestros bundles CSS (incluyendo bootstrap.css, bootstrap-reboot.css y bootstrap-grid.css) para incluir _root.scss. Esto añade variables CSS a nivel :root a todos los bundles, independientemente de cuántas se usen en cada bundle. En última instancia, Bootstrap 5 continuará viendo más variables CSS añadidas con el tiempo, para proporcionar más personalización en tiempo real sin la necesidad de recompilar siempre Sass. Nuestro enfoque es tomar nuestras variables Sass fuente y transformarlas en variables CSS. De esta manera, incluso si no usas variables CSS, sigues teniendo todo el poder de Sass. Esto todavía está en progreso y tardará en implementarse completamente.

Por ejemplo, considera estas variables CSS de :root para estilos comunes de <body>:

scss/_root.scss

@if $font-size-root != null {
  --#{$prefix}root-font-size: #{$font-size-root};
}
--#{$prefix}body-font-family: #{inspect($font-family-base)};
@include rfs($font-size-base, --#{$prefix}body-font-size);
--#{$prefix}body-font-weight: #{$font-weight-base};
--#{$prefix}body-line-height: #{$line-height-base};
@if $body-text-align != null {
  --#{$prefix}body-text-align: #{$body-text-align};
}

--#{$prefix}body-color: #{$body-color};
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
--#{$prefix}body-bg: #{$body-bg};
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};

--#{$prefix}emphasis-color: #{$body-emphasis-color};
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};

--#{$prefix}secondary-color: #{$body-secondary-color};
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
--#{$prefix}secondary-bg: #{$body-secondary-bg};
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};

--#{$prefix}tertiary-color: #{$body-tertiary-color};
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
--#{$prefix}tertiary-bg: #{$body-tertiary-bg};
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};

En la práctica, esas variables se aplican luego en Reboot así:

scss/_reboot.scss

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Lo que te permite hacer personalizaciones en tiempo real como prefieras:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

Valores predeterminados de página

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

The box-sizing is globally set on every element—including *::before and *::after, to border-box. This ensures that the declared width of element is never exceeded due to padding or border.
- No se declara un font-size base en el <html>, pero se asume 16px (el valor predeterminado del navegador). Se aplica font-size: 1rem en el <body> para un escalado tipográfico responsivo fácil mediante media queries, respetando las preferencias del usuario y asegurando un enfoque más accesible. Este valor predeterminado del navegador se puede sobrescribir modificando la variable $font-size-root.
El <body> también establece un font-family, font-weight, line-height y color globales. Esto es heredado más adelante por algunos elementos de formulario para prevenir inconsistencias de fuentes.
Por seguridad, el <body> tiene un background-color declarado, con un valor predeterminado de #fff.

Pila de fuentes nativa

Bootstrap utiliza una “pila de fuentes nativa” o “pila de fuentes del sistema” para una renderización óptima del texto en cada dispositivo y sistema operativo. Estas fuentes del sistema han sido diseñadas específicamente pensando en los dispositivos actuales, con una renderización mejorada en pantallas, soporte de fuentes variables y más. Lee más sobre las pilas de fuentes nativas en este artículo de Smashing Magazine.

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue",
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Ten en cuenta que como la pila de fuentes incluye fuentes de emoji, muchos caracteres Unicode comunes de símbolos/dingbats se renderizarán como pictogramas multicolor. Su apariencia variará dependiendo del estilo usado en la fuente de emoji nativa del navegador/plataforma, y no se verán afectados por ningún estilo CSS color.

Este font-family se aplica al <body> y se hereda automáticamente de forma global en todo Bootstrap. Para cambiar el font-family global, actualiza $font-family-base y recompila Bootstrap.

Encabezados

Todos los elementos de encabezado—<h1>—<h6> tienen su margin-top eliminado, margin-bottom: .5rem establecido, y el line-height ajustado. Aunque los encabezados heredan su color por defecto, también puedes sobrescribirlo mediante una variable CSS opcional, --bs-heading-color.

Encabezado	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

Párrafos

Todos los elementos <p> tienen su margin-top eliminado y margin-bottom: 1rem establecido para un espaciado fácil.

Este es un párrafo de ejemplo.

html

<p>This is an example paragraph.</p>

Enlaces

Los enlaces tienen un color y subrayado predeterminados aplicados. Aunque los enlaces cambian en :hover, no cambian según si alguien :visited el enlace. Tampoco reciben estilos especiales de :focus.

Este es un enlace de ejemplo

html

<a href="#">This is an example link</a>

A partir de v5.3.x, el color de los enlaces se establece usando rgba() y nuevas variables CSS -rgb, permitiendo una personalización fácil de la opacidad del color del enlace. Cambia la opacidad del color del enlace con la variable CSS --bs-link-opacity:

Este es un enlace de ejemplo

html

<a href="#" style="--bs-link-opacity: .5">This is an example link</a>

Los enlaces de marcador de posición— aquellos sin un href—son seleccionados con un selector más específico y tienen su color y text-decoration restablecidos a sus valores predeterminados.

Este es un enlace de marcador de posición

html

<a>This is a placeholder link</a>

Reglas horizontales

El elemento <hr> se ha simplificado. Al igual que los valores por defecto del navegador, los <hr> se estilizan vía border-top, tienen un opacity: .25 por defecto, y heredan automáticamente su border-color vía color, incluyendo cuando color se establece vía el elemento padre. Se pueden modificar con las utilidades de texto, borde y opacidad.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Listas

Todas las listas—<ul>, <ol>, y <dl>—tienen su margin-top eliminado y un margin-bottom: 1rem. Las listas anidadas no tienen margin-bottom. También hemos reiniciado el padding-left en los elementos <ul> y <ol>.

Todas las listas tienen su margen superior eliminado
Y su margen inferior normalizado
Nested lists have no bottom margin
- Así tienen una apariencia más uniforme
- Particularmente cuando van seguidas de más elementos de lista
El padding izquierdo también ha sido reiniciado

Aquí hay una lista ordenada
Con algunos elementos de lista
Tiene el mismo aspecto general
Que la lista desordenada anterior

Para un estilo más simple, jerarquía clara y mejor espaciado, las listas de descripción tienen margins actualizados. Los <dd> reinician margin-left a 0 y añaden margin-bottom: .5rem. Los <dt> están en negrita.

Listas de descripción: Una lista de descripción es perfecta para definir términos.
Término: Definición del término.; Una segunda definición para el mismo término.
Otro término: Definición de este otro término.

Código en línea

Envuelve fragmentos de código en línea con <code>. Asegúrate de escapar los corchetes angulares de HTML.

Por ejemplo, <section> debe envolverse en línea.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Bloques de código

Usa <pre> para múltiples líneas de código. Una vez más, asegúrate de escapar cualquier corchete angular en el código para una renderización adecuada. El elemento <pre> se reinicia para eliminar su margin-top y usar unidades rem para su margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Variables

Para indicar variables usa la etiqueta <var>.

y = mx + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Entrada del usuario

Usa <kbd> para indicar entradas que normalmente se introducen mediante el teclado.

Para cambiar de directorio, escribe cd seguido del nombre del directorio.
Para editar los ajustes, presiona Ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>Ctrl</kbd> + <kbd>,</kbd></kbd>

Salida de ejemplo

Para indicar la salida de ejemplo de un programa usa la etiqueta <samp>.

Este texto está destinado a ser tratado como salida de ejemplo de un programa informático.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Tablas

Las tablas se ajustan ligeramente para dar estilo a los <caption>, colapsar los bordes y asegurar un text-align consistente en toda la tabla. Los cambios adicionales para bordes, padding y más vienen con la clase .table.

Esta es una tabla de ejemplo, y esta es su leyenda para describir el contenido.
Encabezado de tabla	Encabezado de tabla	Encabezado de tabla	Encabezado 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	Celda de tabla

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

Formularios

Varios elementos de formulario han sido reiniciados para estilos base más simples. Aquí están algunos de los cambios más destacados:

Los <fieldset> no tienen bordes, padding ni margin, por lo que pueden usarse fácilmente como contenedores para entradas individuales o grupos de entradas.
Los <legend>, al igual que los fieldsets, también han sido rediseñados para mostrarse como una especie de encabezado.
Los <label> se configuran con display: inline-block para permitir aplicar margin.
Los <input>, <select>, <textarea>, y <button> son manejados principalmente por Normalize, pero Reboot elimina su margin y también establece line-height: inherit.
Los <textarea> se modifican para que solo sean redimensionables verticalmente, ya que el redimensionamiento horizontal a menudo “rompe” el diseño de la página.
Los elementos <button> y los botones <input> tienen cursor: pointer cuando :not(:disabled).

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

Algunos tipos de inputs de fecha no son totalmente compatibles con las últimas versiones de Safari y Firefox.

Leyenda de ejemplo

Entrada de ejemplo

Email de ejemplo

Teléfono de ejemplo

URL de ejemplo

Número de ejemplo

Búsqueda de ejemplo

Rango de ejemplo

Entrada de archivo de ejemplo

Select de ejemplo

Marca esta casilla

La opción uno es esto y aquello La opción dos es otra cosa que también es súper larga para demostrar el ajuste de estos elegantes controles de formulario. La opción tres está deshabilitada

Textarea de ejemplo

Fecha de ejemplo

Hora de ejemplo

Contraseña de ejemplo

Fecha y hora local de ejemplo

Semana de ejemplo

Mes de ejemplo

Color de ejemplo

Salida de ejemplo 100

Punteros en botones

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

Botón de elemento no-button

html

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

Elementos varios

Dirección

El elemento <address> se actualiza para reiniciar el font-style predeterminado del navegador de italic a normal. Ahora line-height también se hereda, y se ha añadido margin-bottom: 1rem. Los <address> sirven para presentar información de contacto del ancestro más cercano (o de todo un cuerpo de trabajo). Conserva el formato terminando las líneas con <br>.

ACME Corporation
1123 Fictional St,
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

Cita en bloque

El margin predeterminado en las citas en bloque es 1em 40px, así que lo reiniciamos a 0 0 1rem para algo más consistente con otros elementos.

Una cita conocida, contenida en un elemento blockquote.

Alguien famoso en Título de la fuente

Elementos en línea

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

El elemento de abreviatura de HTML.

Resumen

El cursor predeterminado en summary es text, así que lo reiniciamos a pointer para transmitir que el elemento puede interactuarse haciendo clic en él.

Algunos detalles

Más información sobre los detalles.

Aún más detalles

Aquí hay aún más detalles sobre los detalles.

Atributo `[hidden]` de HTML5

HTML5 añade un nuevo atributo global llamado [hidden], que se estila como display: none por defecto. Tomando una idea de PureCSS, mejoramos este valor predeterminado haciendo [hidden] { display: none !important; } para ayudar a prevenir que su display se sobrescriba accidentalmente.

<input type="text" hidden>

Dado que [hidden] no es compatible con los métodos $(...).hide() y $(...).show() de jQuery, no respaldamos específicamente [hidden] sobre otras técnicas para gestionar el display de los elementos.

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

Reboot

Enfoque

Variables CSS

Valores predeterminados de página

Pila de fuentes nativa

Encabezados

Párrafos

Enlaces

Reglas horizontales

Listas

Código en línea

Bloques de código

Variables

Entrada del usuario

Salida de ejemplo

Tablas

Formularios

Punteros en botones

Elementos varios

Dirección

Cita en bloque

Elementos en línea

Resumen

Atributo [hidden] de HTML5

Atributo `[hidden]` de HTML5