Reboot

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

En esta página

Enfoque

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

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

Actualizar algunos valores predeterminados del navegador para usar rem en lugar de em para un espaciado de componentes escalable.
Evitar margin-top. Los márgenes verticales pueden colapsar, produciendo resultados inesperados. Sin embargo, lo más importante es que una sola dirección de margin es un modelo mental más simple.
Para una escalabilidad más fácil en todos los tamaños de dispositivos, los elementos de bloque deben usar rem para los margins.
Mantener las declaraciones de propiedades relacionadas con font al mínimo, utilizando inherit siempre que sea posible.

Variables CSS

Agregado en v5.2.0

Con la v5.1.1, estandarizamos nuestras importaciones (@import) requeridas en todos nuestros paquetes CSS (incluidos bootstrap.css, bootstrap-reboot.css y bootstrap-grid.css) para incluir _root.scss. Esto agrega variables CSS a nivel de :root a todos los paquetes, independientemente de cuántos de ellos se utilicen en ese paquete. En última instancia, Bootstrap 5 continuará viendo más variables CSS agregadas con el tiempo, con el fin de proporcionar más personalización en tiempo real sin la necesidad de recompilar siempre Sass. Nuestro enfoque es tomar nuestras variables Sass de origen y transformarlas en variables CSS. De esa manera, incluso si no usas variables CSS, todavía tienes todo el poder de Sass. Esto todavía está en progreso y tomará tiempo implementarse por completo.

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 de la siguiente manera:

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 realizar personalizaciones en tiempo real como quieras:

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

Valores predeterminados de la página

Los elementos <html> y <body> se actualizan para proporcionar mejores valores predeterminados en 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 el ancho declarado del elemento nunca se exceda debido al relleno o al borde.
- No se declara un font-size base en el <html>, pero se asumen 16px (el valor predeterminado del navegador). Se aplica font-size: 1rem en el <body> para un escalado responsivo de tipografía fácil a través de consultas de medios (media queries) mientras se respetan las preferencias del usuario y se garantiza un enfoque más accesible. Este valor predeterminado del navegador se puede anular modificando la variable $font-size-root.
El <body> también establece un font-family, font-weight, line-height y color globales. Esto se hereda más tarde por algunos elementos de formulario para evitar inconsistencias de fuente.
Por seguridad, el <body> tiene un background-color declarado, que por defecto es #fff.

Pila de fuentes nativa

Bootstrap utiliza una "pila de fuentes nativas" o "pila de fuentes del sistema" para un renderizado de texto óptimo en cada dispositivo y sistema operativo. Estas fuentes del sistema se han diseñado específicamente teniendo en cuenta los dispositivos actuales, con un renderizado mejorado en pantallas, compatibilidad con 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 debido a que la pila de fuentes incluye fuentes emoji, muchos caracteres Unicode de símbolos/dingbats comunes se renderizarán como pictogramas multicolores. 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 CSS de color.

Esta font-family se aplica al <body> y se hereda automáticamente a nivel global en todo Bootstrap. Para cambiar la font-family global, actualiza $font-family-base y recompila Bootstrap.

Encabezados

Todos los elementos de encabezado (<h1> a <h6>) tienen su margin-top eliminado, margin-bottom: .5rem establecido y line-height ajustado. Si bien los encabezados heredan su color por defecto, también puedes anularlo a través de la 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>Este es un párrafo de ejemplo.</p>

Enlaces

Los enlaces tienen un color predeterminado y un subrayado aplicado. Si bien los enlaces cambian al pasar el cursor (:hover), no cambian en función de si alguien ha visitado (:visited) el enlace. Tampoco reciben estilos especiales de foco (:focus).

Este es un enlace de ejemplo

html

<a href="#">Este es un enlace de ejemplo</a>

A partir de la v5.3.x, el color del enlace se establece usando rgba() y nuevas variables CSS -rgb, lo que permite una fácil personalización 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">Este es un enlace de ejemplo</a>

Los enlaces de marcador de posición (aquellos sin un href) se dirigen 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>Este es un enlace de marcador de posición</a>

Reglas horizontales

El elemento <hr> se ha simplificado. Al igual que los valores predeterminados del navegador, los <hr> tienen estilo a través de border-top, tienen una opacity: .25 predeterminada y heredan automáticamente su border-color a través de color, incluso cuando color se establece a través del padre. Se pueden modificar con 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 restablecido 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
- De esta manera tienen una apariencia más uniforme
- Particularmente cuando van seguidas de más elementos de lista
El relleno izquierdo también se ha restablecido

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

Para un estilo más simple, una jerarquía clara y un mejor espaciado, las listas de descripción tienen márgenes (margin) actualizados. Los <dd> restablecen margin-left a 0 y agregan 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 para el término.; Una segunda definición para el mismo término.
Otro término: Definición para 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 como en línea.

html

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

Bloques de código

Usa <pre> 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 aquí...</p>
<p>Y otra línea de texto de ejemplo aquí...</p>

html

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

Variables

Para indicar variables, utiliza la etiqueta <var>.

y = mx + b

html

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

Entrada del usuario

Utiliza la etiqueta <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 + ,

html

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 ejemplo

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

Este texto está destinado a ser tratado como una salida de ejemplo de un programa de computadora.

html

<samp>Este texto está destinado a ser tratado como una salida de ejemplo de un programa de computadora.</samp>

Tablas

Las tablas se ajustan ligeramente para dar estilo a las <caption>s, colapsar los bordes y garantizar una text-align uniforme en todo momento. Los cambios adicionales para bordes, relleno 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>
    Esta es una tabla de ejemplo, y esta es su leyenda para describir el contenido.
  </caption>
  <thead>
    <tr>
      <th>Encabezado de tabla</th>
      <th>Encabezado de tabla</th>
      <th>Encabezado de tabla</th>
      <th>Encabezado de tabla</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Celda de tabla</td>
      <td>Celda de tabla</td>
      <td>Celda de tabla</td>
      <td>Celda de tabla</td>
    </tr>
    <tr>
      <td>Celda de tabla</td>
      <td>Celda de tabla</td>
      <td>Celda de tabla</td>
      <td>Celda de tabla</td>
    </tr>
    <tr>
      <td>Celda de tabla</td>
      <td>Celda de tabla</td>
      <td>Celda de tabla</td>
      <td>Celda de tabla</td>
    </tr>
  </tbody>
</table>

Formularios

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

Los <fieldset> no tienen bordes, relleno ni margen, por lo que se pueden usar fácilmente como contenedores para entradas individuales o grupos de entradas.
Las <legend>s, al igual que los fieldsets, también se han rediseñado para mostrarse como una especie de encabezado.
Las <label> se establecen en display: inline-block para permitir que se aplique el margen (margin).
Los <input>s, <select>s, <textarea>s, y <button>s se abordan principalmente en Normalize, pero Reboot elimina su margin y establece line-height: inherit también.
Las <textarea> 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.
Los <button>s y los elementos de botón <input> tienen cursor: pointer cuando están en :not(:disabled).

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

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

Leyenda de ejemplo

Entrada de ejemplo

Correo electrónico 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

Selección de ejemplo

Marcar 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 la envoltura de estos elegantes controles de formulario. La opción tres está deshabilitada

Área de texto 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. Agrega este atributo a los elementos para ayudar a indicar que son interactivos. Este rol no es necesario para los elementos <button>, que obtienen su propio cambio de cursor.

Botón de elemento que no es botón

html

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

Elementos varios

Dirección

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

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

Nombre completo
[email protected]

Blockquote

El margin predeterminado en las citas 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 Título de la fuente

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

HTML5 agrega un nuevo atributo global llamado [hidden], que tiene el estilo display: none de forma predeterminada. Tomando prestada una idea de PureCSS, mejoramos este valor predeterminado haciendo que [hidden] { display: none !important; } ayude a evitar que su display se anule 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 administrar 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

¿Te gustó esta traducción?

Enfoque

Variables CSS

Valores predeterminados de la 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

Blockquote

Elementos en línea

Resumen

Atributo [hidden] de HTML5

Atributo `[hidden]` de HTML5