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 ของเราเพื่อดูวิธีแก้ไขสีเหล่านี้

ทุกสี

สี Bootstrap ทั้งหมดมีให้เลือกเป็นตัวแปร Sass และแผนที่ Sass ในscss/_variables.scssไฟล์ เพื่อหลีกเลี่ยงขนาดไฟล์ที่เพิ่มขึ้น เราไม่สร้างข้อความหรือคลาสสีพื้นหลังสำหรับแต่ละตัวแปรเหล่านี้ แต่เราเลือกชุดย่อยของสีเหล่านี้สำหรับ จาน สีธีม

อย่าลืมตรวจสอบอัตราส่วนคอนทราสต์ขณะปรับแต่งสี ดังที่แสดงด้านล่าง เราได้เพิ่มอัตราส่วนคอนทราสต์สามสีให้กับสีหลักแต่ละสี แบบหนึ่งสำหรับสีปัจจุบันของสวอตช์ แบบหนึ่งสำหรับตัดกับสีขาว และอีกแบบสำหรับแบบตัดกับสีดำ

$สีน้ำเงิน#0d6efd

$สีน้ำเงิน-100

$สีน้ำเงิน-200

$สีน้ำเงิน-300

$สีน้ำเงิน-400

$สีน้ำเงิน-500

$สีน้ำเงิน-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

$สีชมพู#d63384

$pink-100

$ชมพู-200

$pink-300

$pink-400

$pink-500

$pink-600

$pink-700

$pink-800

$pink-900

$red#dc3545

$red-100

$แดง-200

$red-300

$red-400

$red-500

$red-600

$red-700

$red-800

$red-900

$สีส้ม#fd7e14

$orange-100

$สีส้ม-200

$orange-300

$orange-400

$orange-500

$orange-600

$orange-700

$orange-800

$orange-900

$เหลือง#ffc107

$เหลือง-100

$เหลือง-200

$เหลือง-300

$เหลือง-400

$เหลือง-500

$เหลือง-600

$เหลือง-700

$เหลือง-800

$เหลือง-900

$สีเขียว#198754

$สีเขียว-100

สีเขียว-200

$สีเขียว-300

$สีเขียว-400

$สีเขียว-500

$สีเขียว-600

$สีเขียว-700

$สีเขียว-800

$สีเขียว-900

$teal#20c997

$teal-100

$นกเป็ดน้ำ-200

$นกเป็ดน้ำ-300

$นกเป็ดน้ำ-400

$นกเป็ดน้ำ-500

$นกเป็ดน้ำ-600

$นกเป็ดน้ำ-700

$นกเป็ดน้ำ-800

$นกเป็ดน้ำ-900

$cyan#0dcaf0

$cyan-100

$cyan-200

$cyan-300

$cyan-400

$cyan-500

$cyan-600

$cyan-700

$cyan-800

$cyan-900

$สีเทา-500#adb5bd

$สีเทา-100

$สีเทา-200

$สีเทา-300

$สีเทา-400

$สีเทา-500

$สีเทา-600

$สีเทา-700

$สีเทา-800

$สีเทา-900

$ดำ#000

$ขาว#ffff

หมายเหตุเกี่ยวกับ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 มีสามแผนที่เพื่อช่วยให้คุณวนซ้ำรายการสีและค่าฐานสิบหกได้อย่างรวดเร็วและง่ายดาย

$colorsแสดงรายการสีฐาน ( 500) ที่มีอยู่ทั้งหมดของเรา
$theme-colorsแสดงรายการสีของธีมที่มีชื่อตามความหมายทั้งหมด (แสดงด้านล่าง)
$graysแสดงรายการเฉดสีและเฉดสีเทาทั้งหมด

ภายใน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,
  "black":      $black,
  "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

ในการเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณได้นำเข้าฟังก์ชัน ตัวแปร มิกซ์อิน และยูทิลิตี้ของเราแล้ว
ใช้map-merge-multiple()ฟังก์ชันของเราเพื่อรวมแผนที่ Sass หลายแผนที่เข้าด้วยกันอย่างรวดเร็วในแผนที่ใหม่
รวมแผนที่ใหม่นี้เข้าด้วยกันเพื่อขยายยูทิลิตี้ด้วย{color}-{level}ชื่อคลาส

ต่อไปนี้คือตัวอย่างที่สร้างยูทิลิตี้สีข้อความ (เช่น.text-purple-500) โดยใช้ขั้นตอนข้างต้น

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@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}ยูทิลิตี้ใหม่สำหรับทุกสีและทุกระดับ คุณสามารถทำเช่นเดียวกันสำหรับยูทิลิตี้และทรัพย์สินอื่นๆ ได้เช่นกัน