Source

Tema Bootstrap

Kustomisasi Bootstrap 4 karo variabel Sass sing dibangun anyar kanggo preferensi gaya global kanggo owah-owahan tema lan komponen sing gampang.

Pambuka

Ing Bootstrap 3, tema umume didorong dening owah-owahan variabel ing KURANG, CSS khusus, lan lembar gaya tema sing kapisah sing kalebu ing distfile kita. Kanthi sawetara gaweyan, siji bisa ngrancang maneh tampilan Bootstrap 3 tanpa ndemek file inti. Bootstrap 4 nyedhiyakake pendekatan sing akrab, nanging rada beda.

Saiki, tema wis rampung dening variabel Sass, peta Sass, lan CSS khusus. Ora ana lembar gaya tema khusus; tinimbang, sampeyan bisa ngaktifake tema sing dibangun kanggo nambah gradien, bayangan, lan liya-liyane.

Sass

Gunakake file Sass sumber kita kanggo njupuk kauntungan saka variabel, peta, mixin, lan liya-liyane. Ing mbangun kita wis nambah tliti Sass babak kanggo 6 (kanthi standar iku 5) kanggo nyegah masalah karo browser rounding.

Struktur berkas

Yen bisa, aja ngowahi file inti Bootstrap. Kanggo Sass, tegese nggawe stylesheet dhewe sing ngimpor Bootstrap supaya sampeyan bisa ngowahi lan ngluwihi. Yen sampeyan nggunakake manajer paket kaya npm, sampeyan bakal duwe struktur file sing katon kaya iki:

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

Yen sampeyan wis ndownload file sumber lan ora nggunakake manajer paket, sampeyan pengin nyetel kanthi manual kaya struktur kasebut, supaya file sumber Bootstrap kapisah saka sampeyan dhewe.

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

Ngimpor

Ing custom.scss, sampeyan bakal ngimpor file Sass sumber Bootstrap. Sampeyan duwe rong pilihan: kalebu kabeh Bootstrap, utawa pilih bagean sing dibutuhake. Kita nyengkuyung sing terakhir, sanajan ngerti ana sawetara syarat lan dependensi ing komponen kita. Sampeyan uga kudu nyakup sawetara JavaScript kanggo plugin kita.

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

Kanthi persiyapan kasebut, sampeyan bisa miwiti ngowahi variabel lan peta Sass ing custom.scss. Sampeyan uga bisa miwiti nambah bagean Bootstrap ing // Optionalbagean sing dibutuhake. Disaranake nggunakake tumpukan impor lengkap saka bootstrap.scssfile kita minangka titik wiwitan.

Default variabel

Saben variabel Sass ing Bootstrap 4 kalebu !defaultgendera sing ngidini sampeyan ngganti nilai standar variabel kasebut ing Sass sampeyan dhewe tanpa ngowahi kode sumber Bootstrap. Salin lan tempel variabel yen perlu, ngowahi nilai, lan mbusak !defaultgendera. Yen variabel wis ditugasake, mula ora bakal ditugasake maneh dening nilai standar ing Bootstrap.

Sampeyan bakal nemokake dhaptar lengkap variabel Bootstrap ing scss/_variables.scss.

Variabel overrides ing file Sass sing padha bisa teka sadurunge utawa sawise variabel standar. Nanging, nalika overriding antarane file Sass, overrides sampeyan kudu teka sadurunge sampeyan ngimpor file Sass Bootstrap.

Mangkene conto sing ngganti background-colorlan colornalika <body>ngimpor lan nyusun Bootstrap liwat npm:

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

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

Baleni yen perlu kanggo variabel apa wae ing Bootstrap, kalebu pilihan global ing ngisor iki.

Peta lan puteran

Bootstrap 4 kalebu sawetara peta Sass, pasangan nilai kunci sing luwih gampang ngasilake kulawarga CSS sing gegandhengan. Kita nggunakake peta Sass kanggo werna, breakpoints kothak, lan liyane. Kaya variabel Sass, kabeh peta Sass kalebu !defaultgendera lan bisa diganti lan ditambahi.

Sawetara peta Sass kita digabung dadi peta kosong minangka standar. Iki wis rampung kanggo ngidini expansion gampang saka map Sass diwenehi, nanging rawuh ing biaya njabut item saka peta rada luwih angel.

Ngowahi peta

Kanggo ngowahi warna sing ana ing $theme-colorspeta kita, tambahake ing ngisor iki menyang file Sass khusus sampeyan:

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

Tambah menyang peta

Kanggo nambah warna anyar menyang $theme-colors, tambahake tombol lan nilai anyar:

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

Mbusak saka peta

Kanggo mbusak werna saka $theme-colors, utawa peta liyane, gunakake map-remove. Elinga yen sampeyan kudu nglebokake ing antarane syarat lan pilihan:

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

Tombol sing dibutuhake

Bootstrap nganggep ana sawetara tombol tartamtu ing peta Sass nalika kita nggunakake lan ngluwihi iki dhewe. Nalika sampeyan ngatur peta sing kalebu, sampeyan bisa nemoni kesalahan ing ngendi kunci peta Sass tartamtu digunakake.

Contone, kita nggunakake primary, success, lan dangertombol saka $theme-colorskanggo pranala, tombol, lan wangun negara. Ngganti nilai kunci kasebut ora ana masalah, nanging mbusak bisa nyebabake masalah kompilasi Sass. Ing kasus iki, sampeyan kudu ngowahi kode Sass sing nggunakake nilai kasebut.

Fungsi

Bootstrap nggunakake sawetara fungsi Sass, nanging mung subset sing bisa ditrapake kanggo tema umum. Kita wis kalebu telung fungsi kanggo njupuk nilai saka peta werna:

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

Iki ngidini sampeyan milih siji warna saka peta Sass kaya carane sampeyan nggunakake variabel warna saka v3.

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

Kita uga duwe fungsi liyane kanggo njupuk tingkat tartamtu saka werna saka $theme-colorspeta. Nilai level negatif bakal madhangi warna, dene level sing luwih dhuwur bakal dadi peteng.

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

Ing laku, sampeyan bakal nelpon fungsi lan pass ing rong paramèter: jeneng saka werna $theme-colors(contone, utami utawa bebaya) lan tingkat numerik.

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

Fungsi tambahan bisa ditambahake ing mangsa ngarep utawa Sass adat dhewe kanggo nggawe fungsi level kanggo peta Sass tambahan, utawa malah sing umum yen sampeyan pengin dadi luwih verbose.

Kontras warna

Salah sawijining fungsi tambahan sing kalebu ing Bootstrap yaiku fungsi kontras warna, color-yiq. Iki nggunakake ruang warna YIQ kanggo ngasilake warna kontras cahya ( #fff) utawa peteng ( #111) kanthi otomatis adhedhasar warna dhasar sing ditemtokake. Fungsi iki utamané migunani kanggo mixin utawa puteran ing ngendi sampeyan ngasilake pirang-pirang kelas.

Contone, kanggo ngasilake swatch warna saka $theme-colorspeta kita:

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

Bisa uga digunakake kanggo kabutuhan kontras siji-siji:

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

Sampeyan uga bisa nemtokake warna dhasar kanthi fungsi peta warna:

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

Pilihan Sass

Kustomisasi Bootstrap 4 nganggo file variabel khusus sing dibangun lan gampang ngalih preferensi CSS global nganggo $enable-*variabel Sass anyar. Ganti nilai variabel lan kompilasi maneh yen npm run testperlu.

Sampeyan bisa nemokake lan ngatur variabel kasebut kanggo pilihan global utama ing scss/_variables.scssfile Bootstrap.

Variabel	Nilai	Katrangan
`$spacer`	`1rem`(standar), utawa nilai apa wae> 0	Nemtokake nilai spacer standar kanggo ngasilake utilitas spacer kanthi program .
`$enable-rounded`	`true`(standar) utawa`false`	Mbisakake `border-radius`gaya sing wis ditemtokake ing macem-macem komponen.
`$enable-shadows`	`true`utawa `false`(standar)	Mbisakake `box-shadow`gaya sing wis ditemtokake ing macem-macem komponen.
`$enable-gradients`	`true`utawa `false`(standar)	Ngaktifake gradien sing wis ditemtokake liwat `background-image`gaya ing macem-macem komponen.
`$enable-transitions`	`true`(standar) utawa`false`	Mbisakake `transition`s sing wis ditemtokake ing macem-macem komponen.
`$enable-prefers-reduced-motion-media-query`	`true`(standar) utawa`false`	Ngaktifake pitakon `prefers-reduced-motion`media , sing nyuda animasi/transisi tartamtu adhedhasar preferensi browser/sistem operasi pangguna.
`$enable-hover-media-query`	`true`utawa `false`(standar)	Ditinggalake
`$enable-grid-classes`	`true`(standar) utawa`false`	Ngaktifake generasi kelas CSS kanggo sistem kothak (contone, `.container`, `.row`, `.col-md-1`, etc.).
`$enable-caret`	`true`(standar) utawa`false`	Ngaktifake caret unsur pseudo ing `.dropdown-toggle`.
`$enable-print-styles`	`true`(standar) utawa`false`	Ngaktifake gaya kanggo ngoptimalake printing.
`$enable-validation-icons`	`true`(standar) utawa`false`	Ngaktifake `background-image`lambang ing input teks lan sawetara formulir khusus kanggo status validasi.

warna

Akeh macem-macem komponen lan keperluan Bootstrap dibangun liwat seri warna sing ditetepake ing peta Sass. Peta iki bisa diubengi ing Sass kanggo ngasilake serangkaian aturan kanthi cepet.

Kabeh werna

Kabeh werna sing kasedhiya ing Bootstrap 4, kasedhiya minangka variabel Sass lan peta Sass ing scss/_variables.scssfile. Iki bakal ditambahi ing rilis cilik sabanjure kanggo nambah warna tambahan, kaya palet skala abu -abu sing wis kalebu.

Biru

indigo

wungu

Jambon

abang

Oranye

kuning

Ijo

Teal

Cyan

Mangkene carane sampeyan bisa nggunakake iki ing Sass:

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

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

kelas sarana werna uga kasedhiya kanggo setelan colorlan background-color.

Ing mangsa ngarep, kita bakal ngarahake nyedhiyakake peta lan variabel Sass kanggo warna saben warna kaya sing wis ditindakake kanthi werna abu-abu ing ngisor iki.

Warna tema

Kita nggunakake subset saka kabeh werna kanggo nggawe palet werna sing luwih cilik kanggo ngasilake skema warna, uga kasedhiya minangka variabel Sass lan peta Sass ing scss/_variables.scssfile Bootstraps.

utami

Sekunder

Sukses

bebaya

Pènget

Info

cahya

Peteng

werna abu-abu

Variabel abu-abu sing jembar lan peta Sass scss/_variables.scsskanggo warna abu-abu sing konsisten ing proyek sampeyan. Elinga yen iki minangka "abu-abu kelangan", sing cenderung menyang nada biru subtle, tinimbang werna abu-abu netral.

100

200

300

400

500

600

700

800

900

Ing scss/_variables.scss, sampeyan bakal nemokake variabel warna Bootstrap lan peta Sass. Punika 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;

Nambah, mbusak, utawa ngowahi nilai ing peta kanggo nganyari cara digunakake ing akeh komponen liyane. Sayange ing wektu iki, ora saben komponen nggunakake peta Sass iki. Nganyari mbesuk bakal ngupayakake supaya bisa nambah. Nganti saiki, rencana nggunakake ${color}variabel lan peta Sass iki.

Komponen

Akeh komponen lan utilitas Bootstrap sing dibangun nganggo @eachputeran sing diulang ing peta Sass. Iki utamané mbiyantu kanggo ngasilake varian saka komponen dening kita $theme-colorslan nggawe varian responsif kanggo saben breakpoint. Nalika sampeyan ngatur peta Sass iki lan kompilasi maneh, sampeyan bakal kanthi otomatis ndeleng owah-owahan sing dibayangke ing puteran iki.

Modifiers

Akeh komponen Bootstrap dibangun kanthi pendekatan kelas modifier dhasar. Iki tegese akeh gaya ana ing kelas dhasar (contone, .btn) nalika variasi gaya diwatesi ing kelas modifier (contone, .btn-danger). Kelas modifier iki dibangun saka $theme-colorspeta kanggo nggawe kustomisasi nomer lan jeneng kelas modifier kita.

Ing ngisor iki ana rong conto babagan carane ngubengi $theme-colorspeta kanggo ngasilake modifikasi .alertkomponen lan kabeh .bg-*keperluan latar mburi.

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

Daur ulang Sass iki ora diwatesi ing peta warna. Sampeyan uga bisa ngasilake variasi responsif komponen utawa keperluan sampeyan. Contone, utilitas alignment teks responsif ing ngendi kita nyampur @eachloop kanggo $grid-breakpointspeta Sass kanthi query media kalebu.

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

Yen sampeyan kudu ngowahi $grid-breakpoints, pangowahan sampeyan bakal ditrapake kanggo kabeh puteran ing peta kasebut.

variabel CSS

Bootstrap 4 kalebu udakara rong lusin properti khusus CSS (variabel) ing CSS sing dikompilasi. Iki nyedhiyakake akses gampang menyang nilai sing umum digunakake kaya warna tema, titik istirahat, lan tumpukan font utama nalika nggarap Inspektur browser, kothak wedhi kode, utawa prototipe umum.

Variabel sing kasedhiya

Mangkene variabel sing kalebu (cathetan yen :rootdibutuhake). _root.scssPadha dumunung ing file kita .

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

Tuladha

Variabel CSS nawakake keluwesan sing padha karo variabel Sass, nanging tanpa perlu kompilasi sadurunge dilayani menyang browser. Contone, ing kene kita ngreset gaya font lan pranala kaca kita nganggo variabel CSS.

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

Variabel breakpoint

Nalika kita asline kalebu breakpoints ing variabel CSS kita (contone, --breakpoint-md), iki ora didhukung ing pitakon media , nanging isih bisa digunakake ing set aturan ing pitakon media. Variabel breakpoint iki tetep ana ing CSS sing dikompilasi kanggo kompatibilitas mundur amarga bisa digunakake dening JavaScript. Sinau luwih lengkap ing spek .

Iki conto sing ora didhukung:

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

Lan ing ngisor iki conto apa sing didhukung:

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