Ir para o conteúdo principal Pular para a navegação de documentos
in English

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.

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-height, and 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,
  // 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;

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

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
  1. Aqui está uma lista ordenada
  2. Com alguns itens de lista
  3. Tem a mesma aparência geral
  4. 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. 
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>

<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 _ 
<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 + , 
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. 
<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

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.

Legenda de exemplo

100

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 suas próprias cursoralterações.

Botão de elemento sem botão 
<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.

Nulla attr vitae elit libero, a pharetra augue.

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 .