Reinicie
Reiniciar, unha colección de cambios de CSS específicos de elementos nun único ficheiro, inicia Bootstrap para proporcionar unha liña de base elegante, consistente e sinxela para construír.
Aproximación
O reinicio baséase en Normalize, proporcionando moitos elementos HTML con estilos algo obstinados usando só selectores de elementos. O estilo adicional realízase só coas clases. Por exemplo, reiniciamos algúns <table>
estilos para obter unha liña de base máis sinxela e máis tarde fornecemos .table
, .table-bordered
, etc.
Estas son as nosas directrices e os motivos para escoller o que quere anular no reinicio:
- Actualice algúns valores predeterminados do navegador para usar
rem
s en lugar deem
s para o espazamento de compoñentes escalables. - Evitar
margin-top
. As marxes verticais poden colapsar, producindo resultados inesperados. Máis importante aínda, unha única direcciónmargin
é un modelo mental máis sinxelo. - Para facilitar a escala entre os tamaños dos dispositivos, os elementos de bloque deberían usar
rem
s paramargin
s. - Mantén as declaracións de
font
propiedades relacionadas ao mínimo, utilizandoinherit
sempre que sexa posible.
Valores predeterminados da páxina
Os elementos <html>
e <body>
actualízanse para ofrecer mellores valores predeterminados en toda a páxina. Máis concretamente:
- Establécese
box-sizing
globalmente en todos os elementos, incluíndo*::before
e*::after
, aborder-box
. Isto garante que nunca se exceda o ancho declarado do elemento debido ao recheo ou ao bordo.- Non se declara ningunha base
font-size
no<html>
, pero16px
asúmese (o navegador predeterminado).font-size: 1rem
aplícase<body>
para facilitar a escala de tipos de resposta mediante consultas de medios respectando as preferencias do usuario e garantindo un enfoque máis accesible. Este navegador predeterminado pódese substituír modificando a$font-size-root
variable.
- Non se declara ningunha base
- Tamén
<body>
establece un globalfont-family
,font-weight
,line-height
, ecolor
. Isto é herdado máis tarde por algúns elementos do formulario para evitar incoherencias de fontes. - Por seguridade,
<body>
ten un declaradobackground-color
, por defecto#fff
.
Pila de fontes nativas
Bootstrap utiliza unha "pila de fontes nativas" ou "pila de fontes do sistema" para unha representación óptima do texto en cada dispositivo e sistema operativo. Estes tipos de letra do sistema deseñaron especificamente os dispositivos actuais, cunha representación mellorada nas pantallas, compatibilidade con fontes variables e moito máis. Lea máis sobre as pilas de fontes nativas neste artigo 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;
Teña en conta que, debido a que a pila de fontes inclúe fontes emoji, moitos caracteres comúns de símbolo/dingbat Unicode mostraranse como pictogramas multicolores. A súa aparencia variará, dependendo do estilo empregado na fonte emoji nativa do navegador/plataforma, e non se verán afectados por ningún color
estilo CSS.
Isto font-family
aplícase ao <body>
e herdarase automaticamente globalmente en Bootstrap. Para cambiar a versión global font-family
, actualice $font-family-base
e recompile Bootstrap.
Títulos e parágrafos
Todos os elementos de título, por exemplo, <h1>
e <p>
restablecéronse para que se margin-top
eliminen. Engadíronse títulos margin-bottom: .5rem
e parágrafos margin-bottom: 1rem
para facilitar o espazado.
Título | Exemplo |
---|---|
<h1></h1> |
h1. Título de bootstrap |
<h2></h2> |
h2. Título de bootstrap |
<h3></h3> |
h3. Título de bootstrap |
<h4></h4> |
h4. Título de bootstrap |
<h5></h5> |
h5. Título de bootstrap |
<h6></h6> |
h6. Título de bootstrap |
Listas
Elimínanse todas as listas— <ul>
, <ol>
, e <dl>
— margin-top
e un margin-bottom: 1rem
. As listas anidadas non teñen margin-bottom
. Tamén restablecemos os elementos padding-left
on <ul>
e <ol>
.
- Todas as listas teñen a súa marxe superior eliminada
- E a súa marxe inferior normalizouse
- As listas anidadas non teñen marxe inferior
- Deste xeito teñen un aspecto máis uniforme
- Especialmente cando vai seguido de máis elementos da lista
- Tamén se restableceu o recheo esquerdo
- Aquí tes unha lista ordenada
- Con algúns elementos da lista
- Ten o mesmo aspecto xeral
- Como a lista anterior sen ordenar
Para un estilo máis sinxelo, xerarquía clara e mellor espazo, as listas de descricións actualizaron margin
s. <dd>
s restablecer margin-left
e 0
engadir margin-bottom: .5rem
. <dt>
s están en negra .
- Listas de descricións
- Unha lista de descricións é perfecta para definir termos.
- Prazo
- Definición para o termo.
- Unha segunda definición para o mesmo termo.
- Outro termo
- Definición para este outro termo.
Código en liña
Envolve fragmentos de código en liña con <code>
. Asegúrese de escapar dos corchetes angulares HTML.
<section>
debería envolverse como en liña.
For example, <code><section></code> should be wrapped as inline.
Bloques de código
Use <pre>
s para varias liñas de código. Unha vez máis, asegúrate de escapar dos corchetes angulares do código para unha representación correcta. O <pre>
elemento restableceuse para eliminar o seu margin-top
e utilizar rem
unidades para o seu 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 use a <var>
etiqueta.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Entrada do usuario
Use o <kbd>
para indicar a entrada que normalmente se introduce mediante o teclado.
Para editar a configuración, prema 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>
Saída da mostra
Para indicar a saída de mostra dun programa, use a <samp>
etiqueta.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Táboas
As táboas axústanse lixeiramente ao estilo <caption>
s, contraen bordos e garanten a coherencia text-align
en todo momento. Os cambios adicionais para os bordos, o recheo e moito máis veñen coa .table
clase .
Título da táboa | Título da táboa | Título da táboa | Título da táboa |
---|---|---|---|
Cela da táboa | Cela da táboa | Cela da táboa | Cela da táboa |
Cela da táboa | Cela da táboa | Cela da táboa | Cela da táboa |
Cela da táboa | Cela da táboa | Cela da táboa | Cela da táboa |
Formularios
Varios elementos de formulario foron reiniciados para estilos de base máis sinxelos. Estes son algúns dos cambios máis salientables:
<fieldset>
s non teñen bordos, recheos ou marxes polo que poden usarse facilmente como envoltorios para entradas individuais ou grupos de entradas.<legend>
s, como os conxuntos de campos, tamén foron rediseñados para mostrarse como un tipo de título.<label>
s están configuradosdisplay: inline-block
para permitirmargin
que se apliquen.<input>
s,<select>
s,<textarea>
s e<button>
s son abordados principalmente por Normalize, pero Reboot tamén elimina os seusmargin
e setsline-height: inherit
.<textarea>
s modifícanse para que só se poidan cambiar de tamaño verticalmente xa que o cambio de tamaño horizontal a miúdo "rompe" o deseño da páxina.<button>
s e<input>
os elementos botón teñencursor: pointer
cando:not(:disabled)
.
Estes cambios, e máis, móstranse a continuación.
Soporte de entrada de data e cor
Teña en conta que as entradas de data non son totalmente compatibles con todos os navegadores, é dicir, Safari.
Punteros nos botóns
O reinicio inclúe unha mellora para role="button"
cambiar o cursor predeterminado a pointer
. Engade este atributo aos elementos para indicar que os elementos son interactivos. Este papel non é necesario para <button>
os elementos, que reciben o seu propio cursor
cambio.
<span role="button" tabindex="0">Non-button element button</span>
Varios elementos
Enderezo
O <address>
elemento actualízase para restablecer a configuración predeterminada do navegador font-style
de italic
a normal
. line-height
agora tamén se herda e margin-bottom: 1rem
foi engadido. <address>
s son para presentar información de contacto para o antepasado máis próximo (ou todo un traballo). Conserva o formato rematando as liñas con <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103 Teléfono
: (123) 456-7890 Nome completo
[email protected]
Cita de bloque
O predeterminado margin
en blockquotes é 1em 40px
, polo que restablecemos iso 0 0 1rem
para algo máis consistente con outros elementos.
Unha cita coñecida, contida nun elemento blockquote.
Alguén famoso en Source Title
Elementos en liña
O <abbr>
elemento recibe un estilo básico para que se destaque entre o texto dos parágrafos.
Resumo
cursor
O resumo predeterminado é text
, polo que restablecemos iso para pointer
indicar que se pode interactuar co elemento facendo clic nel.
Algúns detalles
Máis información sobre os detalles.
Aínda máis detalles
Aquí tes aínda máis detalles sobre os detalles.
[hidden]
atributo HTML5
HTML5 engade un novo atributo global chamado[hidden]
, que ten o estilo display: none
predeterminado. Tomando prestada unha idea de PureCSS , melloramos esta opción predeterminada [hidden] { display: none !important; }
para axudar a evitar que display
se anule accidentalmente.
<input type="text" hidden>
Incompatibilidade de jQuery
[hidden]
non é compatible con jQuery $(...).hide()
e $(...).show()
métodos. Polo tanto, actualmente non avalamos especialmente [hidden]
outras técnicas para xestionar os display
elementos.
Para simplemente cambiar a visibilidade dun elemento, o que significa display
que non se modifica e que o elemento aínda pode afectar o fluxo do documento, use a .invisible
clase .