Theming Bootstrap
ປັບແຕ່ງ Bootstrap 4 ດ້ວຍຕົວແປ Sass ທີ່ສ້າງຂຶ້ນໃໝ່ຂອງພວກເຮົາເພື່ອຄວາມມັກແບບທົ່ວໂລກເພື່ອການປ່ຽນຮູບແບບສີສັນ ແລະ ອົງປະກອບທີ່ງ່າຍ.
ແນະນຳ
ໃນ Bootstrap 3, ຫົວຂໍ້ຖືກຂັບເຄື່ອນສ່ວນໃຫຍ່ໂດຍການປ່ຽນແທນຕົວແປໃນ LESS, CSS ແບບກຳນົດເອງ, ແລະຮູບແບບສີສັນຂອງຮູບແບບສີສັນແຍກຕ່າງຫາກທີ່ພວກເຮົາລວມຢູ່ໃນ dist
ໄຟລ໌ຂອງພວກເຮົາ. ດ້ວຍຄວາມພະຍາຍາມບາງຢ່າງ, ຄົນເຮົາສາມາດອອກແບບຮູບແບບຂອງ Bootstrap 3 ໄດ້ຢ່າງສົມບູນໂດຍບໍ່ຕ້ອງແຕະໄຟລ໌ຫຼັກ. Bootstrap 4 ສະຫນອງວິທີການທີ່ຄຸ້ນເຄີຍ, ແຕ່ແຕກຕ່າງກັນເລັກນ້ອຍ.
ໃນປັດຈຸບັນ, ຫົວຂໍ້ແມ່ນສໍາເລັດໂດຍຕົວແປ Sass, ແຜນທີ່ Sass, ແລະ CSS ທີ່ກໍາຫນົດເອງ. ບໍ່ມີຮູບແບບສີສັນໜ້າຕາທີ່ອຸທິດຕົນເພີ່ມເຕີມ; ແທນທີ່ຈະ, ທ່ານສາມາດເປີດໃຊ້ຮູບແບບໃນຕົວເພື່ອເພີ່ມ gradients, shadows, ແລະອື່ນໆ.
ຊາສ
ໃຊ້ໄຟລ໌ Sass ແຫຼ່ງຂອງພວກເຮົາເພື່ອໃຊ້ປະໂຫຍດຈາກຕົວແປ, ແຜນທີ່, mixins, ແລະອື່ນໆອີກໃນເວລາທີ່ ລວບລວມ Sass ໂດຍໃຊ້ທໍ່ຊັບສິນຂອງທ່ານເອງ.
ໂຄງສ້າງໄຟລ໌
ເມື່ອໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້, ຫຼີກເວັ້ນການດັດແປງໄຟລ໌ຫຼັກຂອງ Bootstrap. ສໍາລັບ Sass, ນັ້ນຫມາຍຄວາມວ່າການສ້າງຮູບແບບຂອງທ່ານເອງທີ່ນໍາເຂົ້າ Bootstrap ເພື່ອໃຫ້ທ່ານສາມາດດັດແປງແລະຂະຫຍາຍມັນໄດ້. ສົມມຸດວ່າທ່ານກໍາລັງໃຊ້ຕົວຈັດການຊຸດເຊັ່ນ npm, ທ່ານຈະມີໂຄງສ້າງໄຟລ໌ທີ່ມີລັກສະນະນີ້:
your-project/
├── scss
│ └── custom.scss
└── node_modules/
└── bootstrap
├── js
└── scss
ຖ້າທ່ານໄດ້ດາວໂຫລດໄຟລ໌ຕົ້ນສະບັບຂອງພວກເຮົາແລະບໍ່ໄດ້ໃຊ້ຕົວຈັດການແພັກເກັດ, ທ່ານຕ້ອງການຕັ້ງຄ່າບາງສິ່ງບາງຢ່າງທີ່ຄ້າຍຄືກັບໂຄງສ້າງນັ້ນດ້ວຍຕົນເອງ, ຮັກສາໄຟລ໌ແຫຼ່ງຂອງ Bootstrap ແຍກຕ່າງຫາກຈາກຂອງທ່ານເອງ.
your-project/
├── scss
│ └── custom.scss
└── bootstrap/
├── js
└── scss
ການນໍາເຂົ້າ
ໃນຂອງທ່ານ custom.scss
, ທ່ານຈະນໍາເຂົ້າໄຟລ໌ Sass ແຫຼ່ງຂອງ Bootstrap. ທ່ານມີສອງທາງເລືອກ: ປະກອບມີ Bootstrap ທັງຫມົດ, ຫຼືເລືອກເອົາພາກສ່ວນທີ່ທ່ານຕ້ອງການ. ພວກເຮົາຊຸກຍູ້ໃຫ້ອັນສຸດທ້າຍ, ເຖິງແມ່ນວ່າຈະຮູ້ວ່າມີບາງຂໍ້ກໍານົດແລະຄວາມເພິ່ງພາອາໄສໃນທົ່ວອົງປະກອບຂອງພວກເຮົາ. ທ່ານຍັງຈະຕ້ອງໄດ້ລວມເອົາບາງ JavaScript ສໍາລັບ plugins ຂອງພວກເຮົາ.
// 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";
ດ້ວຍການຕັ້ງຄ່າທີ່ຢູ່ໃນສະຖານທີ່, ທ່ານສາມາດເລີ່ມຕົ້ນທີ່ຈະປັບປຸງແກ້ໄຂໃດໆຂອງຕົວແປ Sass ແລະແຜນທີ່ໃນຂອງທ່ານ custom.scss
. ນອກນັ້ນທ່ານຍັງສາມາດເລີ່ມຕົ້ນທີ່ຈະເພີ່ມພາກສ່ວນຂອງ Bootstrap ພາຍໃຕ້ // Optional
ພາກສ່ວນຕາມຄວາມຕ້ອງການ. ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ stack ການນໍາເຂົ້າຢ່າງເຕັມທີ່ຈາກ bootstrap.scss
ໄຟລ໌ຂອງພວກເຮົາເປັນຈຸດເລີ່ມຕົ້ນຂອງທ່ານ.
ຄ່າເລີ່ມຕົ້ນທີ່ປ່ຽນແປງໄດ້
ທຸກໆຕົວແປ Sass ໃນ Bootstrap ປະກອບມີ !default
ທຸງທີ່ຊ່ວຍໃຫ້ທ່ານສາມາດ override ຄ່າເລີ່ມຕົ້ນຂອງຕົວແປໃນ Sass ຂອງທ່ານເອງໂດຍບໍ່ມີການດັດແປງລະຫັດແຫຼ່ງຂອງ Bootstrap. ຄັດລອກແລະວາງຕົວແປຕາມຄວາມຕ້ອງການ, ແກ້ໄຂຄ່າຂອງມັນ, ແລະເອົາ !default
ທຸງອອກ. ຖ້າຕົວແປໄດ້ຖືກມອບຫມາຍແລ້ວ, ມັນຈະບໍ່ຖືກມອບຫມາຍຄືນໃຫມ່ໂດຍຄ່າເລີ່ມຕົ້ນໃນ Bootstrap.
ທ່ານຈະພົບເຫັນບັນຊີລາຍຊື່ເຕັມຂອງຕົວແປຂອງ Bootstrap ໃນ scss/_variables.scss
. ບາງຕົວແປຖືກຕັ້ງເປັນ null
, ຕົວແປເຫຼົ່ານີ້ບໍ່ອອກຄຸນສົມບັດເວັ້ນເສຍແຕ່ວ່າພວກມັນຖືກ overridden ໃນການຕັ້ງຄ່າຂອງທ່ານ.
ການ overrides ຕົວແປຈະຕ້ອງມາຫຼັງຈາກຫນ້າທີ່, ຕົວແປ, ແລະ mixins ຂອງພວກເຮົາຖືກນໍາເຂົ້າ, ແຕ່ກ່ອນທີ່ຈະນໍາເຂົ້າສ່ວນທີ່ເຫຼືອ.
ນີ້ແມ່ນຕົວຢ່າງທີ່ປ່ຽນແປງ background-color
ແລະ color
ສໍາລັບການ <body>
ນໍາເຂົ້າແລະລວບລວມ Bootstrap ຜ່ານ 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
ເຮັດຊ້ໍາອີກຕາມຄວາມຈໍາເປັນສໍາລັບຕົວແປໃດໆໃນ Bootstrap, ລວມທັງຕົວເລືອກທົ່ວໂລກຂ້າງລຸ່ມນີ້.
ແຜນທີ່ແລະ loops
Bootstrap 4 ປະກອບມີແຜນທີ່ Sass ຈໍານວນຫນ້ອຍ, ຄູ່ມູນຄ່າທີ່ສໍາຄັນທີ່ເຮັດໃຫ້ມັນງ່າຍຕໍ່ການສ້າງຄອບຄົວຂອງ CSS ທີ່ກ່ຽວຂ້ອງ. ພວກເຮົາໃຊ້ແຜນທີ່ Sass ສໍາລັບສີຂອງພວກເຮົາ, ຈຸດແບ່ງຕາຂ່າຍ, ແລະອື່ນໆອີກ. ເຊັ່ນດຽວກັນກັບຕົວແປ Sass, ແຜນທີ່ Sass ທັງຫມົດປະກອບມີ !default
ທຸງແລະສາມາດ overridden ແລະຂະຫຍາຍໄດ້.
ບາງແຜນທີ່ Sass ຂອງພວກເຮົາຖືກລວມເຂົ້າເປັນບ່ອນຫວ່າງເປົ່າໂດຍຄ່າເລີ່ມຕົ້ນ. ນີ້ແມ່ນເຮັດເພື່ອອະນຸຍາດໃຫ້ຂະຫຍາຍແຜນທີ່ Sass ທີ່ໃຫ້ມາໄດ້ງ່າຍ, ແຕ່ມີຄ່າໃຊ້ຈ່າຍໃນການ ເອົາ ລາຍການອອກຈາກແຜນທີ່ຍາກກວ່າເລັກນ້ອຍ.
ແກ້ໄຂແຜນທີ່
ເພື່ອແກ້ໄຂສີທີ່ມີຢູ່ແລ້ວໃນ $theme-colors
ແຜນທີ່ຂອງພວກເຮົາ, ເພີ່ມຕໍ່ໄປນີ້ໃສ່ໄຟລ໌ Sass ຂອງທ່ານເອງ:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
ເພີ່ມໃສ່ແຜນທີ່
ເພື່ອເພີ່ມສີໃໝ່ໃສ່ $theme-colors
, ເພີ່ມລະຫັດ ແລະຄ່າໃໝ່:
$theme-colors: (
"custom-color": #900
);
ເອົາອອກຈາກແຜນທີ່
ເພື່ອເອົາສີອອກຈາກ $theme-colors
, ຫຼືແຜນທີ່ອື່ນໆ, ໃຊ້ map-remove
. ຈົ່ງຮູ້ວ່າທ່ານຕ້ອງໃສ່ມັນລະຫວ່າງຄວາມຕ້ອງການແລະທາງເລືອກຂອງພວກເຮົາ:
// 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";
...
ກະແຈທີ່ຕ້ອງການ
Bootstrap ສົມມຸດວ່າມີບາງກະແຈສະເພາະພາຍໃນແຜນທີ່ Sass ດັ່ງທີ່ພວກເຮົາໃຊ້ແລະຂະຫຍາຍຕົວມັນເອງ. ໃນຂະນະທີ່ທ່ານປັບແຕ່ງແຜນທີ່ລວມ, ທ່ານອາດຈະພົບກັບຄວາມຜິດພາດທີ່ລະຫັດສະເພາະຂອງແຜນທີ່ Sass ຖືກໃຊ້.
ຕົວຢ່າງ, ພວກເຮົາໃຊ້ປຸ່ມ primary
, success
, ແລະ danger
ຈາກ $theme-colors
ສໍາລັບການເຊື່ອມຕໍ່, ປຸ່ມ, ແລະສະຖານະແບບຟອມ. ການປ່ຽນຄ່າຂອງກະແຈເຫຼົ່ານີ້ບໍ່ຄວນມີບັນຫາຫຍັງເລີຍ, ແຕ່ການຖອດພວກມັນອອກອາດເຮັດໃຫ້ເກີດບັນຫາການລວບລວມ Sass. ໃນຕົວຢ່າງເຫຼົ່ານີ້, ທ່ານຈະຕ້ອງດັດແປງລະຫັດ Sass ທີ່ນໍາໃຊ້ຄ່າເຫຼົ່ານັ້ນ.
ຟັງຊັນ
Bootstrap ໃຊ້ຟັງຊັນ Sass ຫຼາຍ, ແຕ່ມີພຽງຊຸດຍ່ອຍທີ່ໃຊ້ໄດ້ກັບຫົວຂໍ້ທົ່ວໄປ. ພວກເຮົາໄດ້ລວມເອົາສາມຫນ້າທີ່ສໍາລັບການໄດ້ຮັບຄ່າຈາກແຜນທີ່ສີ:
@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);
}
ເຫຼົ່ານີ້ອະນຸຍາດໃຫ້ທ່ານເລືອກເອົາຫນຶ່ງສີຈາກແຜນທີ່ Sass ຄືກັບວິທີທີ່ເຈົ້າໃຊ້ຕົວແປສີຈາກ v3.
.custom-element {
color: gray("100");
background-color: theme-color("dark");
}
ພວກເຮົາຍັງມີຫນ້າທີ່ອື່ນສໍາລັບການໄດ້ຮັບ ລະດັບ ສີໂດຍສະເພາະຈາກ $theme-colors
ແຜນທີ່. ຄ່າລະດັບລົບຈະເຮັດໃຫ້ສີອ່ອນລົງ, ໃນຂະນະທີ່ລະດັບທີ່ສູງກວ່າຈະມືດລົງ.
@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);
}
ໃນການປະຕິບັດ, ທ່ານຈະໂທຫາຫນ້າທີ່ແລະຜ່ານໃນສອງຕົວກໍານົດການ: ຊື່ຂອງສີຈາກ $theme-colors
(ເຊັ່ນ, ປະຖົມຫຼືອັນຕະລາຍ) ແລະລະດັບຕົວເລກ.
.custom-element {
color: theme-color-level(primary, -10);
}
ຟັງຊັນເພີ່ມເຕີມສາມາດຖືກເພີ່ມໃນອະນາຄົດຫຼື Sass ຂອງທ່ານເອງເພື່ອສ້າງຫນ້າທີ່ລະດັບສໍາລັບແຜນທີ່ Sass ເພີ່ມເຕີມ, ຫຼືແມ້ກະທັ້ງຫນຶ່ງທົ່ວໄປຖ້າທ່ານຕ້ອງການເວົ້າຫຼາຍ.
ກົງກັນຂ້າມສີ
ຟັງຊັນເພີ່ມເຕີມທີ່ພວກເຮົາລວມຢູ່ໃນ Bootstrap ແມ່ນຫນ້າທີ່ກົງກັນຂ້າມຂອງສີ, color-yiq
. ມັນໃຊ້ ພື້ນທີ່ສີ YIQ ເພື່ອໃຫ້ກັບຄືນມາອັດຕະໂນມັດເປັນແສງສະຫວ່າງ ( #fff
) ຫຼືສີເຂັ້ມ ( #111
) ກົງກັນຂ້າມໂດຍອີງໃສ່ສີພື້ນຖານທີ່ກໍານົດໄວ້. ຟັງຊັນນີ້ເປັນປະໂຫຍດໂດຍສະເພາະສໍາລັບ mixins ຫຼື loops ທີ່ທ່ານກໍາລັງສ້າງຫຼາຍຫ້ອງຮຽນ.
ສໍາລັບຕົວຢ່າງ, ເພື່ອສ້າງ swatches ສີຈາກ $theme-colors
ແຜນທີ່ຂອງພວກເຮົາ:
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
}
}
ມັນຍັງສາມາດຖືກໃຊ້ສໍາລັບຄວາມຕ້ອງການດ້ານກົງກັນຂ້າມແບບດຽວ:
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
}
ທ່ານຍັງສາມາດລະບຸສີພື້ນຖານດ້ວຍຟັງຊັນແຜນທີ່ສີຂອງພວກເຮົາ:
.custom-element {
color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
ໜີ SVG
ພວກເຮົາໃຊ້ escape-svg
ຟັງຊັນເພື່ອຫລົບຫນີ <
, >
ແລະ #
ຕົວອັກສອນສໍາລັບຮູບພາບພື້ນຫລັງ SVG. ຕົວອັກສອນເຫຼົ່ານີ້ຈໍາເປັນຕ້ອງຖືກຫລົບຫນີເພື່ອສະແດງພາບພື້ນຫລັງໃນ IE ຢ່າງຖືກຕ້ອງ. ເມື່ອໃຊ້ escape-svg
ຟັງຊັນ, URI ຂໍ້ມູນຕ້ອງຖືກອ້າງອີງ.
ຟັງຊັນເພີ່ມ ແລະລົບ
ພວກເຮົາໃຊ້ add
ແລະ subtract
ຟັງຊັນເພື່ອຫໍ່ calc
ຟັງຊັນ CSS. ຈຸດປະສົງຕົ້ນຕໍຂອງຫນ້າທີ່ເຫຼົ່ານີ້ແມ່ນເພື່ອຫຼີກເວັ້ນການຄວາມຜິດພາດໃນເວລາທີ່ຄ່າ "unitless" 0
ຖືກສົ່ງເຂົ້າໄປໃນການ calc
ສະແດງອອກ. ການສະແດງອອກຄື calc(10px - 0)
ຈະສົ່ງຄືນຂໍ້ຜິດພາດໃນທຸກຕົວທ່ອງເວັບ, ເຖິງແມ່ນວ່າຈະຖືກຕ້ອງທາງຄະນິດສາດ.
ຕົວຢ່າງທີ່ calc ຖືກຕ້ອງ:
$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);
}
ຕົວຢ່າງທີ່ calc ບໍ່ຖືກຕ້ອງ:
$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);
}
ຕົວເລືອກ Sass
ປັບແຕ່ງ Bootstrap 4 ດ້ວຍໄຟລ໌ຕົວແປທີ່ສ້າງຂຶ້ນໃນຕົວຂອງພວກເຮົາ ແລະສະຫຼັບການຕັ້ງຄ່າ CSS ທົ່ວໂລກໄດ້ຢ່າງງ່າຍດາຍດ້ວຍ $enable-*
ຕົວແປ Sass ໃໝ່. ລົບລ້າງຄ່າຂອງຕົວແປ ແລະປະກອບຄືນໃໝ່ npm run test
ຕາມຄວາມຕ້ອງການ.
ທ່ານສາມາດຊອກຫາແລະປັບແຕ່ງຕົວແປເຫຼົ່ານີ້ສໍາລັບທາງເລືອກທົ່ວໂລກທີ່ສໍາຄັນໃນໄຟລ໌ຂອງ Bootstrap scss/_variables.scss
.
ຕົວແປ | ຄຸນຄ່າ | ລາຍລະອຽດ |
---|---|---|
$spacer |
1rem (ຄ່າເລີ່ມຕົ້ນ), ຫຼືຄ່າໃດໆ > 0 |
ລະບຸຄ່າເລີ່ມຕົ້ນຂອງ spacer ເພື່ອສ້າງໂປຣແກຣມ spacer utilities ຂອງພວກເຮົາ . |
$enable-rounded |
true (ຄ່າເລີ່ມຕົ້ນ) ຫຼືfalse |
ເປີດໃຊ້ border-radius ຮູບແບບທີ່ກຳນົດໄວ້ລ່ວງໜ້າໃນອົງປະກອບຕ່າງໆ. |
$enable-shadows |
true ຫຼື false (ຄ່າເລີ່ມຕົ້ນ) |
ເປີດໃຊ້ຮູບແບບການຕົກແຕ່ງທີ່ກຳນົດໄວ້ລ່ວງໜ້າ box-shadow ໃນອົງປະກອບຕ່າງໆ. ບໍ່ມີຜົນກະທົບ box-shadow ທີ່ຖືກນໍາໃຊ້ສໍາລັບລັດຈຸດສຸມ. |
$enable-gradients |
true ຫຼື false (ຄ່າເລີ່ມຕົ້ນ) |
ເປີດໃຊ້ການ gradients ທີ່ໄດ້ກໍານົດໄວ້ລ່ວງໜ້າຜ່ານ background-image ຮູບແບບຕ່າງໆໃນອົງປະກອບຕ່າງໆ. |
$enable-transitions |
true (ຄ່າເລີ່ມຕົ້ນ) ຫຼືfalse |
ເປີດໃຊ້ transition s ທີ່ກໍານົດໄວ້ກ່ອນໃນອົງປະກອບຕ່າງໆ. |
$enable-prefers-reduced-motion-media-query |
true (ຄ່າເລີ່ມຕົ້ນ) ຫຼືfalse |
ເປີດໃຊ້ການ prefers-reduced-motion ສອບຖາມສື່ , ເຊິ່ງສະກັດກັ້ນການເຄື່ອນໄຫວ/ການຫັນປ່ຽນບາງອັນໂດຍອີງໃສ່ຄວາມມັກຂອງຕົວທ່ອງເວັບ/ລະບົບປະຕິບັດການຂອງຜູ້ໃຊ້. |
$enable-hover-media-query |
true ຫຼື false (ຄ່າເລີ່ມຕົ້ນ) |
ເຊົາໃຊ້ແລ້ວ |
$enable-grid-classes |
true (ຄ່າເລີ່ມຕົ້ນ) ຫຼືfalse |
ເປີດໃຊ້ການສ້າງຊັ້ນຮຽນ CSS ສໍາລັບລະບົບຕາຂ່າຍ (ເຊັ່ນ, .container , , .row , .col-md-1 , ແລະອື່ນໆ). |
$enable-caret |
true (ຄ່າເລີ່ມຕົ້ນ) ຫຼືfalse |
ເປີດໃຊ້ pseudo element caret ໃນ .dropdown-toggle . |
$enable-pointer-cursor-for-buttons |
true (ຄ່າເລີ່ມຕົ້ນ) ຫຼືfalse |
ເພີ່ມຕົວກະພິບ “ມື” ໃສ່ອົງປະກອບປຸ່ມທີ່ບໍ່ປິດໃຊ້ງານ. |
$enable-print-styles |
true (ຄ່າເລີ່ມຕົ້ນ) ຫຼືfalse |
ເປີດໃຊ້ຮູບແບບສໍາລັບການເພີ່ມປະສິດທິພາບການພິມ. |
$enable-responsive-font-sizes |
true ຫຼື false (ຄ່າເລີ່ມຕົ້ນ) |
ເປີດໃຊ້ ຂະໜາດຕົວອັກສອນທີ່ຕອບສະໜອງ . |
$enable-validation-icons |
true (ຄ່າເລີ່ມຕົ້ນ) ຫຼືfalse |
ເປີດໃຊ້ background-image ໄອຄອນພາຍໃນວັດສະດຸປ້ອນຂໍ້ຄວາມ ແລະບາງຮູບແບບກຳນົດເອງສຳລັບສະຖານະການກວດສອບ. |
$enable-deprecation-messages |
true (ຄ່າເລີ່ມຕົ້ນ) ຫຼືfalse |
ຕັ້ງຄ່າເພື່ອ false ຊ່ອນຄຳເຕືອນເມື່ອໃຊ້ mixins ແລະຟັງຊັນໃດນຶ່ງທີ່ບໍ່ໄດ້ນຳໃຊ້ແລ້ວ ທີ່ວາງແຜນທີ່ຈະເອົາອອກໃນ v5 . |
ສີ
ຫຼາຍໆອົງປະກອບ ແລະເຄື່ອງໃຊ້ຕ່າງໆຂອງ Bootstrap ແມ່ນສ້າງຂຶ້ນຜ່ານຫຼາຍສີທີ່ກຳນົດໄວ້ໃນແຜນທີ່ Sass. ແຜນທີ່ນີ້ສາມາດໄດ້ຮັບການ looped ໃນ Sass ເພື່ອສ້າງຊຸດຂອງກົດລະບຽບຢ່າງໄວວາ.
ສີທັງໝົດ
ທຸກສີທີ່ມີຢູ່ໃນ Bootstrap 4, ມີຢູ່ໃນຕົວແປ Sass ແລະແຜນທີ່ Sass ໃນ scss/_variables.scss
ໄຟລ໌. ນີ້ຈະຖືກຂະຫຍາຍອອກໄປໃນການປ່ອຍເລັກນ້ອຍຕໍ່ໆມາເພື່ອເພີ່ມຮົ່ມເພີ່ມເຕີມ, ຄືກັບ palette ສີຂີ້ເຖົ່າທີ່ ພວກເຮົາລວມຢູ່ແລ້ວ.
ນີ້ແມ່ນວິທີທີ່ທ່ານສາມາດນໍາໃຊ້ສິ່ງເຫຼົ່ານີ້ຢູ່ໃນ Sass ຂອງທ່ານ:
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
ຫ້ອງຮຽນຄຸນປະໂຫຍດສີ ແມ່ນຍັງມີສໍາລັບການຕັ້ງຄ່າ color
ແລະ background-color
.
ສີຫົວຂໍ້
ພວກເຮົາໃຊ້ຊຸດຍ່ອຍຂອງສີທັງໝົດເພື່ອສ້າງແຖບສີທີ່ນ້ອຍກວ່າເພື່ອສ້າງຮູບແບບສີ, ຍັງມີຢູ່ໃນຕົວແປ Sass ແລະແຜນທີ່ Sass ໃນ scss/_variables.scss
ໄຟລ໌ຂອງ Bootstrap.
ສີເທົາ
ຊຸດທີ່ກວ້າງຂວາງຂອງຕົວແປສີຂີ້ເຖົ່າແລະແຜນທີ່ Sass scss/_variables.scss
ສໍາລັບຮົ່ມສີຂີ້ເຖົ່າທີ່ສອດຄ່ອງໃນທົ່ວໂຄງການຂອງທ່ານ. ໃຫ້ສັງເກດວ່າເຫຼົ່ານີ້ແມ່ນ "ສີຂີ້ເຖົ່າເຢັນ", ເຊິ່ງມີແນວໂນ້ມໄປສູ່ສຽງສີຟ້າອ່ອນໆ, ແທນທີ່ຈະເປັນສີຂີ້ເຖົ່າທີ່ເປັນກາງ.
ພາຍໃນ scss/_variables.scss
, ທ່ານຈະພົບເຫັນຕົວແປສີຂອງ Bootstrap ແລະແຜນທີ່ Sass. ນີ້ແມ່ນຕົວຢ່າງຂອງ $colors
ແຜນທີ່ 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;
ເພີ່ມ, ລຶບ, ຫຼືແກ້ໄຂຄ່າພາຍໃນແຜນທີ່ເພື່ອອັບເດດວິທີການທີ່ພວກມັນຖືກໃຊ້ໃນຫຼາຍອົງປະກອບອື່ນໆ. ແຕ່ຫນ້າເສຍດາຍໃນເວລານີ້, ບໍ່ແມ່ນ ທຸກໆ ອົງປະກອບໃຊ້ແຜນທີ່ Sass ນີ້. ການປັບປຸງໃນອະນາຄົດຈະພະຍາຍາມປັບປຸງໃນເລື່ອງນີ້. ຈົນກ່ວານັ້ນ, ວາງແຜນກ່ຽວກັບການນໍາໃຊ້ ${color}
ຕົວແປແລະແຜນທີ່ Sass ນີ້.
ອົງປະກອບ
ຫຼາຍໆອົງປະກອບ ແລະເຄື່ອງໃຊ້ຂອງ Bootstrap ແມ່ນສ້າງຂຶ້ນດ້ວຍ @each
loops ທີ່ເຮັດຊ້ຳໃນແຜນທີ່ Sass. ນີ້ແມ່ນເປັນປະໂຫຍດໂດຍສະເພາະສໍາລັບການສ້າງ variants ຂອງອົງປະກອບໂດຍພວກເຮົາ $theme-colors
ແລະການສ້າງ variants ຕອບສະຫນອງສໍາລັບແຕ່ລະ breakpoint. ໃນຂະນະທີ່ທ່ານປັບແຕ່ງແຜນທີ່ Sass ເຫຼົ່ານີ້ແລະລວບລວມຄືນໃຫມ່, ທ່ານຈະເຫັນການປ່ຽນແປງຂອງທ່ານໂດຍອັດຕະໂນມັດໃນ loops ເຫຼົ່ານີ້.
ຕົວແກ້ໄຂ
ຫຼາຍໆອົງປະກອບຂອງ Bootstrap ແມ່ນສ້າງຂຶ້ນດ້ວຍວິທີການຂັ້ນພື້ນຖານຕົວແກ້ໄຂ. ນີ້ຫມາຍຄວາມວ່າສ່ວນໃຫຍ່ຂອງຄໍເຕົ້າໄຂ່ທີ່ບັນຈຸຢູ່ໃນຊັ້ນພື້ນຖານ (ເຊັ່ນ, .btn
) ໃນຂະນະທີ່ການປ່ຽນແປງຮູບແບບແມ່ນຖືກຈໍາກັດຢູ່ໃນຫ້ອງຮຽນຕົວແກ້ໄຂ (ເຊັ່ນ, .btn-danger
). ຫ້ອງຮຽນ modifier ເຫຼົ່ານີ້ຖືກສ້າງຂຶ້ນຈາກ $theme-colors
ແຜນທີ່ເພື່ອເຮັດໃຫ້ການປັບແຕ່ງຈໍານວນແລະຊື່ຂອງຫ້ອງຮຽນ modifier ຂອງພວກເຮົາ.
ນີ້ແມ່ນສອງຕົວຢ່າງຂອງວິທີທີ່ພວກເຮົາ loop ເທິງ $theme-colors
ແຜນທີ່ເພື່ອສ້າງຕົວດັດແປງ .alert
ອົງປະກອບແລະ ຜົນ .bg-*
ປະໂຫຍດພື້ນຖານທັງຫມົດຂອງພວກເຮົາ.
// 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);
}
ຕອບສະໜອງ
ວົງ Sass ເຫຼົ່ານີ້ບໍ່ຈໍາກັດພຽງແຕ່ແຜນທີ່ສີ, ຄືກັນ. ນອກນັ້ນທ່ານຍັງສາມາດສ້າງການປ່ຽນແປງທີ່ຕອບສະຫນອງຂອງອົງປະກອບຫຼືຜົນປະໂຫຍດຂອງທ່ານ. ເອົາຕົວຢ່າງເຄື່ອງມືການຈັດຕໍາແຫນ່ງຂໍ້ຄວາມທີ່ຕອບສະຫນອງຂອງພວກເຮົາບ່ອນທີ່ພວກເຮົາປະສົມ @each
loop ສໍາລັບ $grid-breakpoints
ແຜນທີ່ Sass ດ້ວຍການສອບຖາມສື່.
@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; }
}
}
ຖ້າເຈົ້າຕ້ອງດັດແກ້ຂອງເຈົ້າ $grid-breakpoints
, ການປ່ຽນແປງຂອງເຈົ້າຈະໃຊ້ກັບທຸກ loops iterating ເທິງແຜນທີ່ນັ້ນ.
ຕົວແປ CSS
Bootstrap 4 ປະກອບມີປະມານສອງສິບ CSS custom ຄຸນສົມບັດ (ຕົວແປ) ໃນ CSS ທີ່ລວບລວມຂອງມັນ. ເຫຼົ່ານີ້ສະຫນອງການເຂົ້າເຖິງໄດ້ງ່າຍຕໍ່ກັບຄ່າທີ່ໃຊ້ທົ່ວໄປເຊັ່ນ: ສີຫົວຂໍ້ຂອງພວກເຮົາ, ຈຸດແບ່ງ, ແລະ stacks ຕົວອັກສອນຕົ້ນຕໍໃນເວລາທີ່ເຮັດວຽກຢູ່ໃນຕົວທ່ອງເວັບຂອງ Inspector, sandbox ລະຫັດ, ຫຼື prototyping ທົ່ວໄປ.
ຕົວແປທີ່ມີຢູ່
ນີ້ແມ່ນຕົວແປທີ່ພວກເຮົາປະກອບມີ (ສັງເກດວ່າ :root
ຕ້ອງການ). ພວກມັນຢູ່ໃນ _root.scss
ໄຟລ໌ຂອງພວກເຮົາ.
: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;
}
ຕົວຢ່າງ
ຕົວແປ CSS ສະເຫນີຄວາມຍືດຫຍຸ່ນທີ່ຄ້າຍຄືກັນກັບຕົວແປຂອງ Sass, ແຕ່ບໍ່ຈໍາເປັນຕ້ອງມີການລວບລວມກ່ອນທີ່ຈະຖືກຮັບໃຊ້ໃຫ້ກັບຕົວທ່ອງເວັບ. ຕົວຢ່າງ, ໃນທີ່ນີ້ພວກເຮົາກໍາລັງຣີເຊັດຕົວອັກສອນຂອງຫນ້າຂອງພວກເຮົາແລະຮູບແບບການເຊື່ອມຕໍ່ກັບຕົວແປ CSS.
body {
font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
color: var(--blue);
}
ຕົວແປ breakpoint
ໃນຂະນະທີ່ໃນເບື້ອງຕົ້ນພວກເຮົາລວມເອົາຈຸດຢຸດຢູ່ໃນຕົວແປ CSS ຂອງພວກເຮົາ (ຕົວຢ່າງ, --breakpoint-md
), ເຫຼົ່ານີ້ບໍ່ໄດ້ຮັບການສະຫນັບສະຫນູນໃນການສອບຖາມສື່ , ແຕ່ພວກມັນຍັງສາມາດຖືກນໍາໃຊ້ ພາຍໃນ ກົດລະບຽບໃນການສອບຖາມສື່. ຕົວແປ breakpoint ເຫຼົ່ານີ້ຍັງຄົງຢູ່ໃນ CSS ທີ່ຖືກລວບລວມເພື່ອຄວາມເຂົ້າກັນໄດ້ໃນດ້ານຫລັງທີ່ພວກເຂົາສາມາດຖືກນໍາໃຊ້ໂດຍ JavaScript. ຮຽນຮູ້ເພີ່ມເຕີມໃນ spec .
ນີ້ແມ່ນຕົວຢ່າງຂອງ ສິ່ງທີ່ບໍ່ຮອງຮັບ:
@media (min-width: var(--breakpoint-sm)) {
...
}
ແລະນີ້ແມ່ນຕົວຢ່າງຂອງ ສິ່ງທີ່ສະຫນັບສະຫນູນ:
@media (min-width: 768px) {
.custom-element {
color: var(--primary);
}
}