Source

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.

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.
O <body>também define um global font-family, line-height, and text-align. 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

As fontes da web padrão (Helvetica Neue, Helvetica e Arial) foram descartadas no Bootstrap 4 e substituídas por uma “pilha de fontes nativas” para renderização de texto ideal em todos os dispositivos e sistemas operacionais. Leia mais sobre pilhas de fontes nativas neste artigo da Smashing Magazine .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (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;

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem em massa
Facilisis em pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Ultricies Purus sodales
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem em massa
Facilisis em pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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.
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
porta Malesuada: Etiam porta sem maleuada magna mollis euismod.

Texto pré-formatado

O <pre>elemento é redefinido para remover margin-tope usar remunidades para seu margin-bottom.

.example-element {
  margem inferior: 1rem;
}

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.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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. Embora [hidden]não seja suportado nativamente pelo IE10, a declaração explícita em nosso CSS contorna esse problema.

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