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.
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-bordered
y más.
Estas son nuestras pautas y razones para elegir qué anular en Reiniciar:
- Actualice algunos valores predeterminados del navegador para usar
rem
s en lugar deem
s 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 demargin
es un modelo mental más simple. - Para escalar más fácilmente entre tamaños de dispositivos, los elementos de bloque deben usar
rem
s paramargin
s. - Mantenga las declaraciones de
font
propiedades relacionadas con - al mínimo, utilizandoinherit
siempre que sea posible.
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-sizing
se establece globalmente en todos los elementos, incluidos y*::before
,*::after
hastaborder-box
. Esto asegura que nunca se exceda el ancho declarado del elemento debido al relleno o al borde.- No
font-size
se declara ninguna base en el<html>
, pero16px
se asume (el valor predeterminado del navegador).font-size: 1rem
se 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-root
variable.
- No
- El
<body>
también establece un globalfont-family
,font-weight
,line-height
ycolor
. Esto lo heredan más adelante algunos elementos de formulario para evitar inconsistencias en las fuentes. - Por seguridad,
<body>
tiene unbackground-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,
// 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;
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 de varios colores. 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 color
estilo CSS.
Esto font-family
se aplica <body>
y se hereda automáticamente de forma global a través de Bootstrap. Para cambiar el global font-family
, actualice $font-family-base
y 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-top
eliminen. Se han agregado encabezados margin-bottom: .5rem
y párrafos margin-bottom: 1rem
para 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 |
Liza
Todas las listas— <ul>
, <ol>
y <dl>
— tienen su margin-top
eliminación y un margin-bottom: 1rem
. Las listas anidadas no tienen margin-bottom
. También hemos reiniciado los elementos padding-left
on <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 pareja.
- 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 margin
s. <dd>
s restablecer margin-left
y 0
agregar 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.
<section>
debe envolverse como en línea.
For example, <code><section></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-top
y usar rem
unidades para su margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Variables
Para indicar variables utilice la <var>
etiqueta.
<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 editar la configuración, presione ctrl + ,
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.
<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-align
en todas partes. Los cambios adicionales para bordes, relleno y más vienen con la .table
clase .
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 |
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 paradisplay: inline-block
permitirmargin
que se apliquen.<input>
s,<select>
s,<textarea>
s y<button>
s son principalmente abordados por Normalize, pero Reboot también elimina susmargin
y conjuntosline-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 tienencursor: pointer
when:not(:disabled)
.
Estos cambios, y más, se muestran a continuación.
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 cursor
cambio.
<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-style
de italic
a normal
. line-height
ahora también se hereda y margin-bottom: 1rem
se 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>
.
1355 Market St, Suite 900
San Francisco, CA 94103 Teléfono
: (123) 456-7890 Nombre completo
[email protected]
Cita en bloque
El valor predeterminado margin
en blockquotes es 1em 40px
, por lo que lo restablecemos 0 0 1rem
para 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.
Resumen
cursor
El resumen predeterminado es text
, por lo que lo restablecemos 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.
[hidden]
atributo HTML5
HTML5 agrega un nuevo atributo global llamado[hidden]
, que tiene el estilo display: none
predeterminado. Tomando prestada una idea de PureCSS , mejoramos este valor predeterminado [hidden] { display: none !important; }
para ayudar a evitar display
que 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 display
elementos.
Para simplemente alternar la visibilidad de un elemento, lo que significa display
que no se modifica y el elemento aún puede afectar el flujo del documento, use la .invisible
clase en su lugar.