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 dist
file 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 // Optional
bagian sakumaha diperlukeun. Kami nyarankeun ngagunakeun tumpukan impor lengkep tina bootstrap.scss
file kami salaku titik awal anjeun.
standar variabel
Unggal variabel Sass dina Bootstrap kalebet !default
bandé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 !default
bandé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-color
sareng color
nalika <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.
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 !default
bandé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-colors
peta 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 danger
kenop ti $theme-colors
pikeun 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-colors
peta. 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-colors
peta 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-svg
fungsi kabur ka <
, >
jeung #
karakter pikeun gambar tukang SVG. Karakter ieu kedah kabur supados leres ngadamel gambar latar dina IE. Nalika nganggo escape-svg
fungsina, URI data kedah dicutat.
Nambahkeun jeung Ngurangan fungsi
Kami nganggo add
sareng subtract
fungsi pikeun mungkus calc
fungsi CSS. Tujuan utama fungsi ieu nyaéta pikeun ngahindarkeun kasalahan nalika nilai "unitless" dialihkeun 0
kana 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 test
sakumaha diperlukeun.
Anjeun tiasa mendakan sareng ngaluyukeun variabel ieu pikeun pilihan global konci dina scss/_variables.scss
file 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-radius dina sababaraha komponén. |
$enable-shadows |
true atawa false (standar) |
Aktipkeun gaya hiasan anu tos siap box-shadow dina sababaraha komponén. Teu mangaruhan box-shadow s dipaké pikeun kaayaan fokus. |
$enable-gradients |
true atawa false (standar) |
Aktipkeun gradién anu tos ditetepkeun liwat background-image gaya dina sababaraha komponén. |
$enable-transitions |
true (standar) atawafalse |
Aktipkeun s tos siap transition dina rupa komponén. |
$enable-prefers-reduced-motion-media-query |
true (standar) atawafalse |
Aktipkeun prefers-reduced-motion query media , nu nyegah animasi/transisi nu tangtu dumasar kana preferensi browser/sistem operasi pamaké. |
$enable-hover-media-query |
true atawa 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 |
true atawa false (standar) |
Aktipkeun ukuran font responsif . |
$enable-validation-icons |
true (standar) atawafalse |
Aktipkeun background-image ikon dina input téks sareng sababaraha bentuk khusus pikeun kaayaan validasi. |
$enable-deprecation-messages |
true (standar) atawafalse |
Setel pikeun false nyumputkeun 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.scss
file. Ieu bakal dilegaan dina sékrési minor salajengna pikeun nambihan nuansa tambahan, sapertos palette grayscale anu kami parantos kalebet.
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 color
na background-color
.
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.scss
file Bootstrap.
Grays
Hiji set expansive variabel abu sarta peta Sass scss/_variables.scss
pikeun 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.
Dina scss/_variables.scss
, anjeun bakal mendakan variabel warna Bootstrap sareng peta Sass. Ieu conto $colors
peta 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 @each
puteran anu ngulang dina peta Sass. Ieu hususna mantuan pikeun ngahasilkeun varian komponén ku urang $theme-colors
jeung 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-colors
peta pikeun nyaluyukeun jumlah sareng nami kelas modifier kami.
Di dieu aya dua conto kumaha urang loop ngaliwatan $theme-colors
peta pikeun ngahasilkeun modifiers kana .alert
komponé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 @each
loop pikeun $grid-breakpoints
peta 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 :root
diperyogikeun). _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);
}
}