ระบบกริดในเฟรมเวิร์ก Bootstrap แบ่งภาชนะออกเป็น 12 ชิ้น เมื่อใช้งานคุณสามารถคอมไพล์ซอร์สโค้ดที่น้อยกว่า/SASS ตามสถานการณ์จริงเพื่อปรับเปลี่ยนค่า 12. ระบบตาข่ายทำงานอย่างไรในเฟรมเวิร์ก Bootstrap:
1. ต้องรวมแถวข้อมูล (.rows) ไว้ในคอนเทนเนอร์เพื่อให้สามารถให้การจัดตำแหน่งและการขยายที่เหมาะสม
<div> <div> </div> </div>
2. คุณสามารถเพิ่มคอลัมน์ (.Column) ในแถว (.ROW) แต่ผลรวมของคอลัมน์ต้องไม่เกินจำนวนคอลัมน์ทั้งหมดที่แบ่งออกเป็นสองส่วน (เช่น: 12)
<div> <div> <div> </div> <div> </div> </div>
3. เนื้อหาเฉพาะควรวางไว้ในคอนเทนเนอร์คอลัมน์ (.Column) และเฉพาะคอลัมน์ (.Column) เท่านั้นที่สามารถใช้เป็นองค์ประกอบของเด็กโดยตรงของคอนเทนเนอร์แถว (.Row)
4. สร้างระยะห่างระหว่างคอลัมน์โดยการตั้งค่าระยะทางด้านใน (ช่องว่างภายใน) จากนั้นชดเชยอิทธิพลของการขยายโดยการตั้งค่าลบสำหรับคอลัมน์แรกและสแต็กสุดท้าย
มีเอฟเฟกต์ตอบสนองในระบบ Bootstrap Grid ซึ่งมีเบราว์เซอร์สี่ประเภท (หน้าจอขนาดเล็กพิเศษหน้าจอขนาดเล็กหน้าจอขนาดกลางและหน้าจอขนาดใหญ่) และจุดพักของมันคือ 768px, 992px, 1220px
คอนเทนเนอร์ (.Container) สำหรับความละเอียดของเบราว์เซอร์ที่แตกต่างกันมีความกว้างที่แตกต่างกัน: อัตโนมัติ, 760px, 970px, 1170px;
.Container {padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; @media (min-width: 768px) {.container {width: 750px;}@media (Min-Width: 1200px) {.Container {width: 1170px;}คอนเทนเนอร์แถว (.Row) แบ่งแถวของคอนเทนเนอร์ออกเป็น 12 ส่วนเท่ากันนั่นคือคอลัมน์ แต่ละคอลัมน์มีช่องว่างด้านซ้าย: 15px และ padding-right: 15px; นอกจากนี้ยังทำให้เกิดการเลื่อนซ้ายในคอลัมน์แรกและการขยายด้านขวาในคอลัมน์สุดท้ายเพื่อครอบครอง 30px ของความกว้างปานกลาง
.COL-XS-1, .COL-MD-1, .COL-LG-1, .COL-XS-2, .COL-MD-2, .COL-MD-2, .COL-LG-2, .COL-XS-3, .COL-SM-3, .COL-MD-3, .COL-MD-3, .COL-MD-3 .COL-MD-4, .COL-LG-4, .COL-XS-5, .COL-MD-5, .COL-MD-5, .COL-LG-5, .COL-XS-6, .COL-MD-6, .COL-LG-6, .COL-MD-6, .COL-XS-8, .COL-MD-8, .COL-MD-8, .COL-LG-8, .COL-XS-9, .COL-SM-9, .COL-MD-9, .COL-MD-9, .COL-LG-9, .COL-XS-10, .COL-MD-10 .COL-XS-11, .COL-MD-11, .COL-MD-11, .COL-MD-11, .COL-LG-11, .COL-XS-11, .COL-MD-12, .COL-MD-11, .COL-LG-12 {ตำแหน่ง: ญาติ;คอนเทนเนอร์แถว (.Row) กำหนดค่าขอบซ้ายและระยะขอบขวาของ -15px ซึ่งใช้เพื่อชดเชยระยะทางด้านในซ้ายของคอลัมน์แรกและระยะทางด้านขวาของคอลัมน์สุดท้ายเพื่อให้ไม่มีระยะห่างระหว่างคอลัมน์แรกและคอลัมน์สุดท้ายและคอนเทนเนอร์
.Row {margin -right: -15px; margin -left: -15px;}การใช้งานขั้นพื้นฐาน
เนื่องจากเฟรมเวิร์ก Bootstrap ใช้รูปแบบกริดที่แตกต่างกันสำหรับขนาดหน้าจอที่แตกต่างกันลองใช้ตัวอย่างหน้าจอกลาง (970px) เป็นตัวอย่าง
1. การรวมคอลัมน์
การรวมกันของคอลัมน์คือการเปลี่ยนหมายเลขเพื่อผสานคอลัมน์ (จำนวนคอลัมน์ทั้งหมดต้องไม่เกิน 12) ซึ่งค่อนข้างคล้ายกับแอตทริบิวต์ Colspan ของตาราง วิธีการรวมคอลัมน์เกี่ยวข้องกับคุณสมบัติสองประการเท่านั้น: ลอยอยู่ในเปอร์เซ็นต์ความกว้าง
<div> <div> <div> col-MD-4 </div> <div> col-md-8 </div> </div> <div> <div> col-MD-4 </div> <div> Col-MD-4 </div> <div> Col-MD-4 </di V> COL-MD-4 </div> </div> <div> <div> Col-Md-4 </div> </div> <div> <div> Col-MD-3 </div> <div> Col-MD-6 </div> <div> Col-MD-3 </div> </div>
ผลกระทบมีดังนี้:
ตรวจสอบให้แน่ใจว่าคอลัมน์ทั้งหมดลอยไปทางซ้าย
.COL-MD-1, .COL-MD-2, .COL-MD-3, .COL-MD-4, .COL-MD-5, .COL-MD-6, .COL-MD-7, .COL-MD-8, .COL-MD-9, .COL-MD-10, .COL-MD-11
กำหนดความกว้างของแต่ละคอลัมน์รวมกัน
.COL-MD-12 {WIDTH: 100%;}. COL-MD-11 {WIDTH: 91.6666666667%;}. COL-MD-10 {WIDTH: 83.33333333333333%;}. COL-MD-9 {WIDTH: 75%; 66.66666667%;}. COL-MD-7 {WIDTH: 58.33333333333%;}. COL-MD-6 {ความกว้าง: 50%;}. COL-MD-5 {WIDTH: 41.666666667%; {width: 25%;}. col-md-2 {width: 16.666666667%;}. col-md-1 {width: 8.3333333333333%;}คอลัมน์ชดเชย
บางครั้งเราไม่ต้องการให้คอลัมน์ที่อยู่ติดกันสองคอลัมน์อยู่ใกล้กัน แต่เราไม่ต้องการใช้มาร์จิ้นหรือวิธีการทางเทคนิคอื่น ๆ สามารถทำได้โดยใช้คอลัมน์ชดเชย การใช้คอลัมน์ออฟเซ็ตเพียงเพิ่มชื่อคลาส col-md-offset-* บนองค์ประกอบคอลัมน์ (เครื่องหมายดอกจันแสดงจำนวนการรวมคอลัมน์ที่จะชดเชย) คอลัมน์ที่มีชื่อคลาสนี้จะถูกชดเชยเช่น: เพิ่ม. col-MD-OFFSET-4 บนองค์ประกอบคอลัมน์แสดงว่าคอลัมน์ถูกชดเชยไปทางขวาโดย 4 คอลัมน์ในความกว้าง
<div> <div> <div> 1111 </div> <div> 1111 </div> <div> 333 </div> </div> <div> <div> คอลัมน์ออฟเซ็ต </div> <div> Col-MD-2 </div> <div> Col-MD-2 </div>
ผลกระทบมีดังนี้:
หลักการดำเนินการ:
ด้วยการใช้ขอบด้านซ้ายแบบหนึ่ง-สองส่วนขอบซ้ายมากเท่าที่มีออฟเซ็ตคุณจะได้รับส่วนขอบซ้ายมากเท่าที่มี
.COL-MD-OFFSET-12 {MARGIN-Left: 100%;}. COL-MD-OFFSET-11 {MARGIN-Left: 91.666666667%;}. COL-MD-OFTSET-10 {MARGIN-OLFT: 83.3333333333%; {margin-left: 66.666666667%;}. col-md-offset-7 {margin-left: 58.3333333333%;}. col-md-offset-6 {margin-left: 50%; {margin-left: 33.333333333333%;}. col-md-offset-3 {margin-left: 25%;}. col-md-offset-2 {margin-left: 16.66666667%;}. col-md-offset-1 0;}ควรสังเกตว่าเมื่อใช้ Col-MD-Offset-* เพื่อชดเชยขวาคอลัมน์จำเป็นต้องตรวจสอบให้แน่ใจว่าจำนวนคอลัมน์ทั้งหมดและคอลัมน์ออฟเซ็ตไม่เกิน 12 มิฉะนั้นจะทำให้คอลัมน์ถูกแสดงนอกแถว
การจัดเรียงคอลัมน์
การเรียงลำดับคอลัมน์คือการเปลี่ยนทิศทางของคอลัมน์และตั้งค่าระยะทางลอยตัว ในระบบ Bootstrap Grid มันคือการเพิ่มชื่อคลาส col-md-push-* และ col-md-pull-*
<div> <div> <div> col-MD-4 </div> <div> col-md-8 </div> </div> </div>
ผลกระทบมีดังนี้:
COL-MD-4 อยู่ทางซ้ายและ COL-MD-8 อยู่ทางขวา หากคุณต้องการสลับตำแหน่งคุณจะต้องย้าย COL-MD-4 ไปทางขวาโดย 8 คอลัมน์นั่นคือเพิ่มชื่อคลาส col-md-push-8; ในเวลาเดียวกันคุณต้องย้าย COL-MD-8 ไปทางซ้ายโดย 4 คอลัมน์นั่นคือเพิ่มชื่อคลาส COL-MD-PULL-4
Bootstrap บรรลุเอฟเฟกต์การวางตำแหน่งโดยการตั้งค่าซ้ายและขวาเท่านั้น
.COL-MD-PULL-12 {ขวา: 100%;}. COL-MD-PULL-11 {ขวา: 91.666666667%;}. COL-MD-PULL-10 {ขวา: 83.333333333333%}. COL-MD-PULL-9 {ขวา: 75% 66.666666667%;}. col-md-pull-7 {ขวา: 58.33333333333%;}. col-md-pull-6 {ขวา: 50%;}. col-md-pull-5 {ขวา: 41.666666667%; 33.3333333333%;}. col-md-pull-3 {ขวา: 25%;}. col-md-pull-2 {ขวา: 16.6666666667%;}. col-md-pull-1 {ขวา: 8.3333333333%; 100%;}. col-md-push-11 {ซ้าย: 91.666666667%;}. col-md-push-10 {ซ้าย: 83.333333333333%;}. col-md-push-9 {ซ้าย: 75%; 58.33333333333%;}. col-md-push-6 {ซ้าย: 50%;}. col-md-push-5 {ซ้าย: 41.666666667%;}. col-md-push-4 {ซ้าย: 33.333333333%; 16.6666666667%;}. col-md-push-1 {ซ้าย: 8.33333333333%;}. col-md-push-0 {ซ้าย: 0;}การทำรัง
การทำรังคอลัมน์สามารถเพิ่มหนึ่งหรือทำคอนเทนเนอร์แถวในคอลัมน์จากนั้นแทรกคอลัมน์ในคอนเทนเนอร์แถวนี้ เมื่อความกว้างของคอนเทนเนอร์แถว (แถว) ในคอนเทนเนอร์คอลัมน์คือ 100%มันเป็นความกว้างของคอลัมน์ภายนอกปัจจุบัน
<div> <div> <div>
ฉันซ้อนกริดอยู่ข้างใน
<div> <div> col-md-6 </div> <div> col-md-6 </div> </div> </div> <div> COL-MD-4 </div> </div> </div> <div> Col-MD-4 </div> </div>
ฉันซ้อนกริดอยู่ข้างใน
<div> <div> col-MD-4 </div> <div> col-md-4 </div> <div> col-md-4 </div> </div> </div> </div> </div>
เนื้อหาข้างต้นคือระบบ Bootstrap Grid ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!