in English

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, campuran, sareng seueur deui nalika nyusun Sass nganggo pipa aset anjeun nyalira.

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

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

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 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. Sababaraha variabel disetel ka null, variabel ieu teu kaluaran harta iwal aranjeunna overridden dina konfigurasi Anjeun.

Variabel overrides kudu datang sanggeus fungsi urang, variabel, jeung mixins diimpor, tapi saméméh sesa impor.

Ieu conto anu ngarobih background-colorsareng colornalika <body>ngimpor sareng nyusun Bootstrap via 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

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

Mimitian ku Bootstrap via npm sareng proyék starter kami! Sirah kana repositori template twbs/bootstrap-npm-starter pikeun ningali kumaha ngawangun sareng ngaropea Bootstrap dina proyék npm anjeun nyalira. Ngawengku kompiler Sass, Autoprefixer, Stylelint, PurgeCSS, sareng Ikon Bootstrap.

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

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

Kabur SVG

Urang make escape-svgfungsi kabur ka <, >jeung #karakter pikeun gambar tukang SVG. Karakter ieu kedah kabur supados leres ngadamel gambar latar dina IE. Nalika nganggo escape-svgfungsina, URI data kedah dicutat.

Nambahkeun jeung Ngurangan fungsi

Kami nganggo addsareng subtractfungsi pikeun mungkus calcfungsi CSS. Tujuan utama fungsi ieu nyaéta pikeun ngahindarkeun kasalahan nalika nilai "unitless" dialihkeun 0kana calcéksprési. Babasan sapertos calc(10px - 0)bakal ngabalikeun kasalahan dina sadaya panyungsi, sanaos leres sacara matematis.

Conto mana 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 mana calc teu 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

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) atawafalse Aktipkeun gaya tos siap border-radiusdina sababaraha komponén.
$enable-shadows trueatawa false(standar) Aktipkeun gaya hiasan anu tos siap box-shadowdina sababaraha komponén. Teu mangaruhan box-shadows dipaké pikeun kaayaan fokus.
$enable-gradients trueatawa false(standar) Aktipkeun gradién anu tos ditetepkeun liwat background-imagegaya dina sababaraha komponén.
$enable-transitions true(standar) atawafalse Aktipkeun s tos siap transitiondina rupa komponén.
$enable-prefers-reduced-motion-media-query true(standar) atawafalse Aktipkeun prefers-reduced-motionquery media , nu nyegah animasi/transisi nu tangtu dumasar kana preferensi browser/sistem operasi pamaké.
$enable-hover-media-query trueatawa false(standar) Dipulut
$enable-grid-classes true(standar) atawafalse Aktipkeun generasi kelas CSS pikeun sistem grid (misalna, .container, .row, .col-md-1, jsb).
$enable-caret true(standar) atawafalse Aktipkeun unsur pseudo caret on .dropdown-toggle.
$enable-pointer-cursor-for-buttons true(standar) atawafalse Tambahkeun kursor "leungeun" kana elemen tombol non-ditumpurkeun.
$enable-print-styles true(standar) atawafalse Aktipkeun gaya pikeun ngaoptimalkeun percetakan.
$enable-responsive-font-sizes trueatawa false(standar) Aktipkeun ukuran font responsif .
$enable-validation-icons true(standar) atawafalse Aktipkeun background-imageikon dina input téks sareng sababaraha bentuk khusus pikeun kaayaan validasi.
$enable-deprecation-messages true(standar) atawafalse Setel pikeun falsenyumputkeun warnings lamun ngagunakeun salah sahiji mixins deprecated jeung fungsi nu rencanana bakal dihapus dina v5.

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 #007bff
$indigo #6610f2
$ungu #6f42c1
$pink #e83e8c
$beureum #dc3545
$jeruk #fd7e14
$konéng #ffc107
$héjo #28a745
$téh #20c997
$cyan #17a2b8

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 palet warna anu langkung alit pikeun ngahasilkeun skéma warna, ogé sayogi salaku variabel Sass sareng peta Sass dina scss/_variables.scssfile Bootstrap.

$utama #007bff
$sekundér #6c757d
$sukses #28a745
$bahaya #dc3545
$awas #ffc107
$inpo #17a2b8
$caang #f8f9fa
$poék #343a40

Grays

Hiji set expansive variabel abu sarta peta Sass scss/_variables.scsspikeun nuansa konsisten abu sakuliah proyék Anjeun. Catet yén ieu mangrupikeun "abu-abu tiis", anu condong kana nada biru halus, tinimbang abu-abu nétral.

$ kulawu-100 #f8f9fa
$ kulawu-200 #e9ecef
$ kulawu-300 #dee2e6
$ kulawu-400 #ced4da
$ kulawu-500 #adb5bd
$ kulawu-600 #6c757d
$ kulawu-700 #495057
$ kulawu-800 #343a40
$ kulawu-900 #212529

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

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