cs | ja Přizpůsobení proměnných
Proměnné Sass
Proměnné Sass zdrojového kódu Bootstrap jsou definovány v _variables.scss s volbou !default. Tyto proměnné můžete změnit nebo upravit a přizpůsobit tak styly Bootstrap.
Základní parametry
Níže uvedené proměnné jsou základní parametry pro nastavení celého stylu.
-
$font-size-base: Základní velikost písma (výchozí:1rem), ovlivňuje všechny velikosti písma stylů Bootstrap -
$spacer: Jednotková délka pro nástroje Spacing (výchozí:1rem)
// Use 10% smaller fonts$font-size-base: 0.9rem;// import Bootstrap@import "bootstrap/scss/bootstrap";Změna předvoleb přizpůsobení
Proměnné, které začínají $enable-, jsou vestavěné předvolby přizpůsobení (jejich úplný výčet najdete v možnostech Sass). Například gradienty a stíny jsou ve výchozím nastavení vypnuty (ve verzi 4.1.1). Tyto možnosti můžete povolit pomocí kódu rozšíření, jak je uvedeno níže.
gradient+shadow.scss (počáteční část)// initialize customization variables$enable-gradients: true;$enable-shadows: true;// import Bootstrap@import "bootstrap/scss/bootstrap";...Podívejte se na efekty gradace a stínů a zkontrolujte rozdíly vizuálního zobrazení.
Modifikace proměnných mapy
Sass podporuje různé typy proměnných (viz Datové typy). Většina proměnných je skalární (čísla, řetězce, barvy, booleany a null). Níže uvedené proměnné jsou však definovány jako mapy klíč-hodnota.
-
$grays: Předvolby stupnice šedi -
$colors: Základní barvy (modrá, indigová, fialová, …) -
$theme-colors: Barvy motivu Bootstrap (primární, sekundární, úspěch, …).) -
$spacers: Přednastavené hodnoty utitulů Spacing -
$sizes: Přednastavené hodnoty utitulů Sizing -
$grid-breakpoints: Přednastavené hodnoty bodů zlomu mřížky (šířka viewportu) -
$container-max-widths: Šířka kontejneru mřížky pro jednotlivé body zlomu
Tyto proměnné můžete také upravit. Přidávání a změna hodnot jsou snadné.
variables.scss (zdrojový kód Sass pro tuto stránku)// 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";Níže jsou živé ukázky upozornění (porovnejte s výchozími barvami Bootstrapu ⇒ viz příklady v oficiálním dokumentu).
div.alert.alert-success div.alert.alert-custom Stávající položky mapy můžete také odstranit pomocí vestavěných funkcí Sass (hledejte map-remove($map, $keys...) z map-functions). Musíte však inviduálně importovat dílčí prvky. Podrobnosti najdete v části Odstranit z mapy oficiálního dokumentu.