Bootstrap ธีม
กำหนด Bootstrap 4 เองด้วยตัวแปร Sass ในตัวใหม่ของเราสำหรับการตั้งค่าสไตล์สากลสำหรับชุดรูปแบบที่ง่ายและการเปลี่ยนแปลงองค์ประกอบ
บทนำ
ใน Bootstrap 3 ธีมส่วนใหญ่ขับเคลื่อนโดยการแทนที่ตัวแปรใน LESS, CSS ที่กำหนดเอง และสไตล์ชีตธีมแยกต่างหากที่เรารวมไว้ในdist
ไฟล์ ของเรา ด้วยความพยายาม คุณสามารถออกแบบรูปลักษณ์ของ Bootstrap 3 ใหม่ได้อย่างสมบูรณ์โดยไม่ต้องแตะไฟล์หลัก Bootstrap 4 ให้แนวทางที่คุ้นเคย แต่แตกต่างกันเล็กน้อย
ตอนนี้ การกำหนดธีมทำได้โดยตัวแปร Sass, แผนที่ Sass และ CSS ที่กำหนดเอง ไม่มีสไตล์ชีตของธีมเฉพาะอีกต่อไป แต่คุณสามารถเปิดใช้ธีมในตัวเพื่อเพิ่มการไล่ระดับสี เงา และอื่นๆ ได้
ซาส
ใช้ไฟล์ Sass ต้นทางของเราเพื่อใช้ประโยชน์จากตัวแปร แผนที่ มิกซ์อิน และอื่นๆ
โครงสร้างไฟล์
หลีกเลี่ยงการแก้ไขไฟล์หลักของ Bootstrap เมื่อใดก็ตามที่เป็นไปได้ สำหรับ Sass นั่นหมายถึงการสร้างสไตล์ชีตของคุณเองที่นำเข้า Bootstrap เพื่อให้คุณสามารถแก้ไขและขยายได้ สมมติว่าคุณใช้ตัวจัดการแพ็คเกจเช่น npm คุณจะมีโครงสร้างไฟล์ที่มีลักษณะดังนี้:
หากคุณดาวน์โหลดไฟล์ต้นทางของเราและไม่ได้ใช้ตัวจัดการแพ็คเกจ คุณจะต้องตั้งค่าบางอย่างที่คล้ายกับโครงสร้างนั้นด้วยตนเอง โดยแยกไฟล์ต้นฉบับของ Bootstrap ออกจากไฟล์ของคุณเอง
นำเข้า
ใน ของcustom.scss
คุณ คุณจะนำเข้าไฟล์ Sass ต้นทางของ Bootstrap คุณมีสองตัวเลือก: รวม Bootstrap ทั้งหมดหรือเลือกชิ้นส่วนที่คุณต้องการ เราสนับสนุนสิ่งหลัง แม้ว่าโปรดทราบว่ามีข้อกำหนดและการพึ่งพาบางอย่างในส่วนประกอบของเรา คุณจะต้องรวม JavaScript สำหรับปลั๊กอินของเราด้วย
ด้วยการตั้งค่าดังกล่าว คุณสามารถเริ่มแก้ไขตัวแปร 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:
ทำซ้ำตามความจำเป็นสำหรับตัวแปรใดๆ ใน Bootstrap รวมถึงตัวเลือกส่วนกลางด้านล่าง
แผนที่และลูป
Bootstrap 4 มีแผนที่ Sass จำนวนหนึ่ง คู่ค่าคีย์ที่ช่วยให้สร้างกลุ่มของ CSS ที่เกี่ยวข้องได้ง่ายขึ้น เราใช้แผนที่ Sass สำหรับสี จุดพักตาราง และอื่นๆ เช่นเดียวกับตัวแปร Sass แผนที่ Sass ทั้งหมดมี!default
แฟล็กและสามารถแทนที่และขยายได้
แผนที่ Sass บางส่วนของเราถูกรวมเป็นแผนที่ว่างโดยค่าเริ่มต้น สิ่งนี้ทำเพื่อให้ง่ายต่อการขยายแผนที่ Sass ที่กำหนด แต่ต้องใช้ค่าใช้จ่ายในการลบรายการออกจากแผนที่ยากขึ้นเล็กน้อย
แก้ไขแผนที่
หากต้องการแก้ไขสีที่มีอยู่ใน$theme-colors
แผนที่ของเรา ให้เพิ่มข้อมูลต่อไปนี้ในไฟล์ Sass ที่คุณกำหนดเอง:
เพิ่มในแผนที่
หากต้องการเพิ่มสีใหม่ ให้$theme-colors
เพิ่มคีย์และค่าใหม่:
ลบออกจากแผนที่
ในการลบสีออกจาก$theme-colors
หรือแผนที่อื่น ให้map-remove
ใช้ โปรดทราบว่าคุณต้องแทรกระหว่างข้อกำหนดและตัวเลือกของเรา:
คีย์ที่จำเป็น
Bootstrap ถือว่ามีคีย์เฉพาะบางอย่างในแผนที่ Sass ในขณะที่เราใช้และขยายสิ่งเหล่านี้เอง เมื่อคุณปรับแต่งแผนที่ที่รวมไว้ คุณอาจพบข้อผิดพลาดที่มีการใช้คีย์ของแผนที่ Sass เฉพาะ
ตัวอย่างเช่น เราใช้primary
, success
และdanger
คีย์จาก$theme-colors
ลิงก์ ปุ่ม และสถานะของฟอร์ม การแทนที่ค่าของคีย์เหล่านี้ไม่ควรมีปัญหา แต่การลบออกอาจทำให้เกิดปัญหาในการรวบรวม Sass ในกรณีเหล่านี้ คุณจะต้องแก้ไขโค้ด Sass ที่ใช้ค่าเหล่านั้น
ฟังก์ชั่น
Bootstrap ใช้ฟังก์ชัน Sass หลายอย่าง แต่มีเฉพาะชุดย่อยเท่านั้นที่ใช้ได้กับชุดรูปแบบทั่วไป เราได้รวมสามฟังก์ชันสำหรับการรับค่าจากแผนที่สี:
สิ่งเหล่านี้ช่วยให้คุณเลือกสีจากแผนที่ Sass ได้เหมือนกับที่คุณใช้ตัวแปรสีจาก v3
นอกจากนี้เรายั���มีฟังก์ชันอื่นในการรับระดับสีเฉพาะจาก$theme-colors
แผนที่ ค่าระดับลบจะทำให้สีสว่างขึ้น ในขณะที่ระดับที่สูงกว่าจะมืดลง
ในทางปฏิบัติ คุณจะต้องเรียกใช้ฟังก์ชันและส่งผ่านพารามิเตอร์ 2 ตัว ได้แก่ ชื่อของสีจาก$theme-colors
(เช่น หลักหรืออันตราย) และระดับตัวเลข
คุณสามารถเพิ่มฟังก์ชันเพิ่มเติมได้ในอนาคตหรือ Sass ที่คุณกำหนดเองเพื่อสร้างฟังก์ชันระดับสำหรับแผนที่ Sass เพิ่มเติม หรือแม้แต่ฟังก์ชันทั่วไปหากคุณต้องการให้ละเอียดยิ่งขึ้น
ความคมชัดของสี
ฟังก์ชันเพิ่มเติมอย่างหนึ่งที่เรารวมไว้ใน Bootstrap คือฟังก์ชันคอนทราสต์ของสีcolor-yiq
. ใช้พื้นที่สี YIQเพื่อคืนค่าสีคอนทราสต์ของแสง ( #fff
) หรือสีเข้ม ( #111
) โดยอัตโนมัติตามสีพื้นฐานที่ระบุ ฟังก์ชันนี้มีประโยชน์อย่างยิ่งสำหรับมิกซ์อินหรือลูปที่คุณสร้างหลายคลาส
ตัวอย่างเช่น ในการสร้างตัวอย่างสีจาก$theme-colors
แผนที่ของเรา:
นอกจากนี้ยังสามารถใช้สำหรับความต้องการคอนทราสต์แบบครั้งเดียว:
คุณยังสามารถระบุสีพื้นฐานด้วยฟังก์ชันแผนที่สีของเรา:
ตัวเลือก 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 ของคุณได้อย่างไร:
นอกจากนี้ยังมีคลาสยูทิลิตี้สีcolor
สำหรับการตั้งค่า และbackground-color
.
ในอนาคต เราจะตั้งเป้าที่จะให้แผนที่ Sass และตัวแปรสำหรับเฉดสีของแต่ละสี ตามที่เราทำกับสีโทนสีเทาด้านล่าง
ธีมสี
เราใช้ชุดย่อยของสีทั้งหมดเพื่อสร้างจานสีที่มีขนาดเล็กลงสำหรับสร้างแบบแผนชุดสี นอกจากนี้ยังมีให้ใช้เป็นตัวแปร Sass และแผนที่ Sass ในscss/_variables.scss
ไฟล์ ของ Bootstraps
สีเทา
ชุดตัวแปรสีเทาที่กว้างขวางและแผนที่ Sass scss/_variables.scss
สำหรับเฉดสีเทาที่สอดคล้องกันทั่วทั้งโปรเจ็กต์ของคุณ
ภายในscss/_variables.scss
คุณจะพบตัวแปรสีของ Bootstrap และแผนที่ Sass นี่คือตัวอย่าง$colors
แผนที่ Sass:
เพิ่ม ลบ หรือแก้ไขค่าภายในแผนที่เพื่ออัปเดตวิธีการใช้ในองค์ประกอบอื่นๆ มากมาย น่าเสียดาย ณ เวลานี้ ไม่ใช่ทุกองค์ประกอบที่ใช้แผนที่ Sass นี้ การอัปเดตในอนาคตจะพยายามปรับปรุงสิ่งนี้ ก่อนหน้านั้น ให้วางแผนการใช้${color}
ตัวแปรและแผนที่ Sass นี้
ส่วนประกอบ
ส่วนประกอบและยูทิลิตี้ของ Bootstrap จำนวนมากถูกสร้างขึ้นด้วย@each
การวนซ้ำที่วนซ้ำบนแผนที่ Sass สิ่งนี้มีประโยชน์อย่างยิ่งในการสร้างตัวแปรของส่วนประกอบโดยเรา$theme-colors
และสร้างตัวแปรที่ตอบสนองได้สำหรับแต่ละเบรกพอยต์ เมื่อคุณปรับแต่งแผนที่ Sass เหล่านี้และคอมไพล์ใหม่ คุณจะเห็นการเปลี่ยนแปลงของคุณสะท้อนให้เห็นในลูปเหล่านี้โดยอัตโนมัติ
ตัวดัดแปลง
คอมโพเนนต์ของ Bootstrap จำนวนมากสร้างขึ้นด้วยวิธีคลาสตัวดัดแปลงฐาน ซึ่งหมายความว่าการจัดสไตล์ส่วนใหญ่จะรวมอยู่ในคลาสพื้นฐาน (เช่น.btn
) ในขณะที่รูปแบบต่างๆ นั้นจำกัดอยู่ที่คลาสตัวปรับแต่ง (เช่น.btn-danger
) คลาสตัวปรับแต่งเหล่านี้สร้างขึ้นจาก$theme-colors
แผนที่เพื่อปรับแต่งหมายเลขและชื่อของคลาสตัวปรับแต่งของเรา
ต่อไปนี้คือตัวอย่างสองตัวอย่างเกี่ยวกับวิธีที่เราวนซ้ำบน$theme-colors
แผนที่เพื่อสร้างตัวแก้ไข.alert
องค์ประกอบและ.bg-*
ยูทิลิตี้พื้นหลัง ทั้งหมดของเรา
ตอบสนอง
ลูป Sass เหล่านี้ไม่ได้จำกัดเฉพาะแผนที่สีเช่นกัน คุณยังสามารถสร้างรูปแบบที่ตอบสนองของส่วนประกอบหรือยูทิลิตี้ของคุณได้ ยกตัวอย่างยูทิลิตีการจัดแนวข้อความที่ตอบสนองซึ่งเราผสมผสานการ@each
วนซ้ำสำหรับ$grid-breakpoints
แผนที่ Sass กับการสืบค้นสื่อ
หากคุณต้องการแก้ไข your $grid-breakpoints
การเปลี่ยนแปลงของคุณจะนำไปใช้กับลูปทั้งหมดที่วนซ้ำบนแผนที่นั้น
ตัวแปร CSS
Bootstrap 4 มีคุณสมบัติที่กำหนดเอง (ตัวแปร) ของ CSS ประมาณสองโหล ใน CSS ที่คอมไพล์แล้ว ค่าเหล่านี้ช่วยให้เข้าถึงค่าที่ใช้กันทั่วไปได้ง่าย เช่น สีของธีม จุดพัก และกองแบบอักษรหลักเมื่อทำงานใน Inspector ของเบราว์เซอร์ แซนด์บ็อกซ์โค้ด หรือการสร้างต้นแบบทั่วไป
ตัวแปรที่มีอยู่
นี่คือตัวแปรที่เรารวมไว้ (โปรดทราบว่า:root
จำเป็น) อยู่ใน_root.scss
ไฟล์ ของเรา
ตัวอย่าง
ตัวแปร CSS มีความยืดหยุ่นคล้ายกับตัวแปรของ Sass แต่ไม่จำเป็นต้องคอมไพล์ก่อนส่งไปยังเบราว์เซอร์ ตัวอย่างเช่น เรากำลังรีเซ็ตรูปแบบแบบอักษรและลิงก์ของหน้าเว็บด้วยตัวแปร CSS
ตัวแปรเบรกพอยต์
แม้ว่าในตอนแรกเราจะรวมเบรกพอยต์ไว้ในตัวแปร CSS ของเรา (เช่น--breakpoint-md
) สิ่งเหล่านี้ไม่ได้รับการสนับสนุนในการสืบค้นสื่อแต่ยังคงสามารถใช้ภายในชุดกฎในการสืบค้นสื่อ ตัวแปรเบรกพอยต์เหล่านี้ยังคงอยู่ใน CSS ที่คอมไพล์แล้วสำหรับความเข้ากันได้แบบย้อนหลัง เนื่องจาก JavaScript สามารถใช้งานได้ เรียนรู้เพิ่มเติมในข้อมูลจำเพาะ
ต่อไปนี้คือตัวอย่างที่ไม่รองรับ:
และนี่คือตัวอย่างที่รองรับ: