Bootstrap จาก Twitter เป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น
ประเด็นสำคัญสำหรับการเรียนรู้:
1. อุปกรณ์พกพาเป็นที่ต้องการ
2. คอนเทนเนอร์เลย์เอาต์
3. ระบบกริด
ในบทเรียนนี้เราจะเรียนรู้เกี่ยวกับระบบกริดของ Bootstrap เป็นหลักและให้ระบบกริดสตรีมมิ่งมือถือที่ตอบสนองได้ดีขึ้น
หนึ่ง. อุปกรณ์พกพาเป็นที่ต้องการ
ในโครงการ HTML5 เราทำโครงการมือถือ มันมีเมตาที่สำคัญมากสำหรับการตั้งค่าหน้าจอและอุปกรณ์ความกว้างสี่เหลี่ยมและว่าจะเรียกใช้การปรับสเกลของผู้ใช้และการปรับขนาด
// ความกว้างของหน้าจอสอดคล้องกับอุปกรณ์การปรับขนาดเริ่มต้นได้ค่าสูงสุดที่ปรับขนาดได้สูงสุดและการห้ามการปรับขนาดของผู้ใช้
สอง. คอนเทนเนอร์เค้าโครง
Bootstrap ต้องใช้คอนเทนเนอร์. container สำหรับเนื้อหาหน้าและระบบแรสเตอร์ เนื่องจากคุณลักษณะต่าง ๆ เช่นการขยายจึงไม่สามารถซ้อนกันได้ทั้งสองคลาสคอนเทนเนอร์
// แก้ไขความกว้าง <div> ... </div> // ความกว้าง 100% <div> ... </div>
ในระบบแรสเตอร์เบราว์เซอร์จะจัดสรรคอลัมน์ได้สูงสุด 12 คอลัมน์โดยอัตโนมัติเมื่อขนาดหน้าจอเพิ่มขึ้นหรือลดลง สร้างเค้าโครงหน้าโดยรวมชุดของแถวและคอลัมน์ หลักการทำงานมีดังนี้:
1. "แถว" จะต้องรวมอยู่ใน. container (ความกว้างคงที่) หรือ. container-fluid (ความกว้าง 100%) เพื่อให้การจัดตำแหน่งและการขยายที่เหมาะสม
2. สร้างชุดของ "คอลัมน์" ในแนวนอนผ่าน "แถว"
3. เนื้อหาของคุณควรอยู่ใน "คอลัมน์" และเท่านั้นคอลัมน์ "คอลัมน์" เท่านั้นที่สามารถใช้เป็นองค์ประกอบของลูกโดยตรงของแถว
4. คลาสที่กำหนดไว้ล่วงหน้าเช่น. Row และ .Col-XS-4 สามารถใช้เพื่อสร้างเค้าโครงแรสเตอร์ได้อย่างรวดเร็ว
MixIn ที่กำหนดไว้ในซอร์สโค้ด bootstrap ยังสามารถใช้เพื่อสร้างเค้าโครงความหมาย
5. สร้างรางน้ำระหว่างคอลัมน์โดยการตั้งค่าคุณสมบัติ padding สำหรับ "คอลัมน์" โดยการตั้งค่าค่าลบสำหรับองค์ประกอบ. ROW
ระยะขอบจึงชดเชยการตั้งช่องเสียบสำหรับองค์ประกอบ. container ซึ่งชดเชยช่องว่างสำหรับ "คอลัมน์" ที่มีอยู่ใน "แถว" ทางอ้อม
6. ระยะขอบลบเป็นเหตุผลว่าทำไมตัวอย่างต่อไปนี้เน้นออกไปด้านนอก เนื้อหาในคอลัมน์แรสเตอร์ถูกจัดเรียงเป็นแถว
7. คอลัมน์ในระบบแรสเตอร์แสดงช่วงที่ครอบคลุมโดยการระบุค่าจาก 1 ถึง 12 ตัวอย่างเช่นสามคอลัมน์ที่มีความกว้างเท่ากันสามารถสร้างได้โดยใช้. col-xs-4 สามคอลัมน์
8. ถ้า "คอลัมน์" ที่มีอยู่ใน "แถว" มากกว่า 12 องค์ประกอบที่คอลัมน์พิเศษ "คอลัมน์" จะถูกจัดเรียงในแถวอื่นโดยรวม
9. คลาสกริดเหมาะสำหรับอุปกรณ์ที่มีความกว้างของหน้าจอมากกว่าหรือเท่ากับขนาดของจุดหารและครอบคลุมคลาสกริดสำหรับอุปกรณ์หน้าจอขนาดเล็ก ดังนั้นการใช้. col-md-* คลาสแรสเตอร์บนองค์ประกอบจึงเหมาะสำหรับอุปกรณ์ที่มีความกว้างของหน้าจอมากกว่าหรือเท่ากับขนาดของจุดหารและเขียนทับคลาสแรสเตอร์สำหรับอุปกรณ์หน้าจอขนาดเล็ก ดังนั้นการใช้. col-lg-* ใด ๆ กับองค์ประกอบไม่มีอยู่ซึ่งส่งผลกระทบต่ออุปกรณ์หน้าจอขนาดใหญ่
// สร้างแถวตอบกลับ <div> <div> ... </div> </div> // สร้างแถวตอบกลับด้วยคอลัมน์สูงสุด 12 คอลัมน์ <div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> <div> 5 </div> </div> 6 </div> </div> 7 </div> </div> </div> </div> CSS.A {ความสูง: 100px; พื้นหลังสี: #EEE; เส้นขอบ: 1PX SOLID #CCC;} // จำนวนคอลัมน์ทั้งหมดคือ 12 และแต่ละคอลัมน์ได้รับการกำหนดหลายคอลัมน์ <div> <div> <div> 1-4 </div> <div> 5-8 </div> <div> 9-12 </div> </div> <div> <div> 1-8 </div> <div> 9-12 </div> </div> </div> 9-12 </div>ตารางพารามิเตอร์แรสเตอร์
ดังที่แสดงในรูปด้านบนชั้นด้านนอกสุดของระบบกริดแยกความแตกต่างสี่ความกว้างของเบราว์เซอร์: หน้าจอพิเศษขนาดเล็ก (<768px) หน้าจอขนาดเล็ก (> = 768px) หน้าจอขนาดกลาง (> = 992px) และหน้าจอขนาดใหญ่ (> = 1200px) ความกว้างการปรับตัวของคอนเทนเนอร์. container ภายในคือ: อัตโนมัติ, 750px, 970px และ 1170px อัตโนมัติหมายความว่าหากคุณอยู่บนหน้าจอโทรศัพท์มือถือคุณจะแสดงหนึ่งบรรทัดโดยเฉพาะ
// เปิดใช้งานทั้งสี่หน้าจอ หมวดหมู่ <div> <div> <div> 4 </div> <div> 4 </div> <div> 4 </div> <div> 4 </div> </div> 4 </div> </div> 4 </div> </div> 4 </div> </div> </div> </div> // บางครั้งเราสามารถตั้งค่าคอลัมน์ออฟเซ็ตเพื่อให้ช่องว่างอยู่ตรงกลาง <div> <div> <div> 8 </div> <div> 3 </div> </div> </div> // มันสามารถซ้อนกันได้ สามารถสลับสองคอลัมน์กดไปทางซ้ายและดึงไปทางขวา <div> <div> <div> 9 </div> <div> 3 </div> </div> </div>
ข้อมูลข้างต้นเป็นข้อมูลที่เกี่ยวข้องสำหรับระบบ Bootstrap Grid ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!