ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
in English

ສີ

Bootstrap ໄດ້ຮັບການສະຫນັບສະຫນູນໂດຍລະບົບສີທີ່ກວ້າງຂວາງທີ່ມີຮູບແບບແລະອົງປະກອບຂອງພວກເຮົາ. ນີ້ເຮັດໃຫ້ການປັບແຕ່ງແລະການຂະຫຍາຍທີ່ສົມບູນແບບສໍາລັບໂຄງການໃດໆ.

ໃນໜ້ານີ້

ສີຫົວຂໍ້

ພວກເຮົາໃຊ້ຊຸດຍ່ອຍຂອງສີທັງໝົດເພື່ອສ້າງແຖບສີທີ່ນ້ອຍກວ່າເພື່ອສ້າງຮູບແບບສີ, ​​ຍັງມີຢູ່ໃນຕົວແປ Sass ແລະແຜນທີ່ Sass ໃນ scss/_variables.scssໄຟລ໌ຂອງ Bootstrap.

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

ສີທັງຫມົດເຫຼົ່ານີ້ແມ່ນມີຢູ່ໃນແຜນທີ່ Sass, $theme-colors.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

ກວດເບິ່ງ ແຜນທີ່ Sass ແລະເອກະສານ loops ຂອງພວກເຮົາ ສໍາລັບວິທີດັດແປງສີເຫຼົ່ານີ້.

ສີທັງໝົດ

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

ໃຫ້ແນ່ໃຈວ່າຈະຕິດຕາມອັດຕາສ່ວນກົງກັນຂ້າມໃນຂະນະທີ່ທ່ານປັບແຕ່ງສີ. ດັ່ງທີ່ສະແດງຂ້າງລຸ່ມນີ້, ພວກເຮົາໄດ້ເພີ່ມສາມອັດຕາສ່ວນກົງກັນຂ້າມກັບແຕ່ລະສີຕົ້ນຕໍ - ຫນຶ່ງສໍາລັບສີປະຈຸບັນຂອງ swatch, ຫນຶ່ງສໍາລັບສີຂາວ, ແລະຫນຶ່ງສໍາລັບສີດໍາ.

$ສີຟ້າ#0d6efd
$blue-100
$blue-200
$blue-300
$blue-400
$blue-500
$blue-600
ສີຟ້າ-700 ໂດລາ
ສີຟ້າ-800 ໂດລາ
ສີຟ້າ-900 ໂດລາ
$indigo#6610f2
$indigo-100
$indigo-200
$indigo-300
$indigo-400
$indigo-500
$indigo-600
$indigo-700
$indigo-800
$indigo-900
$ສີມ່ວງ#6f42c1
$ສີມ່ວງ-100
$ສີມ່ວງ-200
$ສີມ່ວງ-300
$ສີມ່ວງ-400
$ສີມ່ວງ-500
$ສີມ່ວງ-600
$ສີມ່ວງ-700
$ສີມ່ວງ-800
ສີມ່ວງ-900 ໂດລາ
$pink#d63384
$pink-100
$pink-200
$pink-300
$pink-400
$pink-500
$pink-600
$pink-700
$pink-800
$pink-900
$red#dc3545
$red-100
$red-200
$red-300
$red-400
$red-500
$red-600
$red-700
ສີແດງ-800 ໂດລາ
ສີແດງ-900 ໂດລາ
$ສີສົ້ມ#fd7e14
$orange-100
$orange-200
ສົ້ມ-300 ໂດລາ
ສົ້ມ -400 ໂດລາ
ສົ້ມ -500 ໂດລາ
ສົ້ມ -600 ໂດລາ
ສົ້ມ -700 ໂດລາ
ສົ້ມ-800 ໂດລາ
ສົ້ມ $900
$ ສີເຫຼືອງ#ffc107
$yellow-100
ສີເຫຼືອງ-200 ໂດລາ
$yellow-300
ສີເຫຼືອງ-400 ໂດລາ
$yellow-500
ສີເຫຼືອງ-600 ໂດລາ
ສີເຫຼືອງ-700 ໂດລາ
ສີເຫຼືອງ-800 ໂດລາ
ສີເຫຼືອງ-900 ໂດລາ
$ສີຂຽວ#198754
$green-100
$green-200
$green-300
$green-400
$green-500
$green-600
$green-700
$green-800
$green-900
$teal#20c997
$teal-100
$teal-200
$teal-300
$teal-400
$teal-500
$teal-600
$teal-700
$teal-800
$teal-900
$cyan#0dcaf0
$cyan-100
$cyan-200
$cyan-300
$cyan-400
$cyan-500
$cyan-600
$cyan-700
$cyan-800
$cyan-900
$ grey-500#adb5bd
$ grey-100
$ grey-200
$ grey-300
ສີຂີ້ເຖົ່າ $400
$ grey-500
ສີຂີ້ເຖົ່າ $600
ສີຂີ້ເຖົ່າ $700
ສີຂີ້ເຖົ່າ $800
ສີຂີ້ເຖົ່າ $900
$ດຳ#000
$ສີຂາວ#fff

ບັນທຶກກ່ຽວກັບ Sass

Sass ບໍ່ສາມາດສ້າງຕົວແປຕາມໂປຣແກຣມໄດ້, ດັ່ງນັ້ນພວກເຮົາຈຶ່ງສ້າງຕົວແປສໍາລັບທຸກໆສີ ແລະຮົ່ມດ້ວຍຕົນເອງ. ພວກເຮົາລະບຸຄ່າຈຸດກາງ (ຕົວຢ່າງ, $blue-500) ແລະໃຊ້ຟັງຊັນສີທີ່ກຳນົດເອງເພື່ອທາສີ (ເບົາບາງ) ຫຼືຮົ່ມ (ເຮັດໃຫ້ມືດ) ສີຂອງພວກເຮົາຜ່ານ mix()ຟັງຊັນສີຂອງ Sass.

ການ​ນໍາ​ໃຊ້ mix()​ແມ່ນ​ບໍ່​ຄື​ກັນ lighten()​ແລະ darken()— ໃນ​ອະ​ດີດ​ປະ​ສົມ​ສີ​ທີ່​ກໍາ​ນົດ​ໄວ້​ເປັນ​ສີ​ຂາວ​ຫຼື​ສີ​ດໍາ​, ໃນ​ຂະ​ນະ​ທີ່​ຫຼັງ​ຈາກ​ນັ້ນ​ພຽງ​ແຕ່​ປັບ​ຄ່າ​ຄວາມ​ສະ​ຫວ່າງ​ຂອງ​ແຕ່​ລະ​ສີ​. ຜົນໄດ້ຮັບແມ່ນຊຸດສີທີ່ສົມບູນກວ່າ, ດັ່ງທີ່ ສະແດງຢູ່ໃນຕົວຢ່າງ CodePen ນີ້ .

ຂອງພວກເຮົາ tint-color()ແລະ shade-color()ຫນ້າທີ່ໃຊ້ mix()ຄຽງຄູ່ $theme-color-intervalຕົວແປຂອງພວກເຮົາ, ເຊິ່ງລະບຸຄ່າເປີເຊັນຂັ້ນໄດສໍາລັບແຕ່ລະສີປະສົມທີ່ພວກເຮົາຜະລິດ. ເບິ່ງ scss/_functions.scssແລະ scss/_variables.scssໄຟລ໌ສໍາລັບລະຫັດແຫຼ່ງເຕັມ.

ແຜນທີ່ສີ Sass

ໄຟລ໌ Sass ແຫຼ່ງຂອງ Bootstrap ປະກອບມີສາມແຜນທີ່ທີ່ຈະຊ່ວຍໃຫ້ທ່ານໄດ້ໄວແລະງ່າຍດາຍກ່ຽວກັບບັນຊີລາຍຊື່ຂອງສີແລະຄ່າ hex ຂອງພວກມັນ.

  • $colorsລາຍ​ຊື່​ສີ​ພື້ນ​ຖານ ( 500) ທີ່ ​ມີ​ຢູ່​ທັງ​ຫມົດ​ຂອງ​ພວກ​ເຮົາ
  • $theme-colorsລາຍຊື່ສີຫົວຂໍ້ທີ່ມີຊື່ຕາມຄວາມໝາຍທັງໝົດ (ສະແດງຢູ່ລຸ່ມນີ້)
  • $graysລາຍຊື່ tint ແລະຮົ່ມທັງຫມົດຂອງສີຂີ້ເຖົ່າ

ພາຍໃນ 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
);

ເພີ່ມ, ລຶບ, ຫຼືແກ້ໄຂຄ່າພາຍໃນແຜນທີ່ເພື່ອອັບເດດວິທີການທີ່ພວກມັນຖືກໃຊ້ໃນຫຼາຍອົງປະກອບອື່ນໆ. ແຕ່ຫນ້າເສຍດາຍໃນເວລານີ້, ບໍ່ແມ່ນ ທຸກໆ ອົງປະກອບໃຊ້ແຜນທີ່ Sass ນີ້. ການປັບປຸງໃນອະນາຄົດຈະພະຍາຍາມປັບປຸງໃນເລື່ອງນີ້. ຈົນກ່ວານັ້ນ, ວາງແຜນກ່ຽວກັບການນໍາໃຊ້ ${color}ຕົວແປແລະແຜນທີ່ Sass ນີ້.

ຕົວຢ່າງ

ນີ້ແມ່ນວິທີທີ່ທ່ານສາມາດນໍາໃຊ້ສິ່ງເຫຼົ່ານີ້ຢູ່ໃນ Sass ຂອງທ່ານ:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

ຫ້ອງຮຽນປະໂຫຍດ ຂອງສີ ແລະ ພື້ນຫຼັງ ຍັງມີຢູ່ສຳລັບການຕັ້ງຄ່າ colorແລະ background-colorນຳໃຊ້ 500ຄ່າສີ.

ການຜະລິດສິ່ງອໍານວຍຄວາມສະດວກ

ເພີ່ມໃນ v5.1.0

Bootstrap ບໍ່ໄດ້ລວມເອົາ colorແລະ ຜົນ background-colorປະໂຫຍດສໍາລັບທຸກຕົວແປຂອງສີ, ແຕ່ທ່ານສາມາດສ້າງສິ່ງເຫຼົ່ານີ້ດ້ວຍຕົນເອງດ້ວຍ API ປະໂຫຍດ ຂອງພວກເຮົາແລະແຜນທີ່ Sass ຂອງພວກເຮົາເພີ່ມເຕີມໃນ v5.1.0.

  1. ເພື່ອເລີ່ມຕົ້ນ, ໃຫ້ແນ່ໃຈວ່າທ່ານໄດ້ນໍາເຂົ້າຟັງຊັນ, ຕົວແປ, ປະສົມ, ແລະຜົນປະໂຫຍດຂອງພວກເຮົາ.
  2. ໃຊ້ map-merge-multiple()ຟັງຊັນຂອງພວກເຮົາເພື່ອຮວມແຜນທີ່ Sass ຫຼາຍອັນເຂົ້າກັນໃນແຜນທີ່ໃໝ່.
  3. ຮວມແຜນທີ່ລວມກັນໃໝ່ນີ້ເພື່ອຂະຫຍາຍຜົນປະໂຫຍດໃດໆທີ່ມີ {color}-{level}ຊື່ຫ້ອງຮຽນ.

ນີ້ແມ່ນຕົວຢ່າງທີ່ສ້າງຜົນປະໂຫຍດຂອງສີຂໍ້ຄວາມ (ຕົວຢ່າງ, .text-purple-500) ໂດຍໃຊ້ຂັ້ນຕອນຂ້າງເທິງ.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

ນີ້ຈະສ້າງຜົນ .text-{color}-{level}ປະໂຫຍດໃຫມ່ສໍາລັບທຸກສີແລະລະດັບ. ເຈົ້າສາມາດເຮັດເຊັ່ນດຽວກັນສໍາລັບຜົນປະໂຫຍດແລະຊັບສິນອື່ນໆ.