in English

Reiniciar

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

En esta página

Acercarse

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 <table>estilos para una línea de base más simple y luego proporcionamos .table, .table-borderedy más.

Estas son nuestras pautas y razones para elegir qué anular en Reiniciar:

Actualice 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 margines 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.
Mantenga las declaraciones de fontpropiedades relacionadas con - al mínimo, utilizando inheritsiempre que sea posible.

Variables CSS

Añadido en v5.2.0

Con v5.1.1, estandarizamos nuestros correos electrónicos requeridos @importen todos nuestros paquetes de CSS (incluidos bootstrap.css, bootstrap-reboot.cssy bootstrap-grid.css) para incluir _root.scss. Esto agrega :rootvariables CSS de nivel a todos los paquetes, independientemente de cuántos de ellos se usen en ese paquete. En última instancia, Bootstrap 5 seguirá viendo más variables CSS agregadas con el tiempo, para proporcionar una mayor personalización en tiempo real sin la necesidad de volver a compilar Sass siempre. Nuestro enfoque es tomar nuestras variables Sass de origen y transformarlas en variables CSS. De esa manera, incluso si no usa variables CSS, aún tiene todo el poder de Sass. Esto todavía está en progreso y llevará tiempo implementarlo por completo.

Por ejemplo, considere estas :rootvariables CSS para <body>estilos comunes:

  @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 en Reiniciar 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 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:

box-sizingse establece globalmente en todos los elementos, incluidos y *::before, *::afterhasta border-box. Esto asegura que nunca se exceda el ancho declarado del elemento debido al relleno o al borde.
- No font-sizese declara ninguna base en el <html>, pero 16pxse asume (el valor predeterminado del navegador). font-size: 1remse aplica en el <body>para facilitar el escalado de tipos de respuesta a través de consultas de medios, respetando las preferencias del usuario y asegurando un enfoque más accesible. Este valor predeterminado del navegador se puede anular modificando la $font-size-rootvariable.
El <body>también establece un global font-family, font-weight, line-heighty color. Esto lo heredan más adelante algunos elementos de formulario para evitar inconsistencias en las fuentes.
Por seguridad, <body>tiene un background-color, predeterminado a #fff.

Pila de fuentes nativas

Bootstrap utiliza una "pila de fuentes nativa" o "pila de fuentes del sistema" para una representación de texto óptima en cada dispositivo y sistema operativo. 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. Lea más sobre 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;

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

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

Títulos y párrafos

Todos los elementos de encabezado, por ejemplo, <h1>y <p>se restablecen para que se margin-topeliminen. Se han agregado encabezados margin-bottom: .5remy párrafos margin-bottom: 1rempara facilitar el espaciado.

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

Reglas horizontales

El <hr>elemento se ha simplificado. De manera similar a los valores predeterminados del navegador, los correos electrónicos tienen un <hr>estilo a través border-topde , tienen un valor predeterminado opacity: .25y heredan automáticamente su border-colorvía color, incluso cuando colorse 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">

Liza

Todas las listas— <ul>, <ol>y <dl>— tienen su margin-topeliminación y un margin-bottom: 1rem. Las listas anidadas no tienen margin-bottom. También hemos reiniciado los elementos padding-lefton <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 le siguen más elementos de la lista
El relleno 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 margins. <dd>s restablecer margin-lefty 0agregar margin-bottom: .5rem. <dt>s 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

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

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

html

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

Bloques de código

Utilice <pre>s para varias líneas de código. Una vez más, asegúrese de escapar de los corchetes angulares en el código para una representación adecuada. El <pre>elemento se restablece para eliminar su margin-topy usar remunidades 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 utilice la <var>etiqueta.

y = metro x + segundo

html

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

Entrada del usuario

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

Para cambiar de directorio, escriba cdseguido del nombre del directorio.
Para editar la configuración, presione 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 muestra

Para indicar la salida de muestra de un programa, use la <samp>etiqueta.

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

html

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

Mesas

Las tablas se ajustan ligeramente a los estilos <caption>, colapsan los bordes y garantizan la coherencia text-alignen todas partes. Los cambios adicionales para bordes, relleno y más vienen con la .tableclase .

Esta es una tabla de ejemplo, y este es su título 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

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

<fieldset>Los correos electrónicos no tienen bordes, relleno ni márgenes, por lo que se pueden usar fácilmente como envoltorios para entradas individuales o grupos de entradas.
<legend>Los correos electrónicos, al igual que los conjuntos de campos, también se han rediseñado para que se muestren como una especie de encabezado.
<label>s están configurados para display: inline-blockpermitir marginque se apliquen.
<input>s, <select>s, <textarea>s y <button>s son principalmente abordados por Normalize, pero Reboot también elimina sus marginy conjuntos line-height: inherit.
<textarea>Los 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.
<button>Los elementos s y <input>button tienen cursor: pointerwhen :not(:disabled).

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

Leyenda de ejemplo

Entrada de ejemplo

Ejemplo de correo electrónico

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

Marque esta casilla de verificación

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

Ejemplo de área de texto

Fecha de ejemplo

tiempo de ejemplo

Ejemplo de contraseña

Ejemplo datetime-local

Semana de ejemplo

Mes de ejemplo

color de ejemplo

Salida de ejemplo 100

Soporte de entrada de fecha y color

Tenga en cuenta que las entradas de fecha no son totalmente compatibles con todos los navegadores, a saber, Safari.

Punteros en los botones

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

Botón de elemento sin botón

html

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

elementos misceláneos

Dirección

El <address>elemento se actualiza para restablecer el valor predeterminado del navegador font-stylede italica normal. line-heightahora también se hereda y margin-bottom: 1remse ha agregado. <address>Los correos electrónicos son para presentar la información de contacto del antepasado más cercano (o de todo un cuerpo de trabajo). Preserve el formato terminando las líneas con <br>.

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

Nombre completo
[email protected]

Cita en bloque

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

Una cita conocida, contenida en un elemento blockquote.

Alguien famoso en 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.

El elemento de abreviatura HTML .

Resumen

cursorEl resumen predeterminado es text, por lo que lo restablecemos pointerpara 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.

`[hidden]`atributo HTML5

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

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

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

Reiniciar

Acercarse

Variables CSS

Valores predeterminados de la página

Pila de fuentes nativas

Títulos y párrafos

Reglas horizontales

Liza

código en línea

Bloques de código

Variables

Entrada del usuario

Salida de muestra

Mesas

Formularios

Soporte de entrada de fecha y color

Punteros en los botones

elementos misceláneos

Dirección

Cita en bloque

elementos en línea

Resumen

[hidden]atributo HTML5

incompatibilidad jQuery

`[hidden]`atributo HTML5