Ver en GitHub

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>:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$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};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

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

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 por defecto de la 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 y párrafos

Todos los elementos de encabezado—p. ej., <h1>—y <p> se reinician para eliminar su margin-top. Los encabezados tienen margin-bottom: .5rem añadido y los párrafos margin-bottom: 1rem para un espaciado fácil.

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

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.

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 algo más que también es súper largo 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

Soporte de input de fecha y color

Ten en cuenta que las entradas de fecha no son totalmente compatibles con todos los navegadores, concretamente Safari.

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

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

Full Name
first.last@example.com

Blockquote

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.

Summary

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 HTML5 `[hidden]`

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>

Incompatibilidad con jQuery

[hidden] no es compatible con los métodos $(...).hide() y $(...).show() de jQuery. Por lo tanto, actualmente no recomendamos especialmente [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 por defecto de la página

Pila de fuentes nativa

Encabezados y párrafos

Reglas horizontales

Listas

Código en línea

Bloques de código

Variables

Entrada del usuario

Salida de ejemplo

Tablas

Formularios

Soporte de input de fecha y color

Punteros en botones

Elementos varios

Dirección

Blockquote

Elementos en línea

Summary

Atributo HTML5 [hidden]

Incompatibilidad con jQuery

Atributo HTML5 `[hidden]`