Bootstrap de temas

Personalize o Bootstrap 4 com nossas novas variáveis Sass integradas para preferências globais de estilo para fácil alteração de temas e componentes.

Introdução

No Bootstrap 3, o tema foi amplamente orientado por substituições de variáveis em LESS, CSS personalizado e uma folha de estilo de tema separada que incluímos em nossos distarquivos. Com algum esforço, pode-se redesenhar completamente a aparência do Bootstrap 3 sem tocar nos arquivos principais. O Bootstrap 4 fornece uma abordagem familiar, mas um pouco diferente.

Agora, o tema é realizado por variáveis Sass, mapas Sass e CSS personalizado. Não há mais folha de estilo de tema dedicada; em vez disso, você pode habilitar o tema interno para adicionar gradientes, sombras e muito mais.

Sass

Utilize nossos arquivos Sass de origem para tirar proveito de variáveis, mapas, mixins e muito mais.

Estrutura do arquivo

Sempre que possível, evite modificar os arquivos principais do Bootstrap. Para Sass, isso significa criar sua própria folha de estilo que importa o Bootstrap para que você possa modificá-lo e estendê-lo. Supondo que você esteja usando um gerenciador de pacotes como o npm, você terá uma estrutura de arquivos parecida com esta:

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Se você baixou nossos arquivos de origem e não está usando um gerenciador de pacotes, você vai querer configurar manualmente algo semelhante a essa estrutura, mantendo os arquivos de origem do Bootstrap separados dos seus.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Importando

No seu custom.scss, você importará os arquivos Sass de origem do Bootstrap. Você tem duas opções: incluir todo o Bootstrap ou escolher as peças que você precisa. Incentivamos o último, embora esteja ciente de que existem alguns requisitos e dependências em nossos componentes. Você também precisará incluir algum JavaScript para nossos plugins.

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Com essa configuração, você pode começar a modificar qualquer uma das variáveis e mapas Sass em seu arquivo custom.scss. Você também pode começar a adicionar partes do Bootstrap na // Optionalseção conforme necessário. Sugerimos usar a pilha de importação completa do nosso bootstrap.scssarquivo como ponto de partida.

Padrões de variáveis

Cada variável Sass no Bootstrap 4 inclui o !defaultsinalizador que permite substituir o valor padrão da variável em seu próprio Sass sem modificar o código-fonte do Bootstrap. Copie e cole variáveis conforme necessário, modifique seus valores e remova o !defaultsinalizador. Se uma variável já foi atribuída, ela não será reatribuída pelos valores padrão no Bootstrap.

Você encontrará a lista completa de variáveis do Bootstrap em scss/_variables.scss.

As substituições de variáveis dentro do mesmo arquivo Sass podem vir antes ou depois das variáveis padrão. No entanto, ao substituir arquivos Sass, suas substituições devem vir antes de importar os arquivos Sass do Bootstrap.

Aqui está um exemplo que altera o background-colorand colorpara <body>ao importar e compilar o Bootstrap via npm:

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

Repita conforme necessário para qualquer variável no Bootstrap, incluindo as opções globais abaixo.

Mapas e loops

O Bootstrap 4 inclui um punhado de mapas Sass, pares de valores-chave que facilitam a geração de famílias de CSS relacionados. Usamos mapas Sass para nossas cores, pontos de interrupção de grade e muito mais. Assim como as variáveis Sass, todos os mapas Sass incluem o !defaultsinalizador e podem ser substituídos e estendidos.

Alguns de nossos mapas Sass são mesclados em mapas vazios por padrão. Isso é feito para permitir a expansão fácil de um determinado mapa Sass, mas tem o custo de tornar a remoção de itens de um mapa um pouco mais difícil.

Modificar mapa

Para modificar uma cor existente em nosso $theme-colorsmapa, adicione o seguinte ao seu arquivo Sass personalizado:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Adicionar ao mapa

Para adicionar uma nova cor a $theme-colors, adicione a nova chave e valor:

$theme-colors: (
  "custom-color": #900
);

Remover do mapa

Para remover cores de $theme-colors, ou de qualquer outro mapa, use map-remove. Esteja ciente de que você deve inseri-lo entre nossos requisitos e opções:

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Chaves necessárias

O Bootstrap assume a presença de algumas chaves específicas dentro dos mapas Sass conforme usamos e estendemos por nós mesmos. Conforme você personaliza os mapas incluídos, você pode encontrar erros onde a chave de um mapa Sass específico está sendo usada.

Por exemplo, usamos as teclas , e de primarypara successlinks , botões e estados de formulário. Substituir os valores dessas chaves não deve apresentar problemas, mas removê-los pode causar problemas de compilação do Sass. Nesses casos, você precisará modificar o código Sass que faz uso desses valores.danger$theme-colors

Funções

Bootstrap utiliza várias funções Sass, mas apenas um subconjunto é aplicável a temas gerais. Incluímos três funções para obter valores dos mapas de cores:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Eles permitem que você escolha uma cor de um mapa Sass, da mesma forma que você usaria uma variável de cor da v3.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Também temos outra função para obter um determinado nível de cor do $theme-colorsmapa. Valores de nível negativo clareiam a cor, enquanto níveis mais altos escurecem.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

Na prática, você chamaria a função e passaria dois parâmetros: o nome da cor de $theme-colors(por exemplo, primária ou perigo) e um nível numérico.

.custom-element {
  color: theme-color-level(primary, -10);
}

Funções adicionais podem ser adicionadas no futuro ou seu próprio Sass personalizado para criar funções de nível para mapas Sass adicionais, ou mesmo um genérico se você quiser ser mais detalhado.

Contraste de cores

Uma função adicional que incluímos no Bootstrap é a função de contraste de cores, color-yiq. Ele utiliza o espaço de cores YIQ para retornar automaticamente uma cor de contraste clara ( #fff) ou escura ( #111) com base na cor base especificada. Esta função é especialmente útil para mixins ou loops onde você está gerando várias classes.

Por exemplo, para gerar amostras de cores do nosso $theme-colorsmapa:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Também pode ser usado para necessidades pontuais de contraste:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Você também pode especificar uma cor base com nossas funções de mapa de cores:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Opções atrevidas

Personalize o Bootstrap 4 com nosso arquivo de variáveis personalizadas integrado e alterne facilmente as preferências globais de CSS com novas $enable-*variáveis Sass. Substitua o valor de uma variável e recompile npm run testconforme necessário.

Você pode encontrar e personalizar essas variáveis para as principais opções globais no scss/_variables.scssarquivo do Bootstrap.

Variável	Valores	Descrição
`$spacer`	`1rem`(padrão) ou qualquer valor > 0	Especifica o valor de espaçador padrão para gerar programaticamente nossos utilitários de espaçador .
`$enable-rounded`	`true`(padrão) ou`false`	Habilita estilos predefinidos `border-radius`em vários componentes.
`$enable-shadows`	`true`ou `false`(padrão)	Habilita estilos predefinidos `box-shadow`em vários componentes.
`$enable-gradients`	`true`ou `false`(padrão)	Permite gradientes predefinidos por meio `background-image`de estilos em vários componentes.
`$enable-transitions`	`true`(padrão) ou`false`	Habilita `transition`s predefinidos em vários componentes.
`$enable-hover-media-query`	`true`ou `false`(padrão)	Descontinuada
`$enable-grid-classes`	`true`(padrão) ou`false`	Possibilita a geração de classes CSS para o sistema de grade (por exemplo, `.container`, `.row`, `.col-md-1`, etc.).
`$enable-caret`	`true`(padrão) ou`false`	Habilita o cursor do pseudo elemento em `.dropdown-toggle`.
`$enable-print-styles`	`true`(padrão) ou`false`	Ativa estilos para otimizar a impressão.

Cor

Muitos dos vários componentes e utilitários do Bootstrap são construídos através de uma série de cores definidas em um mapa Sass. Este mapa pode ser repetido no Sass para gerar rapidamente uma série de conjuntos de regras.

Todas as cores

Todas as cores disponíveis no Bootstrap 4 estão disponíveis como variáveis Sass e um mapa Sass em scss/_variables.scssarquivo. Isso será expandido em versões menores subsequentes para adicionar tons adicionais, bem como a paleta de tons de cinza que já incluímos.

Azul

Índigo

Roxo

Rosa

Vermelho

Laranja

Amarelo

Verde

Cerceta

Ciano

Veja como você pode usá-los em seu Sass:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

As classes de utilitário de cores também estão disponíveis para configuração colore background-color.

No futuro, teremos como objetivo fornecer mapas e variáveis Sass para tons de cada cor, como fizemos com as cores em tons de cinza abaixo.

Cores do tema

Usamos um subconjunto de todas as cores para criar uma paleta de cores menor para gerar esquemas de cores, também disponíveis como variáveis Sass e um mapa Sass no scss/_variables.scssarquivo do Bootstraps.

Primário

Secundário

Sucesso

Perigo

Aviso

Informações

Leve

Escuro

Cinzas

Um amplo conjunto de variáveis de cinza e um mapa Sass scss/_variables.scsspara tons consistentes de cinza em seu projeto.

100

200

300

400

500

600

700

800

900

Dentro scss/_variables.scssde , você encontrará as variáveis de cores do Bootstrap e o mapa Sass. Aqui está um exemplo do $colorsmapa Sass:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

Adicione, remova ou modifique valores no mapa para atualizar como eles são usados em muitos outros componentes. Infelizmente, neste momento, nem todos os componentes utilizam este mapa Sass. Atualizações futuras se esforçarão para melhorar isso. Até lá, planeje fazer uso das ${color}variáveis e deste mapa Sass.

Componentes

Muitos dos componentes e utilitários do Bootstrap são construídos com @eachloops que iteram sobre um mapa Sass. Isso é especialmente útil para gerar variantes de um componente $theme-colorse criar variantes responsivas para cada ponto de interrupção. À medida que você personaliza esses mapas Sass e recompila, você verá automaticamente suas alterações refletidas nesses loops.

Modificadores

Muitos dos componentes do Bootstrap são construídos com uma abordagem de classe modificadora de base. Isso significa que a maior parte do estilo está contida em uma classe base (por exemplo, .btn), enquanto as variações de estilo estão confinadas a classes modificadoras (por exemplo, .btn-danger). Essas classes modificadoras são construídas a partir do $theme-colorsmapa para personalizar o número e o nome de nossas classes modificadoras.

Aqui estão dois exemplos de como fazemos um loop no $theme-colorsmapa para gerar modificadores para o .alertcomponente e todos os nossos .bg-*utilitários em segundo plano.

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Responsivo

Esses loops Sass também não se limitam a mapas de cores. Você também pode gerar variações responsivas de seus componentes ou utilitários. Veja, por exemplo, nossos utilitários de alinhamento de texto responsivo, onde misturamos um @eachloop para o $grid-breakpointsmapa Sass com uma consulta de mídia incluída.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

Se você precisar modificar seu $grid-breakpoints, suas alterações serão aplicadas a todos os loops que iteram nesse mapa.

Variáveis CSS

O Bootstrap 4 inclui cerca de duas dúzias de propriedades personalizadas CSS (variáveis) em seu CSS compilado. Eles fornecem acesso fácil a valores comumente usados, como nossas cores de tema, pontos de interrupção e pilhas de fontes primárias ao trabalhar no Inspetor do seu navegador, uma caixa de proteção de código ou prototipagem geral.

Variáveis disponíveis

Aqui estão as variáveis que incluímos (observe que o :rooté obrigatório). Eles estão localizados em nosso _root.scssarquivo.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Exemplos

As variáveis CSS oferecem flexibilidade semelhante às variáveis do Sass, mas sem a necessidade de compilação antes de serem servidas ao navegador. Por exemplo, aqui estamos redefinindo a fonte da nossa página e os estilos de link com variáveis CSS.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Variáveis de ponto de interrupção

Embora originalmente incluímos pontos de interrupção em nossas variáveis CSS (por exemplo, --breakpoint-md), eles não são suportados em consultas de mídia , mas ainda podem ser usados em conjuntos de regras em consultas de mídia. Essas variáveis de ponto de interrupção permanecem no CSS compilado para compatibilidade com versões anteriores, pois podem ser utilizadas pelo JavaScript. Saiba mais na especificação.

Aqui está um exemplo do que não é suportado:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

E aqui está um exemplo do que é suportado:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}