ข้ามไปที่เนื้อหาหลัก ข้ามไปที่การนำทางเอกสาร
Check
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

  1. ในการเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณได้นำเข้าฟังก์ชัน ตัวแปร มิกซ์อิน และยูทิลิตี้ของเราแล้ว
  2. ใช้map-merge-multiple()ฟังก์ชันของเราเพื่อรวมแผนที่ Sass หลายแผนที่เข้าด้วยกันอย่างรวดเร็วในแผนที่ใหม่
  3. รวมแผนที่ใหม่นี้เข้าด้วยกันเพื่อขยายยูทิลิตี้ด้วย{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}ยูทิลิตี้ใหม่สำหรับทุกสีและทุกระดับ คุณสามารถทำเช่นเดียวกันสำหรับยูทิลิตี้และทรัพย์สินอื่นๆ ได้เช่นกัน