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.

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

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

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.

Legenda de exemplo

100

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 
<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 adds a new global attribute named [hidden], which is styled as display: none by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; } to help prevent its display from getting accidentally overridden. While [hidden] isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.

<input type="text" hidden>
jQuery incompatibility

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.