Bootstrap tematizado

Personaliza Bootstrap 4 coas nosas novas variables integradas de Sass para as preferencias de estilo globais para facilitar a temática e os cambios de compoñentes.

Introdución

En Bootstrap 3, a temática foi impulsada en gran parte por substitucións de variables en LESS, CSS personalizado e unha folla de estilo de tema separada que incluímos nos nosos distficheiros. Con certo esforzo, pódese redeseñar completamente o aspecto de Bootstrap 3 sen tocar os ficheiros principais. Bootstrap 4 ofrece un enfoque familiar, pero lixeiramente diferente.

Agora, a temática realízase mediante variables Sass, mapas Sass e CSS personalizados. Non hai máis folla de estilo temática dedicada; no seu lugar, pode activar o tema incorporado para engadir degradados, sombras e moito máis.

Sass

Utiliza os nosos ficheiros de orixe Sass para aproveitar variables, mapas, mixins e moito máis ao compilar Sass usando o teu propio pipeline de activos.

Estrutura do ficheiro

Sempre que sexa posible, evite modificar os ficheiros principais de Bootstrap. Para Sass, iso significa crear a túa propia folla de estilo que importe Bootstrap para que poidas modificala e ampliala. Asumindo que está a usar un xestor de paquetes como npm, terá unha estrutura de ficheiros así:

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

Se descargaches os nosos ficheiros fonte e non estás usando un xestor de paquetes, quererás configurar manualmente algo semellante a esa estrutura, mantendo os ficheiros fonte de Bootstrap separados dos teus.

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

Importando

No teu custom.scss, importarás os ficheiros Sass de orixe de Bootstrap. Tes dúas opcións: incluír todo o Bootstrap ou escoller as pezas que necesites. Recomendamos este último, aínda que teña en conta que hai algúns requisitos e dependencias entre os nosos compoñentes. Tamén terás que incluír algo de JavaScript para os nosos complementos.

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

// Include any default variable overrides here (though functions won't be available)

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

// Then add additional custom code here

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

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@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";

Con esa configuración, podes comezar a modificar calquera das variables e mapas de Sass no teu custom.scss. Tamén pode comezar a engadir partes de Bootstrap na // Optionalsección segundo sexa necesario. Suxerimos usar a pila de importación completa do noso bootstrap.scssficheiro como punto de partida.

Variables por defecto

Cada variable de Sass en Bootstrap inclúe a !defaultmarca que che permite anular o valor predeterminado da variable no teu propio Sass sen modificar o código fonte de Bootstrap. Copie e pegue as variables segundo sexa necesario, modifique os seus valores e elimine a !defaultmarca. Se xa se asignou unha variable, non se volverá asignar polos valores predeterminados en Bootstrap.

Atoparás a lista completa das variables de Bootstrap en scss/_variables.scss. Algunhas variables están configuradas en null, estas variables non saen a propiedade a menos que se anulen na súa configuración.

As substitucións de variables deben producirse despois de importar as nosas funcións, variables e mixins, pero antes do resto das importacións.

Aquí tes un exemplo que cambia o background-colore colorpara o <body>ao importar e compilar Bootstrap mediante npm:

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

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

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

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

Repita se é necesario para calquera variable en Bootstrap, incluídas as opcións globais que aparecen a continuación.

Mapas e bucles

Bootstrap 4 inclúe un puñado de mapas Sass, pares de valores clave que facilitan a xeración de familias de CSS relacionados. Usamos mapas Sass para as nosas cores, puntos de ruptura da cuadrícula e moito máis. Do mesmo xeito que as variables de Sass, todos os mapas de Sass inclúen a !defaultbandeira e pódense substituír e ampliar.

Algúns dos nosos mapas de Sass combínanse noutros baleiros por defecto. Isto faise para permitir a expansión sinxela dun mapa de Sass determinado, pero ten o custo de dificultar un pouco a eliminación de elementos dun mapa.

Modificar mapa

Para modificar unha cor existente no noso $theme-colorsmapa, engade o seguinte ao teu ficheiro Sass personalizado:

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

Engadir ao mapa

Para engadir unha cor nova a $theme-colors, engade a clave e o valor novos:

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

Eliminar do mapa

Para eliminar cores de $theme-colors, ou de calquera outro mapa, use map-remove. Teña en conta que debe inserilo entre os nosos requisitos e opcións:

// 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 necesarias

Bootstrap asume a presenza dalgunhas claves específicas dentro dos mapas de Sass tal e como as utilizamos e as ampliamos nós mesmos. A medida que personaliza os mapas incluídos, é posible que se produzan erros nos que se utilice a clave dun mapa Sass específico.

Por exemplo, usamos as teclas primary, success, e de para ligazóns, botóns e estados de formulario. A substitución dos valores destas chaves non debería presentar problemas, pero eliminalas pode causar problemas de compilación de Sass. Nestes casos, terás que modificar o código Sass que fai uso deses valores.danger$theme-colors

Funcións

Bootstrap utiliza varias funcións de Sass, pero só un subconxunto é aplicable á temática xeral. Incluímos tres funcións 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);
}

Estes permítenche escoller unha cor dun mapa Sass moi parecido a como usarías unha variable de cor da v3.

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

Tamén temos outra función para obter un determinado nivel de cor do $theme-colorsmapa. Os valores de niveis negativos iluminarán a cor, mentres que os niveis máis altos escurecerán.

@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áctica, chamarías á función e pasarías dous parámetros: o nome da cor de $theme-colors(por exemplo, primaria ou de perigo) e un nivel numérico.

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

Poderíanse engadir funcións adicionais no futuro ou o seu propio Sass personalizado para crear funcións de nivel para mapas de Sass adicionais, ou incluso un xenérico se quere ser máis detallado.

Contraste de cor

Unha función adicional que incluímos en Bootstrap é a función de contraste de cores, color-yiq. Utiliza o espazo de cor YIQ para devolver automaticamente unha cor de contraste clara ( #fff) ou escura ( #111) en función da cor base especificada. Esta función é especialmente útil para mixins ou loops nos que está a xerar varias clases.

Por exemplo, para xerar mostras de cores a partir do noso $theme-colorsmapa:

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

Tamén se pode usar para necesidades de contraste puntuais:

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

Tamén podes especificar unha cor base coas nosas funcións de mapa de cores:

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

Escape SVG

Usamos a escape-svgfunción para escapar dos caracteres <, >e #para as imaxes de fondo SVG. Estes caracteres deben escaparse para renderizar correctamente as imaxes de fondo en IE. Cando se utiliza a escape-svgfunción, os URI de datos deben ser citados.

Funcións de suma e resta

Usamos as funcións adde subtractpara envolver a calcfunción CSS. O propósito principal destas funcións é evitar erros cando 0se pasa un valor "sen unidade" a unha calcexpresión. Expresións como calc(10px - 0)devolverán un erro en todos os navegadores, a pesar de ser matemáticamente correctas.

Exemplo onde o cálculo é válido:

$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}

Exemplo onde o cálculo non é válido:

$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}

Opcións Sass

Personaliza Bootstrap 4 co noso ficheiro de variables personalizadas integrado e alterna facilmente as preferencias CSS globais coas novas $enable-*variables de Sass. Anular o valor dunha variable e recompilar npm run testsegundo sexa necesario.

Podes atopar e personalizar estas variables para as opcións globais clave no scss/_variables.scssficheiro de Bootstrap.

Cor

Moitos dos distintos compoñentes e utilidades de Bootstrap constrúense a través dunha serie de cores definidas nun mapa Sass. Este mapa pódese recorrer en Sass para xerar rapidamente unha serie de regras.

Todas as cores

Todas as cores dispoñibles en Bootstrap 4 están dispoñibles como variables Sass e un mapa Sass no scss/_variables.scssficheiro. Isto ampliarase en lanzamentos menores posteriores para engadir tons adicionais, ao igual que a paleta de escalas de grises que xa incluímos.

Aquí tes como podes usalos no teu Sass:

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

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

Tamén están dispoñibles clases de utilidade de cores para configurar colore background-color.

Cores temáticas

Usamos un subconxunto de todas as cores para crear unha paleta de cores máis pequena para xerar esquemas de cores, tamén dispoñible como variables Sass e un mapa Sass no scss/_variables.scssficheiro de Bootstrap.

Grises

Un amplo conxunto de variables grises e un mapa Sass scss/_variables.scsspara obter tons de gris consistentes no teu proxecto. Teña en conta que estes son "grises fríos", que tenden a un ton azul sutil, en lugar de grises neutros.

Dentro scss/_variables.scssde , atoparás as variables de cor de Bootstrap e o mapa de Sass. Aquí tes un 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;

Engade, elimina ou modifica valores dentro do mapa para actualizar a forma en que se usan noutros compoñentes. Desafortunadamente, neste momento, non todos os compoñentes utilizan este mapa Sass. As futuras actualizacións procurarán mellorar isto. Ata entón, planea facer uso das ${color}variables e deste mapa de Sass.

Compoñentes

Moitos dos compoñentes e utilidades de Bootstrap están construídos con @eachbucles que iteran sobre un mapa Sass. Isto é especialmente útil para xerar variantes dun compoñente polo noso $theme-colorse crear variantes sensibles para cada punto de interrupción. A medida que personalices estes mapas de Sass e recompiles, verás automaticamente os teus cambios reflectidos nestes bucles.

Modificadores

Moitos dos compoñentes de Bootstrap están construídos cun enfoque de clase modificador base. Isto significa que a maior parte do estilo está contida nunha clase base (por exemplo, .btn) mentres que as variacións de estilo están limitadas a clases modificadoras (por exemplo, .btn-danger). Estas clases modificadoras constrúense a partir do $theme-colorsmapa para personalizar o número e o nome das nosas clases modificadoras.

Aquí tes dous exemplos de como recorremos o $theme-colorsmapa para xerar modificadores para o .alertcompoñente e todas as nosas .bg-*utilidades en 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);
}

Sensible

Estes bucles Sass tampouco se limitan a mapas de cores. Tamén pode xerar variacións sensibles dos seus compoñentes ou utilidades. Tome, por exemplo, as nosas utilidades de aliñamento de texto receptivo onde mesturamos un @eachbucle para o $grid-breakpointsmapa Sass cunha consulta multimedia 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 necesitas modificar o teu $grid-breakpoints, os teus cambios aplicaranse a todos os bucles que iteran sobre ese mapa.

Variables CSS

Bootstrap 4 inclúe preto de dúas ducias de propiedades personalizadas (variables) CSS no seu CSS compilado. Estes proporcionan un fácil acceso a valores de uso habitual, como as nosas cores do tema, os puntos de interrupción e as pilas de fontes primarias cando traballas no Inspector do teu navegador, nun sandbox de código ou na creación de prototipos en xeral.

Variables dispoñibles

Aquí están as variables que incluímos (ten en conta que :rooté necesario). Localízanse no noso _root.scssficheiro.

: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, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Exemplos

As variables CSS ofrecen unha flexibilidade similar ás variables de Sass, pero sen necesidade de compilalas antes de ser enviadas ao navegador. Por exemplo, aquí estamos a restablecer o tipo de letra e os estilos de ligazón da nosa páxina con variables CSS.

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

Variables do punto de ruptura

Aínda que orixinalmente incluímos puntos de interrupción nas nosas variables CSS (por exemplo, --breakpoint-md), estes non se admiten nas consultas multimedia , pero aínda se poden usar dentro de conxuntos de regras nas consultas multimedia. Estas variables de punto de interrupción permanecen no CSS compilado para compatibilidade con versións anteriores, xa que poden ser utilizadas por JavaScript. Máis información na especificación .

Aquí tes un exemplo do que non é compatible:

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

E aquí tes un exemplo do que se admite:

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