Téma Bootstrap

Sesuaikeun Bootstrap 4 sareng variabel Sass anu diwangun-di anyar pikeun preferensi gaya global pikeun téma sareng parobahan komponén anu gampang.

Bubuka

Dina Bootstrap 3, theming ieu lolobana disetir ku overrides variabel dina KURANG, CSS custom, sarta stylesheet tema misah nu urang kaasup kana distfile urang. Kalayan sababaraha usaha, saurang tiasa ngadesain deui tampilan Bootstrap 3 tanpa ngarampa file inti. Bootstrap 4 nyayogikeun pendekatan anu akrab, tapi rada béda.

Ayeuna, téma dilaksanakeun ku variabel Sass, peta Sass, sareng CSS khusus. Teu aya deui stylesheet tema khusus; tibatan, anjeun tiasa ngaktipkeun téma diwangun-di pikeun nambahkeun gradién, kalangkang, sareng nu sanesna.

Sass

Anggo file Sass sumber kami pikeun ngamangpaatkeun variabel, peta, mixin, sareng seueur deui.

Struktur file

Sabisana, ulah ngarobah file inti Bootstrap. Pikeun Sass, éta hartosna nyiptakeun stylesheet anjeun nyalira anu ngimpor Bootstrap supados anjeun tiasa ngarobih sareng manjangkeunana. Anggap anjeun nganggo manajer pakét sapertos npm, anjeun bakal gaduh struktur file sapertos kieu:

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

Upami anjeun parantos ngaunduh file sumber kami sareng henteu nganggo manajer pakét, anjeun badé nyetél sacara manual hal anu sami sareng struktur éta, ngajaga file sumber Bootstrap misah ti anjeun sorangan.

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

Ngimpor

Dina anjeun custom.scss, anjeun bakal ngimpor file Sass sumber Bootstrap. Anjeun gaduh dua pilihan: kalebet sadayana Bootstrap, atanapi pilih bagian anu anjeun peryogikeun. Kami ajak anu terakhir, sanaos sadar aya sababaraha syarat sareng katergantungan dina komponén urang. Anjeun ogé kedah ngalebetkeun sababaraha JavaScript pikeun plugins kami.

// 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";

Kalayan pangaturan éta, anjeun tiasa ngawitan ngarobih salah sahiji variabel sareng peta Sass dina file custom.scss. Anjeun oge bisa ngamimitian nambahkeun bagéan Bootstrap handapeun // Optionalbagian sakumaha diperlukeun. Kami nyarankeun ngagunakeun tumpukan impor lengkep tina bootstrap.scssfile kami salaku titik awal anjeun.

standar variabel

Unggal variabel Sass dina Bootstrap 4 kalebet !defaultbandéra anu ngamungkinkeun anjeun nimpa nilai standar variabel dina Sass anjeun nyalira tanpa ngarobih kode sumber Bootstrap. Salin sareng témpél variabel upami diperyogikeun, modifikasi nilaina, sareng cabut !defaultbandéra. Upami variabel parantos ditugaskeun, maka éta moal ditugaskeun deui ku nilai standar dina Bootstrap.

Anjeun bakal mendakan daptar lengkep variabel Bootstrap dina scss/_variables.scss.

Variabel overrides dina file Sass sarua bisa datang saméméh atawa sanggeus variabel standar. Najan kitu, nalika overriding sakuliah file Sass, overrides Anjeun kudu datang saméméh anjeun ngimpor file Sass Bootstrap urang.

Ieu conto anu ngarobih background-colorsareng colornalika <body>ngimpor sareng nyusun Bootstrap via npm:

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

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

Ulang sakumaha diperlukeun pikeun sagala variabel dina Bootstrap, kaasup pilihan global handap.

Peta sareng puteran

Bootstrap 4 ngawengku sakeupeul peta Sass, pasangan nilai konci nu nyieun leuwih gampang pikeun ngahasilkeun kulawarga CSS patali. Kami nganggo peta Sass pikeun warna, titik putus grid, sareng seueur deui. Sapertos variabel Sass, sadaya peta Sass kalebet !defaultbandéra sareng tiasa ditindih sareng diperpanjang.

Sababaraha peta Sass urang dihijikeun kana peta kosong sacara standar. Hal ieu dilakukeun pikeun ngamungkinkeun ékspansi gampang tina peta Sass anu dipasihkeun, tapi hargana pikeun ngaleungitkeun barang tina peta anu rada sesah.

Ngarobah peta

Pikeun ngarobih warna anu aya dina $theme-colorspeta kami, tambahkeun ieu kana file Sass khusus anjeun:

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

Tambahkeun ka peta

Pikeun nambahkeun warna anyar kana $theme-colors, tambahkeun konci anyar jeung nilai:

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

Cabut tina peta

Pikeun miceun kelir tina $theme-colors, atawa peta sejenna, pake map-remove. Sadar yén anjeun kedah ngalebetkeun éta antara syarat sareng pilihan kami:

// 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";
...

konci diperlukeun

Bootstrap nganggap ayana sababaraha konci khusus dina peta Sass nalika kami nganggo sareng ngalegaan ieu nyalira. Nalika anjeun ngaluyukeun peta anu kalebet, anjeun tiasa mendakan kasalahan nalika konci peta Sass khusus dianggo.

Contona, urang make primary, success, jeung dangerkenop ti $theme-colorspikeun tumbu, tombol, jeung kaayaan formulir. Ngaganti nilai konci ieu teu kedah aya masalah, tapi ngahapus aranjeunna tiasa nyababkeun masalah kompilasi Sass. Dina hal ieu, anjeun kedah ngarobih kodeu Sass anu ngagunakeun nilai-nilai éta.

Fungsi

Bootstrap ngagunakeun sababaraha pungsi Sass, tapi ngan sawaréh sawaréh lumaku pikeun téma umum. Kami geus kaasup tilu fungsi pikeun meunangkeun nilai tina peta warna:

@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);
}

Ieu ngamungkinkeun anjeun milih hiji warna tina peta Sass sapertos kumaha anjeun ngagunakeun variabel warna tina v3.

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

Urang ogé boga fungsi sejen pikeun meunangkeun tingkat nu tangtu warna tina $theme-colorspeta. Nilai tingkat négatip bakal terang warna, sedengkeun tingkat anu langkung luhur bakal poék.

@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);
}

Dina prakna, anjeun kedah nyauran fungsi sareng lulus dina dua parameter: nami warna ti $theme-colors(contona, primér atanapi bahaya) sareng tingkat numerik.

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

Fungsi tambahan bisa ditambahkeun dina mangsa nu bakal datang atawa Sass custom anjeun sorangan pikeun nyieun fungsi tingkat pikeun peta Sass tambahan, atawa malah hiji generik lamun hayang jadi leuwih verbose.

Kontras warna

Salah sahiji fungsi tambahan anu kami kalebet dina Bootstrap nyaéta fungsi kontras warna color-yiq,. Éta ngagunakeun rohangan warna YIQ pikeun otomatis ngabalikeun warna kontras lampu ( #fff) atanapi poék ( #111) dumasar kana warna dasar anu ditangtukeun. Pungsi ieu hususna kapaké pikeun mixin atanapi loop dimana anjeun ngahasilkeun sababaraha kelas.

Contona, pikeun ngahasilkeun swatch warna tina $theme-colorspeta kami:

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

Éta ogé tiasa dianggo pikeun kabutuhan kontras sakali:

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

Anjeun ogé tiasa netepkeun warna dasar kalayan fungsi peta warna kami:

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

Pilihan Sass

Sesuaikeun Bootstrap 4 sareng file variabel khusus anu diwangun sareng gampang togél preferensi CSS global sareng $enable-*variabel Sass énggal. Override nilai variabel sarta recompile kalawan npm run testsakumaha diperlukeun.

Anjeun tiasa mendakan sareng ngaluyukeun variabel ieu pikeun pilihan global konci dina scss/_variables.scssfile Bootstrap.

Variabel	Nilai-nilai	Katerangan
`$spacer`	`1rem`(standar), atanapi nilai naon waé> 0	Nangtukeun nilai spacer standar pikeun ngahasilkeun utilitas spacer sacara terprogram .
`$enable-rounded`	`true`(standar) atawa`false`	Aktipkeun gaya tos siap `border-radius`dina sababaraha komponén.
`$enable-shadows`	`true`atawa `false`(standar)	Aktipkeun gaya tos siap `box-shadow`dina sababaraha komponén.
`$enable-gradients`	`true`atawa `false`(standar)	Aktipkeun gradién anu tos ditetepkeun liwat `background-image`gaya dina sababaraha komponén.
`$enable-transitions`	`true`(standar) atawa`false`	Aktipkeun s tos siap `transition`dina rupa komponén.
`$enable-hover-media-query`	`true`atawa `false`(standar)	Dipulut
`$enable-grid-classes`	`true`(standar) atawa`false`	Aktipkeun generasi kelas CSS pikeun sistem grid (misalna, `.container`, `.row`, `.col-md-1`, jsb).
`$enable-caret`	`true`(standar) atawa`false`	Aktipkeun unsur pseudo caret on `.dropdown-toggle`.
`$enable-print-styles`	`true`(standar) atawa`false`	Aktipkeun gaya pikeun ngaoptimalkeun percetakan.

Warna

Seueur rupa-rupa komponén sareng utilitas Bootstrap diwangun ku sababaraha warna anu ditetepkeun dina peta Sass. peta ieu bisa looped leuwih dina Sass pikeun gancang ngahasilkeun runtuyan rulesets.

Kabéh kelir

Sadaya warna anu aya dina Bootstrap 4, sayogi salaku variabel Sass sareng peta Sass dina scss/_variables.scssfile. Ieu bakal dilegaan dina sékrési minor salajengna pikeun nambihan nuansa tambahan, sapertos palette grayscale anu kami parantos kalebet.

Biru

Indigo

Ungu

Pink

Beureum

oranyeu

Koneng

Héjo

Teal

Sian

Ieu kumaha anjeun tiasa nganggo ieu dina Sass anjeun:

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

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

kelas utiliti warna oge sadia pikeun setelan colorna background-color.

Ka hareupna, kami badé nyayogikeun peta sareng variabel Sass pikeun nuansa unggal warna sapertos anu parantos dilakukeun ku warna abu-abu di handap ieu.

Warna téma

Kami nganggo sawaréh sadaya warna pikeun nyiptakeun palette warna anu langkung alit pikeun ngahasilkeun skéma warna, ogé sayogi salaku variabel Sass sareng peta Sass dina scss/_variables.scssfile Bootstraps.

primér

Sekunder

Kasuksésan

Bahaya

Awas

Inpo

Caang

Poek

Grays

Hiji set expansive variabel abu sarta peta Sass scss/_variables.scsspikeun nuansa konsisten abu sakuliah proyék Anjeun.

100

200

300

400

500

600

700

800

900

Dina scss/_variables.scss, anjeun bakal mendakan variabel warna Bootstrap sareng peta Sass. Ieu conto $colorspeta 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;

Tambihkeun, piceun, atanapi robih niléy dina peta pikeun ngapdet kumaha aranjeunna dianggo dina seueur komponén sanés. Hanjakalna dina waktos ayeuna, henteu unggal komponén ngagunakeun peta Sass ieu. Pembaruan anu bakal datang bakal narékahan pikeun ningkatkeun ieu. Dugi ka waktos éta, rencanana ngagunakeun ${color}variabel sareng peta Sass ieu.

Komponén

Seueur komponén sareng utilitas Bootstrap diwangun ku @eachputeran anu ngulang dina peta Sass. Ieu hususna mantuan pikeun ngahasilkeun varian komponén ku urang $theme-colorsjeung nyieun varian responsif pikeun tiap breakpoint. Nalika anjeun ngaluyukeun peta Sass ieu sareng nyusun ulang, anjeun bakal otomatis ningali parobihan anjeun ditingali dina puteran ieu.

Modifiers

Seueur komponén Bootstrap diwangun kalayan pendekatan kelas modifier dasar. Ieu ngandung harti yén sabagéan ageung styling dikandung dina kelas dasar (contona, .btn) sedengkeun variasi gaya dipasrahkeun ka kelas modifier (contona, .btn-danger). Kelas modifier ieu diwangun tina $theme-colorspeta pikeun nyaluyukeun jumlah sareng nami kelas modifier kami.

Di dieu aya dua conto kumaha urang loop ngaliwatan $theme-colorspeta pikeun ngahasilkeun modifiers kana .alertkomponén tur sagala .bg-*Utiliti tukang urang.

// 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);
}

Responsif

Gelung Sass ieu ogé henteu dugi ka peta warna. Anjeun oge bisa ngahasilkeun variasi responsif komponén Anjeun atawa Utiliti. Candak contona utilitas alignment téks responsif urang dimana urang nyampur hiji @eachloop pikeun $grid-breakpointspeta Sass kalawan query média ngawengku.

@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; }
  }
}

Upami anjeun kedah ngarobih $grid-breakpoints, parobihan anjeun bakal dilarapkeun ka sadaya puteran anu diulang dina peta éta.

variabel CSS

Bootstrap 4 ngawengku sabudeureun dua belasan sipat custom CSS (variabel) dina CSS na disusun. Ieu nyadiakeun aksés gampang kana nilai nu ilahar dipake kawas warna tema urang, titik putus, jeung tumpukan font primér nalika digawé di Inspektur browser anjeun, sandbox kode, atawa prototyping umum.

variabel sadia

Ieu mangrupikeun variabel anu kami kalebet (perhatikeun yén :rootdiperyogikeun). _root.scssÉta aya dina file kami .

: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;
}

Contona

Variabel CSS nawiskeun kalenturan anu sami sareng variabel Sass, tapi tanpa peryogi kompilasi sateuacan dilayanan ka browser. Contona, di dieu urang ngareset font kaca urang jeung gaya link kalawan variabel CSS.

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

Variabel breakpoint

Bari urang asalna kaasup breakpoints dina variabel CSS kami (misalna, --breakpoint-md), ieu teu dirojong dina queries média , tapi maranéhna masih bisa dipaké dina rulesets dina queries média. Variabel breakpoint ieu tetep dina CSS disusun pikeun kasaluyuan mundur tinangtu bisa garapan JavaScript. Diajar langkung seueur dina spésifikasi.

Ieu conto naon anu henteu didukung:

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

Sareng ieu conto naon anu didukung:

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