Source

Theming Bootstrap

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

ແນະນຳ

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

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

ຊາສ

ໃຊ້ໄຟລ໌ Sass ແຫຼ່ງຂອງພວກເຮົາເພື່ອໃຊ້ປະໂຫຍດຈາກຕົວແປ, ແຜນທີ່, mixins, ແລະອື່ນໆ. ໃນການກໍ່ສ້າງຂອງພວກເຮົາ, ພວກເຮົາໄດ້ເພີ່ມຄວາມແມ່ນຍໍາຂອງຮອບ Sass ເປັນ 6 (ໂດຍຄ່າເລີ່ມຕົ້ນມັນເປັນ 5) ເພື່ອປ້ອງກັນບັນຫາກ່ຽວກັບການລວບລວມຂໍ້ມູນຂອງຕົວທ່ອງເວັບ.

ໂຄງສ້າງໄຟລ໌

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

ທ່ານຈະພົບເຫັນບັນຊີລາຍຊື່ຄົບຖ້ວນຂອງຕົວແປຂອງ Bootstrap ໃນ scss/_variables.scss. ບາງຕົວແປຖືກຕັ້ງເປັນ null, ຕົວແປເຫຼົ່ານີ້ບໍ່ອອກຄຸນສົມບັດເວັ້ນເສຍແຕ່ວ່າພວກມັນຖືກ overridden ໃນການຕັ້ງຄ່າຂອງທ່ານ.

ການລົບລ້າງຕົວແປພາຍໃນໄຟລ໌ 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. ຈົ່ງຮູ້ວ່າທ່ານຕ້ອງໃສ່ມັນລະຫວ່າງຄວາມຕ້ອງການແລະທາງເລືອກຂອງພວກເຮົາ:

// 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 ຢ່າງຖືກຕ້ອງ.

ຟັງຊັນເພີ່ມ ແລະລົບ

ພວກເຮົາໃຊ້ 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ຮູບແບບທີ່ກຳນົດໄວ້ລ່ວງໜ້າໃນອົງປະກອບຕ່າງໆ.
$enable-gradients trueຫຼື false(ຄ່າເລີ່ມຕົ້ນ) ເປີດໃຊ້ການ gradients ທີ່ໄດ້ກໍານົດໄວ້ລ່ວງຫນ້າຜ່ານ background-imageຮູບແບບຕ່າງໆໃນອົງປະກອບຕ່າງໆ.
$enable-transitions true(ຄ່າເລີ່ມຕົ້ນ) ຫຼືfalse ເປີດໃຊ້ transitions ທີ່ກໍານົດໄວ້ກ່ອນໃນອົງປະກອບຕ່າງໆ.
$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(ຄ່າເລີ່ມຕົ້ນ) ຕັ້ງຄ່າເພື່ອ trueສະແດງຄຳເຕືອນເມື່ອໃຊ້ 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 ແລະແຜນທີ່ Sass ໃນ scss/_variables.scssໄຟລ໌ຂອງ Bootstrap.

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

ສີເທົາ

ຊຸດທີ່ກວ້າງຂວາງຂອງຕົວແປສີຂີ້ເຖົ່າແລະແຜນທີ່ Sass scss/_variables.scssສໍາລັບຮົ່ມສີຂີ້ເຖົ່າທີ່ສອດຄ່ອງໃນທົ່ວໂຄງການຂອງທ່ານ. ໃຫ້ສັງເກດວ່າເຫຼົ່ານີ້ແມ່ນ "ສີຂີ້ເຖົ່າເຢັນ", ເຊິ່ງມີແນວໂນ້ມໄປສູ່ສຽງສີຟ້າອ່ອນໆ, ແທນທີ່ຈະເປັນສີຂີ້ເຖົ່າທີ່ເປັນກາງ.

100
200
300
400
500
600
700
800
900

ພາຍໃນ 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 ແມ່ນສ້າງຂຶ້ນດ້ວຍ @eachloops ທີ່ເຮັດຊ້ຳໃນແຜນທີ່ 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 ເຫຼົ່ານີ້ບໍ່ຈໍາກັດພຽງແຕ່ແຜນທີ່ສີ, ຄືກັນ. ນອກນັ້ນທ່ານຍັງສາມາດສ້າງການປ່ຽນແປງທີ່ຕອບສະ��ນອງຂອງອົງປະກອບຫຼືຜົນປະໂຫຍດຂອງທ່ານ. ເອົາຕົວຢ່າງເຄື່ອງມືການຈັດຕໍາແຫນ່ງຂໍ້ຄວາມທີ່ຕອບສະຫນອງຂອງພວກເຮົາບ່ອນທີ່ພວກເຮົາປະສົມ @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, "Noto 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);
  }
}