En GitHub

Reboot

Reboot, una colección de cambios CSS a elementos específicos en un solo archivo, punto de partida de Bootstrap para proporcionar una base elegante, consistente y simple sobre la cual construir.

🎉 ¡La traducción de Bootstrap 5.3 ya se encuentra disponible! (Estás en Bootstrap 5.1)
😎 Esta traducción es parte del proyecto esdocu.com.

En esta página

Enfoque

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

Estas son nuestras pautas y razones para elegir qué sobrescribir en Reboot:

Actualizar algunos valores predeterminados del navegador para usar rems en lugar de ems para el espaciado de componentes escalables.
Evitar margin-top. Los márgenes verticales pueden contraerse 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 escalar más fácilmente entre tamaños de dispositivos, los elementos de bloque deben usar rems para margins.
Mantener al mínimo las declaraciones de propiedades relacionadas con font, usando inherit siempre que sea posible.

Variables CSS

Añadido en v5.1.1

Con v5.1.1, estandarizamos nuestros @imports requeridos en todos nuestros bundles de CSS (incluidos bootstrap.css, bootstrap-reboot.css y bootstrap-grid.css para incluir _root.scss. Esto agrega variables CSS de nivel :root a todos los bundles, independientemente de cuántas de ellas se usen en ese bundle. En última instancia, Bootstrap 5 seguirá teniendo más variables CSS agregadas con el tiempo, para proporcionar más personalización en tiempo real sin la necesidad de volver a compilar siempre Sass. Nuestro enfoque es tomar nuestras variables fuente Sass y transformarlas en variables CSS. De esa manera, incluso si no usas variables CSS, todavía tienes todo el poder de Sass. Esto aún está en progreso y llevará tiempo implementarlo por completo.

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

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

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

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  font-size: var(--#{$variable-prefix}body-font-size);
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-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 quieras:

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

Valores de página predeterminados

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

El box-sizing se establece globalmente en cada elemento, incluidos *::before y *::after, en border-box. Esto asegura que nunca se exceda el ancho declarado del elemento debido al padding o al borde.
- No se declara font-size base en <html>, pero se asume 16px (el valor predeterminado del navegador). font-size: 1rem se aplica en el <body> para facilitar el escalado de tipos responsive a través de 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 de forma global font-family, font-weight, line-height y color. Esto lo heredan más adelante algunos elementos de formulario para evitar inconsistencias en las fuentes.
Por seguridad, <body> tiene un background-color declarado, por defecto es #fff.

Pila de fuentes nativas

Bootstrap utiliza una “pila de fuentes nativa” o “pila de fuentes del sistema” para una reproducción de texto óptima en todos los dispositivos y sistemas operativos. Estas fuentes del sistema se han diseñado específicamente teniendo en cuenta los dispositivos actuales, con una representación mejorada en las pantallas, compatibilidad con fuentes variables y más. Lee más sobre pilas de fuentes nativas en este artículo de Smashing Magazine.

$font-family-sans-serif:
  // Familia de fuentes genéricas multiplataforma (fuente de interfaz de usuario predeterminada)
  system-ui,
  // Safari para macOS y iOS (San Francisco)
  -apple-system,
  // 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;

Ten en cuenta que debido a que la pila de fuentes incluye fuentes emoji, muchos caracteres unicode comunes símbolos/dingbat, se representarán como pictogramas de varios colores. Su apariencia variará, según el estilo utilizado en la fuente emoji nativa del navegador/plataforma, y no se verán afectados por ningún estilo de color de CSS.

Esta font-family se aplica al <body> y se hereda automáticamente de forma global a través de Bootstrap. Para cambiar la font-family global, actualiza $font-family-base y vuelve a compilar Bootstrap.

Títulos y párrafos

Todos los elementos de encabezado, por ejemplo <h1>, y párrafos <p> se restablecen para eliminar su margin-top. Los encabezados tienen margin-bottom: .5rem agregado y los párrafos margin-bottom: 1rem para facilitar el espaciado.

Título	Ejemplo
`<h1></h1>`	h1. Encabezado Bootstrap
`<h2></h2>`	h2. Encabezado Bootstrap
`<h3></h3>`	h3. Encabezado Bootstrap
`<h4></h4>`	h4. Encabezado Bootstrap
`<h5></h5>`	h5. Encabezado Bootstrap
`<h6></h6>`	h6. Encabezado Bootstrap

Listas

Todas las listas, <ul>, <ol> y <dl>, tienen su margin-top eliminado y un margin-bottom: 1rem. Las listas anidadas no tienen un 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
Las listas anidadas no tienen margen inferior
- Así tienen una apariencia más pareja
- Particularmente cuando le siguen más elementos de la lista
El padding izquierdo también se ha restablecido

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

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

Listas de descripción: Una lista de descripción es perfecta para definir términos.
Plazo: 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 ajustarse en línea.

Por ejemplo, <code>&lt;section&gt;</code> debe ajustarse en línea.

Bloques de código

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

<p>Texto de ejemplo...</p>
<p>Y otra línea de ejemplo...</p>

<pre><code>&lt;p&gt;Texto de ejemplo...&lt;/p&gt;
&lt;p&gt;Y otra línea de ejemplo...&lt;/p&gt;
</code></pre>

Variables

Para indicar variables usa la etiqueta <var>.

y = mx + b

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

Entradas de usuario

Usa <kbd> para indicar la entrada que normalmente se ingresa a través del teclado.

Para cambiar de directorio, escribe cd seguido del nombre del directorio.
Para editar la configuración, presiona ctrl + ,

Para cambiar de directorio, escribe <kbd>cd</kbd> seguido del nombre del directorio.<br>
Para editar la configuración, presiona <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Salida de muestra

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

Este texto está destinado a ser tratado como resultado de muestra de un programa de computadora.

<samp>Este texto está destinado a ser tratado como resultado de muestra de un programa de computadora.</samp>

Tablas

Las tablas se ajustan ligeramente al estilo <caption>s, colapsan los bordes y aseguran una text-align consistente en todas partes. Los cambios adicionales para bordes, padding y más vienen con la clase .table.

Esta es una tabla de ejemplo, y este es su título para describir el contenido.
Título de tabla	Título de tabla	Título de tabla	Título 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

Formularios

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

<fieldset>s no tienen bordes, padding o margen, por lo que pueden usarse fácilmente como contenedores para inputs individuales o grupos de inputs.
Los <legend>s, como los fieldsets, también se han rediseñado para que se muestren como una especie de encabezado.
<label>s se establecen en display: inline-block para permitir que se aplique margin.
Los <input>s, <select>s, <textarea>s y <button>s son abordados principalmente por Normalize, pero Reboot elimina su margin y establece line-height: inherit también.
<textarea>s se modifican para que solo se pueda cambiar el tamaño verticalmente, ya que el cambio de tamaño horizontal a menudo “rompe” el diseño de la página.
Los elementos de botón <button>s y <input> tienen cursor: pointer cuando :not(:disabled).

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

Ejemplo de legend

Ejemplo de input

Ejemplo de email

Ejemplo de telephone

Ejemplo de url

Ejemplo de number

Ejemplo de search

Ejemplo de range

Ejemplo de file input

Ejemplo de select

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Ejemplo de textarea

Ejemplo de date

Ejemplo de time

Ejemplo de password

Ejemplo de datetime-local

Ejemplo de week

Ejemplo de month

Ejemplo de color

Ejemplo de output 100

Soporte de inputs de fecha y color

Ten en cuenta que los inputs de fecha no son totalmente compatibles por todos los navegadores, a saber, Safari.

Pointers en botones

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

Botón que no es un elemento button

<span role="button" tabindex="0">Botón que no es un elemento button</span>

Elementos misceláneos

Direcciones

El elemento <address> se actualiza para restablecer el font-style predeterminado del navegador de italic a normal. line-height ahora también se hereda, y se ha agregado margin-bottom: 1rem. Las <address> son para presentar la información de contacto. Preserva 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
[email protected]

Blockquote

El margin predeterminado en las blockquotes (comillas en bloque) es 1em 40px, por lo que lo restablecemos a 0 0 1rem para que sea algo más consistente con otros elementos.

Una cita conocida, contenida en un elemento blockquote.

Alguien famoso en Source Title

Elementos en línea

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

El elemento de abreviatura HTML.

Resumen

El cursor predeterminado en <summary> es text, por lo que lo restablecemos a 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 aún más detalles sobre los detalles.

Atributo HTML5 `[hidden]`

HTML5 agrega un nuevo atributo global llamado [hidden], que tiene el estilo display: none por defecto. Tomando prestada una idea de PureCSS, mejoramos este valor predeterminado haciendo [hidden] { display: none !important; } para ayudar a evitar que su display se sobrescriba accidentalmente.

<input type="text" hidden>

Incompatibilidad jQuery

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

Para alternar simplemente 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.