in English

Bootstrap ธีม

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

บทนำ

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

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

ซาส

ใช้ไฟล์ Sass ต้นทางของเราเพื่อใช้ประโยชน์จากตัวแปร แผนที่ มิกซ์อิน และอื่นๆ เมื่อรวบรวม 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

// Include any default variable overrides here (though functions won't be available)

@import "../node_modules/bootstrap/scss/bootstrap";

// Then add additional custom code here

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@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 มี!defaultแฟล็กที่ให้คุณแทนที่ค่าเริ่มต้นของตัวแปรใน Sass ของคุณเองโดยไม่ต้องแก้ไขซอร์สโค้ดของ Bootstrap คัดลอกและวางตัวแปรตามต้องการ แก้ไขค่า และนำ!defaultแฟล็กออก หากกำหนดตัวแปรแล้ว ตัวแปรนั้นจะไม่ถูกกำหนดใหม่ด้วยค่าเริ่มต้นใน Bootstrap

คุณจะพบรายการตัวแปรทั้งหมดของ Bootstrap ได้ในscss/_variables.scss. ตัวแปรบางตัวถูกตั้งค่าเป็นnullตัวแปรเหล่านี้จะไม่แสดงคุณสมบัติเว้นแต่จะถูกแทนที่ในการกำหนดค่าของคุณ

การแทนที่ตัวแปรต้องเกิดขึ้นหลังจากนำเข้าฟังก์ชัน ตัวแปร และมิกซ์อินของเราแล้ว แต่ก่อนการนำเข้าส่วนที่เหลือ

นี่คือตัวอย่างที่เปลี่ยนbackground-colorและcolorสำหรับ<body>เมื่อนำเข้าและรวบรวม Bootstrap ผ่าน npm:

@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$body-bg: #000;
$body-color: #111;

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

ทำซ้ำตามความจำเป็นสำหรับตัวแปรใดๆ ใน Bootstrap รวมถึงตัวเลือกส่วนกลางด้านล่าง

เริ่มต้นกับ Bootstrap ผ่าน npm ด้วยโครงการเริ่มต้นของเรา! ไปที่ที่ เก็บ เทมเพลต twbs/bootstrap-npm-starterเพื่อดูวิธีสร้างและปรับแต่ง Bootstrap ในโครงการ npm ของคุณเอง รวมไอคอนคอมไพเลอร์ Sass, Autoprefixer, Stylelint, PurgeCSS และ 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`
}

Escape SVG

เราใช้escape-svgฟังก์ชันเพื่อหลีกเลี่ยง<, >และ#อักขระสำหรับภาพพื้นหลัง SVG อักขระเหล่านี้ต้องหลบหนีเพื่อให้แสดงภาพพื้นหลังใน IE ได้อย่างถูกต้อง เมื่อใช้escape-svgฟังก์ชัน จะต้องอ้างอิง URI ข้อมูล

ฟังก์ชันบวกและลบ

เราใช้ ฟังก์ชัน addและ เพื่อรวม ฟังก์ชันsubtractCSS calcวัตถุประสงค์หลักของฟังก์ชันเหล่านี้คือการหลีกเลี่ยงข้อผิดพลาดเมื่อมีการ0ส่งค่า "unitless" ไปยังcalcนิพจน์ นิพจน์เช่นcalc(10px - 0)จะส่งคืนข้อผิดพลาดในเบราว์เซอร์ทั้งหมด แม้จะถูกต้องทางคณิตศาสตร์

ตัวอย่างที่การคำนวณถูกต้อง:

$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);
}

ตัวอย่างที่การคำนวณไม่ถูกต้อง:

$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ตามต้องการ

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

ตัวแปร ค่านิยม คำอธิบาย
$spacer 1rem(ค่าเริ่มต้น) หรือค่าใดๆ > 0 ระบุค่าตัวแบ่งเริ่มต้นเพื่อสร้างยูทิลิตี้ตัวเว้นวรรคโดยทาง โปรแกรม
$enable-rounded true(ค่าเริ่มต้น) หรือfalse เปิดใช้งานborder-radiusสไตล์ที่กำหนดไว้ล่วงหน้าในส่วนประกอบต่างๆ
$enable-shadows trueหรือfalse(ค่าเริ่มต้น) เปิดใช้งานรูปแบบการตกแต่งที่กำหนดไว้ล่วงหน้าbox-shadowบนส่วนประกอบต่างๆ ไม่มีผลbox-shadowกับสถานะที่ใช้สำหรับสถานะโฟกัส
$enable-gradients trueหรือfalse(ค่าเริ่มต้น) เปิดใช้งานการไล่ระดับสีที่กำหนดไว้ล่วงหน้าผ่าน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 เปิดใช้งานคาเร็ตองค์ประกอบหลอกบน.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 ตั้งค่าให้falseซ่อนคำเตือนเมื่อใช้มิกซ์อินและฟังก์ชันที่เลิกใช้แล้วซึ่งวางแผนจะลบv5ใน

สี

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

ทุกสี

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

$สีน้ำเงิน #007bff
$indigo #6610f2
$สีม่วง #6f42c1
$สีชมพู #e83e8c
$red #dc3545
$สีส้ม #fd7e14
$เหลือง #ffc107
$สีเขียว #28a745
$teal #20c997
$cyan #17a2b8

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

$หลัก #007bff
$รอง #6c757d
$success #28a745
$อันตราย #dc3545
$คำเตือน #ffc107
$info #17a2b8
$เบา #f8f9fa
$dark #343a40

สีเทา

ชุดตัวแปรสีเทาที่กว้างขวางและแผนที่ Sass scss/_variables.scssสำหรับเฉดสีเทาที่สอดคล้องกันทั่วทั้งโปรเจ็กต์ของคุณ โปรดทราบว่าสิ่งเหล่านี้คือ “สีเทาเย็น” ซึ่งมีแนวโน้มที่จะเป็นโทนสีน้ำเงินที่ละเอียดอ่อน แทนที่จะเป็นสีเทาที่เป็นกลาง

$สีเทา-100 #f8f9fa
$สีเทา-200 #e9cef
$สีเทา-300 #dee2e6
$สีเทา-400 #ced4da
$สีเทา-500 #adb5bd
$สีเทา-600 #6c757d
$สีเทา-700 #495057
$สีเทา-800 #343a40
$สีเทา-900 #212529

ภายใน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, "Noto Sans", "Liberation 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);
}

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

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

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

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

และนี่คือตัวอย่างของสิ่งที่ได้รับการสนับสนุน:

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