in English

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.

Nesta páxina

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 rems en lugar de ems 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ón marginé un modelo mental máis sinxelo.
Para facilitar a escala entre os tamaños dos dispositivos, os elementos de bloque deberían usar rems para margins.
Mantén as declaracións de fontpropiedades relacionadas ao mínimo, utilizando inheritsempre que sexa posible.

Variables CSS

Engadido na v5.2.0

Coa versión 5.1.1, estandarizamos os nosos @imports necesarios en todos os nosos paquetes de CSS (incluídos bootstrap.css, bootstrap-reboot.csse bootstrap-grid.css) para incluír _root.scss. Isto engade :rootvariables CSS de nivel a todos os paquetes, independentemente de cantas delas se utilicen nese paquete. En última instancia, Bootstrap 5 continuará vendo máis variables CSS engadidas ao longo do tempo, co fin de ofrecer máis personalización en tempo real sen necesidade de recompilar sempre Sass. O noso enfoque é tomar as nosas variables de orixe Sass e transformalas en variables CSS. Deste xeito, aínda que non uses variables CSS, aínda tes todo o poder de Sass. Isto aínda está en curso e levará tempo a súa implementación plena.

Por exemplo, considere estas variables CSS para estilos :rootcomúns :<body>

  @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};

Na práctica, esas variables aplícanse despois 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
}

O que che permite facer personalizacións en tempo real como queiras:

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

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-sizingglobalmente en todos os elementos, incluíndo *::beforee *::after, a border-box. Isto garante que o ancho declarado do elemento nunca se exceda debido ao recheo ou ao bordo.
- Non se declara ningunha base font-sizeno <html>, pero 16pxasúmese (o navegador predeterminado). font-size: 1remaplí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-rootvariable.
Tamén <body>establece un global font-family, font-weight, line-height, e color. Isto é herdado máis tarde por algúns elementos do formulario para evitar incoherencias de fontes.
Por seguridade, <body>ten un declarado background-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,
  // 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;

Teña en conta que, debido a que a pila de fontes inclúe fontes emoji, moitos caracteres Unicode de símbolos/dingbat comúns 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 colorestilo CSS.

Isto font-familyaplícase ao <body>e herdarase automaticamente globalmente en Bootstrap. Para cambiar a versión global font-family, actualice $font-family-basee recompile Bootstrap.

Títulos e parágrafos

Todos os elementos de título, por exemplo, <h1>e <p>restablecéronse para que se margin-topeliminen. Engadíronse títulos margin-bottom: .5reme parágrafos margin-bottom: 1rempara 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

Regras horizontais

<hr>Simplificouse o elemento. Do mesmo xeito que os valores predeterminados do navegador, <hr>os s teñen un estilo a través border-topde , teñen un estilo predeterminado opacity: .25e herdan automaticamente a súa border-colorvía color, incluso cando colorse define a través do pai. Pódense modificar con utilidades de texto, bordo e opacidade.

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

Elimínanse todas as listas— <ul>, <ol>, e <dl>— margin-tope un margin-bottom: 1rem. As listas aniñadas non teñen margin-bottom. Tamén restablecemos os elementos padding-lefton <ul>e <ol>.

Todas as listas teñen a súa marxe superior eliminada
E a súa marxe inferior normalizouse
As listas aniñadas 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 margins. <dd>s restablecer margin-lefte 0engadir 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.

Por exemplo, <section>debería envolverse como en liña.

html

For example, <code>&lt;section&gt;</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-tope utilizar remunidades para o seu 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 use a <var>etiqueta.

y = m x + b

html

<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 cambiar de directorio, escriba cdseguido do nome do directorio.
Para editar a configuración, prema 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>

Saída da mostra

Para indicar a saída de mostra dun programa, use a <samp>etiqueta.

Este texto está destinado a ser tratado como mostra de saída dun programa informático.

html

<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-alignen todo momento. Os cambios adicionais para os bordos, o recheo e moito máis veñen coa .tableclase .

Esta é unha táboa de exemplo, e este é o seu título para describir o contido.
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

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

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 configurados display: inline-blockpara permitir marginque se apliquen.
<input>s, <select>s, <textarea>s e <button>s son abordados principalmente por Normalize, pero Reboot tamén elimina os seus margine sets line-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ñen cursor: pointercando :not(:disabled).

Estes cambios, e máis, móstranse a continuación.

Exemplo de lenda

Exemplo de entrada

Exemplo de correo electrónico

Exemplo de teléfono

URL de exemplo

Número de exemplo

Busca de exemplo

Exemplo de intervalo

Exemplo de entrada de ficheiro

Exemplo de selección

Marque esta caixa de verificación

A primeira opción é isto e aquilo A segunda opción é outra cousa que tamén é súper longa para demostrar o envoltorio destes controis de formulario de fantasía. A opción tres está desactivada

Exemplo de área de texto

Data de exemplo

Tempo de exemplo

Contrasinal de exemplo

Exemplo datetime-local

Exemplo de semana

Exemplo de mes

Exemplo de cor

Exemplo de saída 100

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

Botón de elemento sen botón

html

<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-stylede italica normal. line-heightagora tamén se herda e margin-bottom: 1remfoi 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>.

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

Nome completo
[email protected]

Cita de bloque

O predeterminado marginen blockquotes é 1em 40px, polo que restablecemos iso 0 0 1rempara 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.

O elemento de abreviatura HTML .

Resumo

cursorO resumo predeterminado é text, polo que restablecemos iso para pointerindicar 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: nonepredeterminado. Tomando prestada unha idea de PureCSS , melloramos esta opción predeterminada [hidden] { display: none !important; }para axudar a evitar que displayse 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 displayelementos.

Para simplemente cambiar a visibilidade dun elemento, o que significa displayque non se modifica e que o elemento aínda pode afectar o fluxo do documento, use a .invisibleclase .

Reinicie

Aproximación

Variables CSS

Valores predeterminados da páxina

Pila de fontes nativas

Títulos e parágrafos

Regras horizontais

Listas

Código en liña

Bloques de código

Variables

Entrada do usuario

Saída da mostra

Táboas

Formularios

Soporte de entrada de data e cor

Punteros nos botóns

Varios elementos

Enderezo

Cita de bloque

Elementos en liña

Resumo

[hidden]atributo HTML5

Incompatibilidade de jQuery

`[hidden]`atributo HTML5