Reinício

Reboot, uma coleção de mudanças CSS específicas de elementos em um único arquivo, kickstart Bootstrap para fornecer uma linha de base elegante, consistente e simples para construir.

Nesta página

Abordagem

Reboot baseia-se no Normalize, fornecendo muitos elementos HTML com estilos um tanto opinativos usando apenas seletores de elementos. O estilo adicional é feito apenas com classes. Por exemplo, reiniciamos alguns <table>estilos para uma linha de base mais simples e, posteriormente, fornecemos .table, .table-bordered, e muito mais.

Aqui estão nossas diretrizes e razões para escolher o que substituir na reinicialização:

Atualize alguns valores padrão do navegador para usar rems em vez de ems para espaçamento de componentes escaláveis.
Evite margin-top. As margens verticais podem entrar em colapso, produzindo resultados inesperados. Mais importante, porém, uma única direção de marginé um modelo mental mais simples.
Para facilitar o dimensionamento entre os tamanhos dos dispositivos, os elementos de bloco devem usar rems para margins.
Mantenha as declarações de fontpropriedades relacionadas ao mínimo, usando inheritsempre que possível.

Variáveis CSS

Adicionado na v5.2.0

Com a v5.1.1, padronizamos nossos @imports necessários em todos os nossos pacotes CSS (incluindo bootstrap.css, bootstrap-reboot.csse bootstrap-grid.css) para incluir _root.scss. Isso adiciona :rootvariáveis CSS de nível a todos os pacotes, independentemente de quantas delas são usadas nesse pacote. Em última análise, o Bootstrap 5 continuará a ver mais variáveis CSS adicionadas ao longo do tempo, a fim de fornecer mais personalização em tempo real sem a necessidade de sempre recompilar o Sass. Nossa abordagem é pegar nossas variáveis Sass de origem e transformá-las em variáveis CSS. Dessa forma, mesmo que você não use variáveis CSS, você ainda tem todo o poder do Sass. Isso ainda está em andamento e levará tempo para ser totalmente implementado.

Por exemplo, considere estas :rootvariáveis CSS para <body>estilos comuns:

  @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ática, essas variáveis são aplicadas no Reboot assim:

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 permite que você faça personalizações em tempo real como quiser:

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

Padrões de página

Os elementos <html>e <body>são atualizados para fornecer melhores padrões em toda a página. Mais especificamente:

O box-sizingé globalmente definido em todos os elementos, incluindo *::beforeand *::after, to border-box. Isso garante que a largura declarada do elemento nunca seja excedida devido ao preenchimento ou borda.
- Nenhuma base font-sizeé declarada no <html>, mas 16pxé assumida (o padrão do navegador). font-size: 1remé aplicado <body>para facilitar o dimensionamento de tipo responsivo por meio de consultas de mídia, respeitando as preferências do usuário e garantindo uma abordagem mais acessível. Esse padrão do navegador pode ser substituído modificando a $font-size-rootvariável.
O <body>também define um global font-family, font-weight, line-heighte color. Isso é herdado posteriormente por alguns elementos de formulário para evitar inconsistências de fonte.
Por segurança, o <body>tem um declarado background-color, o padrão é #fff.

Pilha de fontes nativas

O Bootstrap utiliza uma “pilha de fontes nativas” ou “pilha de fontes do sistema” para renderização de texto ideal em todos os dispositivos e sistemas operacionais. Essas fontes do sistema foram projetadas especificamente para os dispositivos atuais, com renderização aprimorada nas telas, suporte a fontes variáveis e muito mais. Leia mais sobre pilhas de fontes nativas neste artigo da 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;

Observe que, como a pilha de fontes inclui fontes emoji, muitos caracteres Unicode de símbolo/dingbat comuns serão renderizados como pictogramas multicoloridos. A aparência deles varia, dependendo do estilo usado na fonte emoji nativa do navegador/plataforma, e eles não serão afetados por nenhum colorestilo CSS.

Isso font-familyé aplicado ao <body>e automaticamente herdado globalmente em todo o Bootstrap. Para alternar o global font-family, atualize $font-family-basee recompile o Bootstrap.

Títulos e parágrafos

Todos os elementos de título — por exemplo, <h1>— e <p>são redefinidos para serem margin-topremovidos. Os títulos margin-bottom: .5reme parágrafos foram adicionados margin-bottom: 1rempara facilitar o espaçamento.

Cabeçalho	Exemplo
`<h1></h1>`	h1. Título de inicialização
`<h2></h2>`	h2. Título de inicialização
`<h3></h3>`	h3. Título de inicialização
`<h4></h4>`	h4. Título de inicialização
`<h5></h5>`	h5. Título de inicialização
`<h6></h6>`	h6. Título de inicialização

Regras horizontais

O <hr>elemento foi simplificado. Semelhante aos padrões do navegador, <hr>s são estilizados via border-top, têm um padrão opacity: .25e herdam automaticamente seu border-colorvia color, inclusive quando coloré definido por meio do pai. Eles podem ser modificados com utilitários de texto, borda 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

Todas as listas <ul>— <ol>, e <dl>— são margin-topremovidas e um margin-bottom: 1rem. As listas aninhadas não têm margin-bottom. Também redefinimos os elementos padding-lefton <ul>e <ol>.

Todas as listas têm sua margem superior removida
E sua margem inferior normalizada
As listas aninhadas não têm margem inferior
- Assim ficam com uma aparência mais uniforme
- Particularmente quando seguido por mais itens de lista
O preenchimento esquerdo também foi redefinido

Aqui está uma lista ordenada
Com alguns itens de lista
Tem a mesma aparência geral
Como a lista não ordenada anterior

Para um estilo mais simples, hierarquia clara e melhor espaçamento, as listas de descrição atualizaram margins. <dd>s redefinir margin-leftpara 0e adicionar margin-bottom: .5rem. <dt>s estão em negrito .

Listas de descrição: Uma lista de descrição é perfeita para definir termos.
Prazo: Definição para o termo.; Uma segunda definição para o mesmo termo.
Outro termo: Definição para este outro termo.

Código embutido

Envolva trechos de código embutidos com <code>. Certifique-se de escapar dos colchetes angulares HTML.

Por exemplo, <section>deve ser encapsulado como embutido.

html

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

Blocos de código

Use <pre>s para várias linhas de código. Mais uma vez, certifique-se de escapar quaisquer colchetes angulares no código para renderização adequada. O <pre>elemento é redefinido para remover margin-tope usar remunidades para 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>

Variáveis

Para indicar variáveis, use a <var>tag.

y = mx + b _

html

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

Entrada do usuário

Use o <kbd>para indicar a entrada que normalmente é inserida via teclado.

Para alternar diretórios, digite cdseguido do nome do diretório.
Para editar as configurações, pressione 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 de amostra

Para indicar a saída de amostra de um programa, use a <samp>tag.

Este texto deve ser tratado como saída de amostra de um programa de computador.

html

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

Tabelas

As tabelas são ligeiramente ajustadas ao estilo <caption>s, retraem bordas e garantem consistência text-alignpor toda parte. Alterações adicionais para bordas, preenchimento e muito mais vêm com a .tableclasse .

Esta é uma tabela de exemplo, e esta é sua legenda para descrever o conteúdo.
Título da tabela	Título da tabela	Título da tabela	Título da tabela
Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela
Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela
Célula da tabela	Célula da tabela	Célula da tabela	Célula da tabela

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>

Formulários

Vários elementos de formulário foram reiniciados para estilos básicos mais simples. Aqui estão algumas das mudanças mais notáveis:

<fieldset>s não têm bordas, preenchimentos ou margens para que possam ser facilmente usados como wrappers para entradas individuais ou grupos de entradas.
<legend>s, como fieldsets, também foram reestilizados para serem exibidos como um tipo de cabeçalho.
<label>s são definidos para display: inline-blockpermitir margina aplicação.
<input>s, <select>s, <textarea>s e <button>s são endereçados principalmente por Normalize, mas Reboot remove seus margine sets line-height: inherittambém.
<textarea>s são modificados para serem redimensionáveis apenas verticalmente, pois o redimensionamento horizontal geralmente “quebra” o layout da página.
<button>s e <input>elementos de botão têm cursor: pointerquando :not(:disabled).

Essas mudanças, e mais, são demonstradas abaixo.

Suporte para entrada de data e cor

Tenha em mente que as entradas de data não são totalmente suportadas por todos os navegadores, ou seja, Safari.

Ponteiros nos botões

A reinicialização inclui um aprimoramento para role="button"alterar o cursor padrão para pointer. Adicione este atributo aos elementos para ajudar a indicar que os elementos são interativos. Essa função não é necessária para <button>elementos, que recebem sua própria cursoralteração.

Botão de elemento sem botão

html

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

Elementos diversos

Endereço

O <address>elemento é atualizado para redefinir o padrão do navegador font-stylede italicpara normal. line-heightagora também é herdado e margin-bottom: 1remfoi adicionado. <address>s são para apresentar informações de contato para o antepassado mais próximo (ou um corpo inteiro de trabalho). Preserve a formatação terminando as linhas com <br>.

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

Nome completo
[email protected]

Bloco de citação

O padrão marginem blockquotes é 1em 40px, então redefinimos 0 0 1rempara algo mais consistente com outros elementos.

Uma citação bem conhecida, contida em um elemento blockquote.

Alguém famoso em Source Title

Elementos embutidos

O <abbr>elemento recebe um estilo básico para se destacar entre o texto do parágrafo.

O elemento de abreviação HTML .

Resumo

O padrão cursorem resumo é text, então redefinimos isso pointerpara transmitir que o elemento pode ser interagido clicando nele.

Alguns detalhes

Mais informações sobre os detalhes.

Ainda mais detalhes

Aqui estão ainda mais detalhes sobre os detalhes.

`[hidden]`Atributo HTML5

HTML5 adiciona um novo atributo global chamado[hidden] , que é estilizado como display: nonepadrão. Tomando emprestada uma ideia do PureCSS , melhoramos esse padrão [hidden] { display: none !important; }para ajudar a evitar que ele displayseja substituído acidentalmente.

<input type="text" hidden>

incompatibilidade do jQuery

[hidden]não é compatível com jQuery $(...).hide()e $(...).show()métodos. Portanto, atualmente não endossamos especialmente [hidden]outras técnicas para gerenciar os displayelementos.

Para simplesmente alternar a visibilidade de um elemento, significando que ele displaynão é modificado e o elemento ainda pode afetar o fluxo do documento, use a .invisibleclasse .

Reinício

Abordagem

Variáveis ​​CSS

Padrões de página

Pilha de fontes nativas

Títulos e parágrafos

Regras horizontais

Listas

Código embutido

Blocos de código

Variáveis

Entrada do usuário

Saída de amostra

Tabelas

Formulários

Suporte para entrada de data e cor

Ponteiros nos botões

Elementos diversos

Endereço

Bloco de citação

Elementos embutidos

Resumo

[hidden]Atributo HTML5

incompatibilidade do jQuery

Variáveis CSS

`[hidden]`Atributo HTML5