Source

Theming Bootstrap

ປັບແຕ່ງ Bootstrap 4 ດ້ວຍຕົວແປ Sass ທີ່ສ້າງຂຶ້ນໃໝ່ຂອງພວກເຮົາເພື່ອຄວາມມັກແບບທົ່ວໂລກເພື່ອການປ່ຽນຮູບແບບສີສັນ ແລະ ອົງປະກອບທີ່ງ່າຍ.

ແນະນຳ

ໃນ Bootstrap 3, ຫົວຂໍ້ຖືກຂັບເຄື່ອນສ່ວນໃຫຍ່ໂດຍການປ່ຽນແທນຕົວແປໃນ LESS, CSS ແບບກຳນົດເອງ, ແລະຮູບແບບສີສັນຂອງຮູບແບບສີສັນແຍກຕ່າງຫາກທີ່ພວກເຮົາລວມຢູ່ໃນ distໄຟລ໌ຂອງພວກເຮົາ. ດ້ວຍຄວາມພະຍາຍາມບາງຢ່າງ, ຄົນເຮົາສາມາດອອກແບບຮູບແບບຂອງ Bootstrap 3 ໄດ້ຢ່າງສົມບູນໂດຍບໍ່ຕ້ອງແຕະໄຟລ໌ຫຼັກ. Bootstrap 4 ສະຫນອງວິທີການທີ່ຄຸ້ນເຄີຍ, ແຕ່ແຕກຕ່າງກັນເລັກນ້ອຍ.

ໃນປັດຈຸບັນ, ຫົວຂໍ້ແມ່ນສໍາເລັດໂດຍຕົວແປ Sass, ແຜນທີ່ Sass, ແລະ CSS ທີ່ກໍາຫນົດເອງ. ບໍ່ມີຮູບແບບສີສັນໜ້າຕາທີ່ອຸທິດຕົນເພີ່ມເຕີມ; ແທນທີ່ຈະ, ທ່ານສາມາດເປີດໃຊ້ຮູບແບບໃນຕົວເພື່ອເພີ່ມ gradients, shadows, ແລະອື່ນໆ.

ຊາສ

ໃຊ້ໄຟລ໌ Sass ແຫຼ່ງຂອງພວກເຮົາເພື່ອໃຊ້ປະໂຫຍດຈາກຕົວແປ, ແຜນທີ່, mixins, ແລະອື່ນໆ.

ໂຄງສ້າງໄຟລ໌

ເມື່ອໃດກໍ່ຕາມທີ່ເປັນໄປໄດ້, ຫຼີກເວັ້ນການດັດແປງໄຟລ໌ຫຼັກຂອງ 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

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

ດ້ວຍ​ການ​ຕັ້ງ​ຄ່າ​ນັ້ນ​, ທ່ານ​ສາ​ມາດ​ເລີ່ມ​ຕົ້ນ​ທີ່​ຈະ​ປັບ​ປຸງ​ແກ້​ໄຂ​ໃດໆ​ຂອງ​ຕົວ​ແປ Sass ແລະ​ແຜນ​ທີ່​ໃນ​ຂອງ​ທ່ານ custom.scss. ນອກນັ້ນທ່ານຍັງສາມາດເລີ່ມຕົ້ນທີ່ຈະເພີ່ມພາກສ່ວນຂອງ Bootstrap ພາຍໃຕ້ // Optionalພາກສ່ວນຕາມຄວາມຕ້ອງການ. ພວກເຮົາແນະນໍາໃຫ້ໃຊ້ stack ການນໍາເຂົ້າຢ່າງເຕັມທີ່ຈາກ bootstrap.scssໄຟລ໌ຂອງພວກເຮົາເປັນຈຸດເລີ່ມຕົ້ນຂອງທ່ານ.

ຄ່າເລີ່ມຕົ້ນທີ່ປ່ຽນແປງໄດ້

ທຸກໆຕົວແປ Sass ໃນ Bootstrap 4 ປະກອບມີ !defaultທຸງທີ່ຊ່ວຍໃຫ້ທ່ານສາມາດ override ຄ່າເລີ່ມຕົ້ນຂອງຕົວແປໃນ Sass ຂອງທ່ານເອງໂດຍບໍ່ມີການດັດແປງລະຫັດແຫຼ່ງຂອງ Bootstrap. ຄັດລອກແລະວາງຕົວແປຕາມຄວາມຕ້ອງການ, ແກ້ໄຂຄ່າຂອງມັນ, ແລະເອົາ !defaultທຸງອອກ. ຖ້າຕົວແປໄດ້ຖືກມອບຫມາຍແລ້ວ, ມັນຈະບໍ່ຖືກມອບຫມາຍຄືນໃຫມ່ໂດຍຄ່າເລີ່ມຕົ້ນໃນ Bootstrap.

ການລົບລ້າງຕົວແປພາຍໃນໄຟລ໌ Sass ດຽວກັນສາມາດມາກ່ອນ ຫຼືຫຼັງຈາກຕົວແປເລີ່ມຕົ້ນ. ແນວໃດກໍ່ຕາມ, ເມື່ອ overriding ຂ້າມໄຟລ໌ Sass, ການ overrides ຂອງທ່ານຈະຕ້ອງມາກ່ອນທີ່ທ່ານຈະນໍາເຂົ້າໄຟລ໌ Sass ຂອງ Bootstrap.

ນີ້ແມ່ນຕົວຢ່າງທີ່ປ່ຽນແປງ background-colorແລະ colorສໍາລັບການ <body>ນໍາເຂົ້າແລະລວບລວມ Bootstrap ຜ່ານ npm:

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

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

ເຮັດຊ້ໍາອີກຕາມຄວາມຈໍາເປັນສໍາລັບຕົວແປໃດໆໃນ 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:

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

ກະແຈທີ່ຕ້ອງການ

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

ຕົວເລືອກ Sass

ປັບແຕ່ງ Bootstrap 4 ດ້ວຍໄຟລ໌ຕົວແປທີ່ສ້າງຂຶ້ນເອງຂອງພວກເຮົາ ແລະສະຫຼັບການຕັ້ງຄ່າ CSS ທົ່ວໂລກໄດ້ຢ່າງງ່າຍດາຍດ້ວຍ $enable-*ຕົວແປ Sass ໃໝ່. ລົບລ້າງຄ່າຂອງຕົວແປ ແລະປະກອບຄືນໃໝ່ npm run testຕາມຄວາມຕ້ອງການ.

ທ່ານ​ສາ​ມາດ​ຊອກ​ຫາ​ແລະ​ປັບ​ຕົວ​ປ່ຽນ​ແປງ​ເຫຼົ່າ​ນີ້​ສໍາ​ລັບ​ທາງ​ເລືອກ​ໃນ​ທົ່ວ​ໂລກ​ທີ່​ສໍາ​ຄັນ​ໃນ _variables.scss​ໄຟລ​໌​ຂອງ​ພວກ​ເຮົາ​.

ຕົວແປ ຄຸນຄ່າ ລາຍລະອຽດ
$spacer 1rem(ຄ່າເລີ່ມຕົ້ນ), ຫຼືຄ່າໃດໆ > 0 ລະບຸຄ່າເລີ່ມຕົ້ນຂອງ spacer ເພື່ອສ້າງໂປຣແກຣມ spacer utilities ຂອງພວກເຮົາ .
$enable-rounded true(ຄ່າເລີ່ມຕົ້ນ) ຫຼືfalse ເປີດໃຊ້ border-radiusຮູບແບບທີ່ກຳນົດໄວ້ລ່ວງໜ້າໃນອົງປະກອບຕ່າງໆ.
$enable-shadows trueຫຼື false(ຄ່າເລີ່ມຕົ້ນ) ເປີດໃຊ້ box-shadowຮູບແບບທີ່ກຳນົດໄວ້ລ່ວງໜ້າໃນອົງປະກອບຕ່າງໆ.
$enable-gradients trueຫຼື false(ຄ່າເລີ່ມຕົ້ນ) ເປີດໃຊ້ການ gradients ທີ່ໄດ້ກໍານົດໄວ້ລ່ວງຫນ້າຜ່ານ background-imageຮູບແບບຕ່າງໆໃນອົງປະກອບຕ່າງໆ.
$enable-transitions true(ຄ່າເລີ່ມຕົ້ນ) ຫຼືfalse ເປີດໃຊ້ transitions ທີ່ກໍານົດໄວ້ກ່ອນໃນອົງປະກອບຕ່າງໆ.
$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-print-styles true(ຄ່າເລີ່ມຕົ້ນ) ຫຼືfalse ເປີດໃຊ້ຮູບແບບສໍາລັບການເພີ່ມປະສິດທິພາບການພິມ.

ສີ

ຫຼາຍໆອົງປະກອບ ແລະເຄື່ອງໃຊ້ຕ່າງໆຂອງ 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 ແລະແຜນທີ່ Sass ໃນ scss/_variables.scssໄຟລ໌ຂອງພວກເຮົາ.

ປະຖົມ
ມັດທະຍົມ
ຄວາມ​ສໍາ​ເລັດ
ອັນຕະລາຍ
ຄຳເຕືອນ
ຂໍ້ມູນ
ແສງສະຫວ່າງ
ມືດ

ສີເທົາ

ຊຸດທີ່ກວ້າງຂວາງຂອງຕົວແປສີຂີ້ເຖົ່າແລະແຜນທີ່ Sass scss/_variables.scssສໍາລັບຮົ່ມສີຂີ້ເຖົ່າທີ່ສອດຄ່ອງໃນທົ່ວໂຄງການຂອງທ່ານ.

100
200
300
400
500
600
700
800
900

ພາຍໃນ _variables.scss, ທ່ານຈະພົບເຫັນຕົວແປສີຂອງພວກເຮົາແລະແຜນທີ່ 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 ແມ່ນສ້າງຂຶ້ນດ້ວຍ @eachloops ທີ່ເຮັດຊ້ຳໃນແຜນທີ່ Sass. ນີ້ແມ່ນເປັນປະໂຫຍດໂດຍສະເພາະສໍາລັບການສ້າງ variants ຂອງອົງປະກອບໂດຍພວກເຮົາ $theme-colorsແລະການສ້າງ variants ຕອບສະຫນອງສໍາລັບແຕ່ລະ breakpoint. ໃນຂະນະທີ່ທ່ານປັບແຕ່ງແຜນທີ່ Sass ເຫຼົ່ານີ້ແລະລວບລວມຄືນໃຫມ່, ທ່ານຈະເຫັນການປ່ຽນແປງຂອງທ່ານໂດຍອັດຕະໂນມັດໃນ loops ເຫຼົ່ານີ້.

ຕົວແກ້ໄຂ

ຫຼາຍໆອົງປະກອບຂອງ Bootstrap ແມ່ນສ້າງຂຶ້ນດ້ວຍວິທີການຂັ້ນພື້ນຖານຕົວແກ້ໄຂ. ນີ້ຫມາຍຄວາມວ່າສ່ວນໃຫຍ່ຂອງຄໍເຕົ້າໄຂ່ທີ່ບັນຈຸຢູ່ໃນຊັ້ນພື້ນຖານ (ເຊັ່ນ, .btn) ໃນຂະນະທີ່ການປ່ຽນແປງແບບສະໄຕແມ່ນຖືກຈໍາກັດຢູ່ໃນຊັ້ນດັດແກ້ (ເຊັ່ນ, .btn-danger). ຫ້ອງຮຽນຕົວແກ້ໄຂເຫຼົ່ານີ້ຖືກສ້າງຂຶ້ນຈາກ $theme-colorsແຜນທີ່ເພື່ອເຮັດໃຫ້ການປັບແຕ່ງຈໍານວນ ແລະຊື່ຂອງຫ້ອງຮຽນຕົວແກ້ໄຂຂອງພວກເຮົາ.

ນີ້ແມ່ນສອງຕົວຢ່າງຂອງວິທີທີ່ພວກເຮົາ 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 ເຫຼົ່ານີ້ບໍ່ຈໍາກັດພຽງແຕ່ແຜນທີ່ສີ, ຄືກັນ. ນອກນັ້ນທ່ານຍັງສາມາດສ້າງການປ່ຽນແປງທີ່ຕອບສະຫນອງຂອງອົງປະກອບຫຼືຜົນປະໂຫຍດຂອງທ່ານ. ເອົາຕົວຢ່າງເຄື່ອງມືການຈັດຕໍາແຫນ່ງຂໍ້ຄວາມທີ່ຕອບສະຫນອງຂອງພວກເຮົາບ່ອນທີ່ພວກເຮົາປະສົມ @eachloop ສໍາລັບ $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 ຕົວອັກສອນຕົ້ນຕໍໃນເວລາທີ່ເຮັດວຽກຢູ່ໃນຕົວກວດສອບຂອງຕົວທ່ອງເວັບ, sandbox ລະຫັດ, ຫຼືຕົວແບບທົ່ວໄປ.

ຕົວແປທີ່ມີຢູ່

ນີ້ແມ່ນຕົວແປທີ່ພວກເຮົາປະກອບມີ (ສັງເກດວ່າ :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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --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 ຂອງພວກເຮົາໃນການສອບຖາມສື່ຂອງທ່ານ:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}