Bootstrap 4 Personalização CSS

en | ja

Variáveis de graves

Variáveis de graves do código fonte Bootstrap são definidas em _variables.scss com opção !default. Você pode alterar ou modificar estas variáveis para personalizar os estilos Bootstrap.

Parâmetros básicos

Variáveis abaixo são parâmetros básicos para configurações de estilos inteiros.

• $font-size-base : Tamanho da fonte base (padrão: 1rem), afeta todos os tamanhos de fonte dos estilos Bootstrap
• $spacer : Comprimento da unidade para utilitários de espaçamento (padrão: 1rem)

// Use 10% smaller fonts$font-size-base: 0.9rem;// import Bootstrap@import "bootstrap/scss/bootstrap";

Modificando as predefinições de personalização

Variáveis que começam com $enable- são predefinições de personalização incorporadas (veja opções Sass para a lista completa). Por exemplo, gradientes e sombras são desabilitados como padrão (na versão 4.1.1). Você pode habilitar essas opções com um código de extensão como abaixo.

// initialize customization variables$enable-gradients: true;$enable-shadows: true;// import Bootstrap@import "bootstrap/scss/bootstrap";...

Ver Gradação e efeitos de sombra para verificar diferenças de representações visuais.

Modificar variáveis de mapa

Sass supõe vários tipos de variáveis (ver Tipos de Dados). A maioria das variáveis são escalares (números, strings, cores, booleans, e nulos). Mas as variáveis abaixo são definidas como mapas de valores-chave.

• $grays : Pré-definições da escala de cinza
• $colors : Cores básicas (azul, índigo, roxo, …)
• $theme-colors : Cores do tema Bootstrap (primário, secundário, sucesso, …).)
• $spacers : Valores pré-definidos de utipias de espaçamento
• $sizes : Valores pré-definidos de utipias de espaçamento
• $grid-breakpoints : Pré-definições de ponto de quebra da grelha (largura do viewport)
• $container-max-widths : Largura do contentor da grelha para cada ponto de quebra

Você também pode modificar estas variáveis. Adicionar e alterar valores são fáceis.

// Example: Modify $theme-colors$theme-colors: ( // change "success" from green to teal "success": #20c997, // add "custom" to orange "custom": #fd7e14);// import Bootstrap@import "bootstrap/scss/bootstrap";

Below are live alert samples (compare com as cores padrão do Bootstrap ⇒ veja exemplos de documentos oficiais).

Você também pode remover entradas de mapas existentes usando as funções de construção do Sass (busca map-remove($map, $keys...) de map-functions). Mas você tem que importar partials invidvidualmente. Veja Remover do mapa do documento oficial para detalhes.