1. ไฟล์ซอร์สโค้ด
_grid.scss: ไฟล์คลาสระบบกริด
Mixins/_grid.scss: สนับสนุนคอลเลกชัน Mixin ที่ใช้โดยระบบกริด
mixins/_grid-framework.scss: core mixin ที่ใช้โดยระบบกริด
2. ฟังก์ชั่นที่รองรับ
1. ตระหนักถึงเค้าโครงเป็นเปอร์เซ็นต์
2. ตระหนักถึงตำแหน่งของกริด
3. ใช้การทำรังของกริด
4. หากคุณใช้ระบบกริดเท่านั้นคุณสามารถเข้ารหัสไฟล์ bootstrap-grid.scss ได้เฉพาะ
หลักการดำเนินการ
1. เลย์เอาต์ตามเปอร์เซ็นต์ ปัญหาหลักคือวิธีการกระจายความกว้างอย่างเท่าเทียมกันในอุปกรณ์ต่าง ๆ Bootstrap ใช้เปอร์เซ็นต์ง่าย ๆ และใช้เปอร์เซ็นต์เท่ากันภายใต้อุปกรณ์ขนาดใดก็ได้
2. การวางตำแหน่งของกริด: แก้ไขความสามารถของกริดในการเคลื่อนที่ไปทางซ้ายขวาและเลื่อนเซลล์หลายเซลล์ไปทางขวาด้วยกริด
3. การทำรังของกริด: ใช้ระบบเลย์เอาต์กริดหลังจากปริมาณกริดทำรัง
4. การวิเคราะห์รหัสที่มา
1. _grid.scss: คลาสหลักที่สร้างโดยระบบกริดอ้างอิงถึงตัวแปรและวิธีการที่เกี่ยวข้องใน MixIns/_grid.scss, Mixins/_grid-framework.scss, ตัวแปร
ครั้งแรก: กำหนดคลาสคอนเทนเนอร์สองคลาส
A) คอนเทนเนอร์: คอนเทนเนอร์กริดซึ่งกำหนดความกว้างที่แตกต่างกันตามอุปกรณ์ที่แตกต่างกันและจะไม่เติมเต็มหน้าจอเต็ม
b) Continaer-Fluid: Container Lattice, เต็มหน้าจอพร้อมการสนับสนุนใด ๆ
ทั้งคอนเทนเนอร์และคอนเทนเนอร์-ฟลูอิดใช้ make-container (mixins/_grid.scss) Make-container ใช้การควบคุมเช่นศูนย์กลาง, ระยะขอบซ้ายและขวา, การล้างลอย, ฯลฯ ; คอนเทนเนอร์กำหนดความกว้างของคอนเทนเนอร์ตามอุปกรณ์ที่แตกต่างกัน
จากนั้น: กำหนดแถว (แถว):
Make-row (mixins/_grids.scss) ถูกเรียกเพื่อให้ได้คำจำกัดความของการล้างระยะห่างและซ้ายและขวา ใน 4.0 หากเปิดใช้งานการรองรับเค้าโครงแบบยืดหยุ่นการแสดงผลของภาชนะจะถูกตั้งค่าเป็น Flex และ Flex-wrap เป็น wrap และ Floating Clear
ถัดไป: โทร Make-grid-columns โดยตรง (MixIns/_grid-framework.scss) เพื่อให้ได้การจัดตั้งเซลล์
a) Make-grid-columns: วิธีการเข้าสำหรับการสร้างเซลล์ผ่านจำนวนกริดทั้งหมดความกว้างของระยะขอบและขนาดที่รองรับหลายขนาด
b) Make-grid-columns อ้างอิงวิธีการหลายอย่างใน Mixins/_grid.scss:
A) ใช้ฟังก์ชั่นแผนที่คีย์เพื่อสำรวจคีย์คีย์แผนที่
ใช้ฟังก์ชัน @extend ใช้สำหรับการสืบทอดการใช้การลอยซ้ายของ Cols ทั้งหมดและการวางตำแหน่งสัมพัทธ์ของ Cols ทั้งหมด
@for $ i จาก 1 ถึง $ columns {.col-#{$ breakpoint}-#{$ i} {@extend %grid-column; // ขยายเป็นมรดกรวมสิ่งนี้เข้ากับคอลเลกชันสไตล์ //. COL-XS-1, COL-XS-2 {ตำแหน่ง: ญาติ; -a) ฟังก์ชั่น make-col-span เพื่อใช้การคำนวณความกว้างของ col
b) เรียกใช้วิธี make-col-modifier ใน mixins/_grid.scss เพื่อตระหนักถึงการสร้างรูปแบบการกดดึงและชดเชย:
ฉัน. กด: ดันกริดสองสามตัวไปทางขวาโดยใช้ซ้าย
ii. PULL: ดันกริดสองสามตัวไปทางซ้ายโดยใช้ขวา
iii. ออฟเซ็ต: ใช้การใช้งานด้านซ้ายระยะขอบผลักไปทางขวาไปยังเปอร์เซ็นต์
@mixin make-col-offset ($ size, $ columns: $ grid-columns) {margin-left: เปอร์เซ็นต์ ($ size / $ columns);}@mixin makein make-col-push ($ size, $ columns: $ grid-columns) {left: if ($ size> 0, เปอร์เซ็นต์ $ grid-columns) {ขวา: ถ้า ($ size> 0, เปอร์เซ็นต์ ($ size / $ columns), auto);}@mixin make-col-pull ($ size, $ columns: $ grid-columns) {ขวา: ถ้า ($ size> 0, เปอร์เซ็นต์ Dynamic Mixin @include support @if $ type == push {@include make-col-push ($ size, $ columns); } @else ถ้า $ type == pull {@include make-col-pull ($ size, $ columns); } @else ถ้า $ type == ออฟเซ็ต {@include make-col-offset ($ size, $ columns); -ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript