in English

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 kanggo njupuk kauntungan saka variabel, peta, mixin, lan liya-liyane nalika nyusun Sass nggunakake pipa aset sampeyan dhewe.

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

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

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 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. Sawetara variabel disetel menyang null, variabel kasebut ora ngasilake properti kasebut kajaba ditimpa ing konfigurasi sampeyan.

Penggantian variabel kudu ditindakake sawise fungsi, variabel, lan campuran diimpor, nanging sadurunge impor liyane.

Mangkene conto sing ngganti background-colorlan colornalika <body>ngimpor lan nyusun Bootstrap liwat 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

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

Miwiti Bootstrap liwat npm karo proyek wiwitan kita! Pindhah menyang repositori template twbs/bootstrap-npm-starter kanggo ndeleng carane mbangun lan ngatur Bootstrap ing proyek npm sampeyan dhewe. Kalebu kompiler Sass, Autoprefixer, Stylelint, PurgeCSS, lan Ikon Bootstrap.

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

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`
}

Uwal SVG

Kita nggunakake escape-svgfungsi kanggo uwal saka <, >lan #karakter kanggo gambar latar mburi SVG. Karakter iki kudu uwal kanggo nerjemahake gambar latar mburi kanthi bener ing IE. Nalika nggunakake escape-svgfungsi kasebut, URI data kudu dipetik.

Fungsi Tambah lan Kurangi

Kita nggunakake addlan subtractfungsi kanggo mbungkus calcfungsi CSS. Tujuan utama fungsi kasebut yaiku kanggo ngindhari kesalahan nalika nilai "unitless" diterusake 0menyang calcekspresi. Ekspresi kaya calc(10px - 0)bakal ngasilake kesalahan ing kabeh browser, sanajan bener kanthi matematis.

Conto ing endi calc sah:

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

Conto ing ngendi calc ora valid:

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

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 hiasan sing wis ditemtokake ing macem-macem komponen. Ora mengaruhi `box-shadow`s digunakake kanggo negara fokus.
`$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-pointer-cursor-for-buttons`	`true`(standar) utawa`false`	Tambah kursor "tangan" menyang unsur tombol sing ora dipatèni.
`$enable-print-styles`	`true`(standar) utawa`false`	Ngaktifake gaya kanggo ngoptimalake printing.
`$enable-responsive-font-sizes`	`true`utawa `false`(standar)	Ngaktifake ukuran font responsif .
`$enable-validation-icons`	`true`(standar) utawa`false`	Ngaktifake `background-image`lambang ing input teks lan sawetara formulir khusus kanggo status validasi.
`$enable-deprecation-messages`	`true`(standar) utawa`false`	Setel kanggo `false`kanggo ndhelikake bebaya nalika nggunakake samubarang mixin lan fungsi sing wis direncanakake bakal dibusak ing `v5`.

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 #007bff

$ indigo #6610f2

$ungu #6f42c1

$pink #e83e8c

$abang #dc3545

$oranye #fd7e14

$kuning #ffc107

$ijo #28a745

$tegal #20c997

$cyan #17a2b8

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 kabeh warna kanggo nggawe palet warna sing luwih cilik kanggo ngasilake skema warna, uga kasedhiya minangka variabel Sass lan peta Sass ing scss/_variables.scssfile Bootstrap.

$utama #007bff

$sekunder #6c757d

$sukses #28a745

$bebaya #dc3545

$awas #ffc107

$informasi #17a2b8

$cahya #f8f9fa

$peteng #343a40

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.

$abu-100 #f8f9fa

$ abu-abu-200 #e9ecef

$ abu-abu-300 #dee2e6

$ abu-abu-400 #ced4da

$ abu-abu-500 #adb5bd

$ abu-abu-600 #6c757d

$ abu-abu-700 #495057

$ abu-abu-800 #343a40

$ abu-abu-900 #212529

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, "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;
}

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