Bootstrap ธีม

กำหนด Bootstrap 4 เองด้วยตัวแปร Sass ในตัวใหม่ของเราสำหรับการตั้งค่าสไตล์สากลสำหรับชุดรูปแบบที่ง่ายและการเปลี่ยนแปลงองค์ประกอบ

บทนำ

ใน Bootstrap 3 ธีมส่วนใหญ่ขับเคลื่อนโดยการแทนที่ตัวแปรใน LESS, CSS ที่กำหนดเอง และสไตล์ชีตธีมแยกต่างหากที่เรารวมไว้ในdistไฟล์ ของเรา ด้วยความพยายาม คุณสามารถออกแบบรูปลักษณ์ของ Bootstrap 3 ใหม่ได้อย่างสมบูรณ์โดยไม่ต้องแตะไฟล์หลัก Bootstrap 4 ให้แนวทางที่คุ้นเคย แต่แตกต่างกันเล็กน้อย

ตอนนี้ การกำหนดธีมทำได้โดยตัวแปร Sass, แผนที่ Sass และ CSS ที่กำหนดเอง ไม่มีสไตล์ชีตของธีมเฉพาะอีกต่อไป แต่คุณสามารถเปิดใช้ธีมในตัวเพื่อเพิ่มการไล่ระดับสี เงา และอื่นๆ ได้

ซาส

ใช้ไฟล์ Sass ต้นทางของเราเพื่อใช้ประโยชน์จากตัวแปร แผนที่ มิกซ์อิน และอื่นๆ

โครงสร้างไฟล์

หลีกเลี่ยงการแก้ไขไฟล์หลักของ 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 สำหรับปลั๊กอินของเราด้วย

// 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ส่วนได้ตามต้องการ เราแนะนำให้ใช้กองนำเข้าแบบเต็มจากbootstrap.scssไฟล์ของเราเป็นจุดเริ่มต้นของคุณ

ค่าเริ่มต้นของตัวแปร

ตัวแปร Sass ทุกตัวใน Bootstrap 4 มี!defaultแฟล็กที่ให้คุณแทนที่ค่าเริ่มต้นของตัวแปรใน Sass ของคุณเองโดยไม่ต้องแก้ไขซอร์สโค้ดของ Bootstrap คัดลอกและวางตัวแปรตามต้องการ แก้ไขค่า และนำ!defaultแฟล็กออก หากกำหนดตัวแปรแล้ว ตัวแปรนั้นจะไม่ถูกกำหนดใหม่ด้วยค่าเริ่มต้นใน Bootstrap

คุณจะพบรายการตัวแปรทั้งหมดของ Bootstrap ได้ในscss/_variables.scss.

การแทนที่ตัวแปรภายในไฟล์ Sass เดียวกันอาจมาก่อนหรือหลังตัวแปรเริ่มต้น อย่างไรก็ตาม เมื่อแทนที่ไฟล์ Sass การแทนที่ของคุณต้องมาก่อนนำเข้าไฟล์ 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 รวมถึงตัวเลือกส่วนกลางด้านล่าง

แผนที่และลูป

Bootstrap 4 มีแผนที่ Sass จำนวนหนึ่ง คู่ค่าคีย์ที่ช่วยให้สร้างกลุ่มของ CSS ที่เกี่ยวข้องได้ง่ายขึ้น เราใช้แผนที่ Sass สำหรับสี จุดพักตาราง และอื่นๆ เช่นเดียวกับตัวแปร Sass แผนที่ Sass ทั้งหมดมี!defaultแฟล็กและสามารถแทนที่และขยายได้

แผนที่ 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);
}

ในทางปฏิบัติ คุณจะต้องเรียกใช้ฟังก์ชันและส่งผ่านพารามิเตอร์ 2 ตัว ได้แก่ ชื่อของสีจาก$theme-colors(เช่น หลักหรืออันตราย) และระดับตัวเลข

.custom-element {
  color: theme-color-level(primary, -10);
}

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

ความคมชัดของสี

ฟังก์ชันเพิ่มเติมอย่างหนึ่งที่เรารวมไว้ใน Bootstrap คือฟังก์ชันคอนทราสต์ของสีcolor-yiq. ใช้พื้นที่สี YIQเพื่อคืนค่าสีคอนทราสต์ของแสง ( #fff) หรือสีเข้ม ( #111) โดยอัตโนมัติตามสีพื้นฐานที่ระบุ ฟังก์ชันนี้มีประโยชน์อย่างยิ่งสำหรับมิกซ์อินหรือลูปที่คุณสร้างหลายคลาส

ตัวอย่างเช่น ในการสร้างตัวอย่างสีจาก$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ตามต้องการ

คุณสามารถค้นหาและปรับแต่งตัวแปรเหล่านี้สำหรับตัวเลือกส่วนกลางที่สำคัญได้ในscss/_variables.scssไฟล์ ของ Bootstrap

ตัวแปร	ค่านิยม	คำอธิบาย
`$spacer`	`1rem`(ค่าเริ่มต้น) หรือค่าใดๆ > 0	ระบุค่าตัวแบ่งเริ่มต้นเพื่อสร้างยูทิลิตี้ตัวเว้นวรรคโดยทาง โปรแกรม
`$enable-rounded`	`true`(ค่าเริ่มต้น) หรือ`false`	เปิดใช้งาน`border-radius`สไตล์ที่กำหนดไว้ล่วงหน้าในส่วนประกอบต่างๆ
`$enable-shadows`	`true`หรือ`false`(ค่าเริ่มต้น)	เปิดใช้งาน`box-shadow`สไตล์ที่กำหนดไว้ล่วงหน้าในส่วนประกอบต่างๆ
`$enable-gradients`	`true`หรือ`false`(ค่าเริ่มต้น)	เปิดใช้งานการไล่ระดับสีที่กำหนดไว้ล่วงหน้าผ่าน`background-image`สไตล์บนส่วนประกอบต่างๆ
`$enable-transitions`	`true`(ค่าเริ่มต้น) หรือ`false`	เปิดใช้งาน`transition`s ที่กำหนดไว้ล่วงหน้าบนส่วนประกอบต่างๆ
`$enable-hover-media-query`	`true`หรือ`false`(ค่าเริ่มต้น)	เลิกใช้
`$enable-grid-classes`	`true`(ค่าเริ่มต้น) หรือ`false`	เปิดใช้งานการสร้างคลาส CSS สำหรับระบบกริด (เช่น , `.container`, `.row`, `.col-md-1`ฯลฯ )
`$enable-caret`	`true`(ค่าเริ่มต้น) หรือ`false`	เปิดใช้งานคาเร็ตองค์ประกอบหลอกบน`.dropdown-toggle`.
`$enable-print-styles`	`true`(ค่าเริ่มต้น) หรือ`false`	เปิดใช้งานรูปแบบเพื่อเพิ่มประสิทธิภาพการพิมพ์

สี

ส่วนประกอบและยูทิลิตี้ต่างๆ ของ Bootstrap จำนวนมากถูกสร้างขึ้นผ่านชุดสีที่กำหนดไว้ในแผนที่ Sass แผนที่นี้สามารถวนซ้ำใน Sass เพื่อสร้างชุดกฎได้อย่างรวดเร็ว

ทุกสี

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

สีฟ้า

คราม

สีม่วง

สีชมพู

สีแดง

ส้ม

สีเหลือง

เขียว

นกเป็ดน้ำ

สีฟ้า

คุณสามารถใช้สิ่งเหล่านี้ใน 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ไฟล์ ของ Bootstraps

หลัก

รอง

ความสำเร็จ

อันตราย

คำเตือน

ข้อมูล

แสงสว่าง

มืด

สีเทา

ชุดตัวแปรสีเทาที่กว้างขวางและแผนที่ 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 จำนวนมากถูกสร้างขึ้นด้วย@eachการวนซ้ำที่วนซ้ำบนแผนที่ Sass สิ่งนี้มีประโยชน์อย่างยิ่งในการสร้างตัวแปรของส่วนประกอบโดยเรา$theme-colorsและสร้างตัวแปรที่ตอบสนองได้สำหรับแต่ละเบรกพอยต์ เมื่อคุณปรับแต่งแผนที่ Sass เหล่านี้และคอมไพล์ใหม่ คุณจะเห็นการเปลี่ยนแปลงของคุณสะท้อนให้เห็นในลูปเหล่านี้โดยอัตโนมัติ

ตัวดัดแปลง

คอมโพเนนต์ของ Bootstrap จำนวนมากสร้างขึ้นด้วยวิธีคลาสตัวดัดแปลงฐาน ซึ่งหมายความว่าการจัดสไตล์ส่วนใหญ่จะรวมอยู่ในคลาสพื้นฐาน (เช่น.btn) ในขณะที่รูปแบบต่างๆ นั้นจำกัดอยู่ที่คลาสตัวปรับแต่ง (เช่น.btn-danger) คลาสตัวปรับแต่งเหล่านี้สร้างขึ้นจาก$theme-colorsแผนที่เพื่อปรับแต่งหมายเลขและชื่อของคลาสตัวปรับแต่งของเรา

ต่อไปนี้คือตัวอย่างสองตัวอย่างเกี่ยวกับวิธีที่เราวนซ้ำบน$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 เหล่านี้ไม่ได้จำกัดเฉพาะแผนที่สีเช่นกัน คุณยังสามารถสร้างรูปแบบที่ตอบสนองของส่วนประกอบหรือยูทิลิตี้ของคุณได้ ยกตัวอย่างยูทิลิตีการจัดแนวข้อความที่ตอบสนองซึ่งเราผสมผสานการ@eachวนซ้ำสำหรับ$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; }
  }
}

หากคุณต้องการแก้ไข your $grid-breakpointsการเปลี่ยนแปลงของคุณจะนำไปใช้กับลูปทั้งหมดที่วนซ้ำบนแผนที่นั้น

ตัวแปร CSS

Bootstrap 4 มีคุณสมบัติที่กำหนดเอง (ตัวแปร) ของ CSS ประมาณสองโหล ใน CSS ที่คอมไพล์แล้ว ค่าเหล่านี้ช่วยให้เข้าถึงค่าที่ใช้กันทั่วไปได้ง่าย เช่น สีของธีม จุดพัก และกองแบบอักษรหลักเมื่อทำงานใน Inspector ของเบราว์เซอร์ แซนด์บ็อกซ์โค้ด หรือการสร้างต้นแบบทั่วไป

ตัวแปรที่มีอยู่

นี่คือตัวแปรที่เรารวมไว้ (โปรดทราบว่า: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);
}

ตัวแปรเบรกพอยต์

แม้ว่าในตอนแรกเราจะรวมเบรกพอยต์ไว้ในตัวแปร CSS ของเรา (เช่น--breakpoint-md) สิ่งเหล่านี้ไม่ได้รับการสนับสนุนในการสืบค้นสื่อแต่ยังคงสามารถใช้ภายในชุดกฎในการสืบค้นสื่อ ตัวแปรเบรกพอยต์เหล่านี้ยังคงอยู่ใน CSS ที่คอมไพล์แล้วสำหรับความเข้ากันได้แบบย้อนหลัง เนื่องจาก JavaScript สามารถใช้งานได้ เรียนรู้เพิ่มเติมในข้อมูลจำเพาะ

ต่อไปนี้คือตัวอย่างที่ไม่รองรับ:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

และนี่คือตัวอย่างที่รองรับ:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}