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.
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 deems 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 demargines un modelo mental más simple. - Para escalar más fácilmente entre tamaños de dispositivos, los elementos de bloque deben usar
rems paramargins. - Mantenga las declaraciones de
fontpropiedades relacionadas con - al mínimo, utilizandoinheritsiempre que sea posible.
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,*::afterhastaborder-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>, pero16pxse 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.
- No
- El
<body>también establece un globalfont-family,line-heightytext-align. 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.
Las fuentes web predeterminadas (Helvetica Neue, Helvetica y Arial) se eliminaron en Bootstrap 4 y se reemplazaron con una "pila de fuentes nativa" para una representación de texto óptima en todos los dispositivos y sistemas operativos. Lea más sobre pilas de fuentes nativas en este artículo de Smashing Magazine .
$font-family-sans-serif:
// Safari for OS X and iOS (San Francisco)
-apple-system,
// Chrome < 56 for OS X (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue", Arial, sans-serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;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.
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. Encabezado de arranque |
|
|
h2. Encabezado de arranque |
|
|
h3. Encabezado de arranque |
|
|
h4. Encabezado de arranque |
|
|
h5. Encabezado de arranque |
|
|
h6. Encabezado de arranque |
Todas las listas— <ul>, <ol>y <dl>— tienen su margin-topeliminación y un margin-bottom: 1rem. Las listas anidadas no tienen margin-bottom.
- Lorem ipsum dolor siéntate amet
- Consectetur adipiscing elit
- entero molestie lorem en massa
- Facilisis en aliquet pretium nisl
- nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat en
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
- Lorem ipsum dolor siéntate amet
- Consectetur adipiscing elit
- entero molestie lorem en massa
- Facilisis en aliquet pretium nisl
- nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
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.
- eusmod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
- Donec id elit non mi porta gravida at eget metus.
- malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
El <pre>elemento se restablece para eliminar su margin-topy usar remunidades para su margin-bottom.
.ejemplo-elemento {
margen inferior: 1rem;
}
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 .
| 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 |
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-blockpermitirmarginque se apliquen.<input>s,<select>s,<textarea>s y<button>s son principalmente abordados por Normalize, pero Reboot también elimina susmarginy 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.
Estos cambios, y más, se muestran a continuació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>.
1355 Market St, Suite 900
San Francisco, CA 94103 Teléfono
: (123) 456-7890 Nombre completo
[email protected]
El valor predeterminado marginen blockquotes es 1em 40px, por lo que lo restablecemos 0 0 1rempara algo más consistente con otros elementos.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entero posuere erat a ante.
El <abbr>elemento recibe un estilo básico para que se destaque entre el texto del párrafo.
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.
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. Si bien [hidden]IE10 no lo admite de forma nativa, la declaración explícita en nuestro CSS soluciona ese problema.
<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.