บทความนี้ส่วนใหญ่จะแนะนำระบบกริดของ Bootstrap
การใช้งานระบบกริดคือการกำหนดขนาดคอนเทนเนอร์แบ่ง 12 ส่วน (หรือ 24 ส่วนหรือ 32 ส่วน แต่ 12 ส่วนเป็นเรื่องธรรมดาที่สุด) จากนั้นปรับระยะขอบด้านในและด้านนอกและในที่สุดก็รวมการสืบค้นสื่อเพื่อสร้างระบบกริดที่ตอบสนองได้
ระบบกริดใน bootstrap คือการแบ่งภาชนะออกเป็น 12 ส่วน
ระบบกริดของ Bootstrap ใช้สำหรับเค้าโครงซึ่งเป็นการรวมกันของคอลัมน์ มีสี่ประเพณีพื้นฐาน:
1. การรวมคอลัมน์
เปลี่ยนหมายเลขเพื่อผสานคอลัมน์ (หลักการ: ผลรวมของคอลัมน์ไม่เกิน 12) ตัวอย่างเช่น:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> การใช้งานพื้นฐานของการรวมคอลัมน์ </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1.1. สไตล์-> <style> [คลาส *= col-] {พื้นหลังสี: #eee; ชายแดน: 1px Solid #CCC; } </style> </head> <body> <br> <div> <div> <!-ระบบกริดใน bootstrap แบ่งคอนเทนเนอร์ออกเป็น 12 ชิ้น-> <!-บรรทัดนี้แยกออกจากกันอย่างเท่าเทียมกันโดย 1: 1: 1-> <div> .col-MD-4 </div> <div> .COL-MD-4 </div> </div> <div> <!-บรรทัดนี้แยกออกจากกันอย่างเท่าเทียมกันโดย 1: 2: 1-> <div> .COL-MD-3 </div> <div>การเรนเดอร์มีดังนี้:
2. คอลัมน์ชดเชย
เพิ่มชื่อคลาส "COL-MD-OFFSET-*" ในองค์ประกอบคอลัมน์ (โดยที่เครื่องหมายดอกจันแสดงจำนวนการรวมคอลัมน์ที่จะชดเชย) และคอลัมน์ที่มีชื่อคลาสนี้จะถูกชดเชยทางด้านขวา
<div> <!-ระยะห่างของสี่คอลัมน์เคลื่อนที่ไปทางขวา-> <div> <div> .COL-MD-4 </div> <div> ระยะห่างของสี่คอลัมน์เคลื่อนที่ไปทางขวา </div> <div> -> <div> <div> <div> .COL-MD-4 </div> <div> ระยะห่างของสี่คอลัมน์ที่ย้ายไปทางขวา </div> <div> .COL-MD-3 </div> </div> <div> <div> <div> col-md-4 </div> </div> </div>
การเรนเดอร์มีดังนี้:
3. การเรียงลำดับคอลัมน์
การเรียงลำดับคอลัมน์คือการเปลี่ยนทิศทางของคอลัมน์เปลี่ยนซ้ายและขวาลอยตัวและตั้งค่าระยะทางลอยตัว Bootstrap ทำได้โดยการเพิ่มชื่อคลาส "COL-MD-PUSH-" และ "COL-MD-PULL-" (โดยที่เครื่องหมายดอกจันแสดงจำนวนการรวมคอลัมน์ที่เคลื่อนไหว)
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> การใช้งานพื้นฐาน </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.1/csstboots [class *= col-] {พื้นหลังสี: #eee; ชายแดน: 1px Solid #CCC; } </style> </head> <body> <div> <div> <div> .col-MD-3 </div> <div> .col-MD-6 </div> </div> </div> </body> </html>4. การทำรังของคอลัมน์
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> การใช้งานพื้นฐาน </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1.1/csstboots [class *= col-] {พื้นหลังสี: #eee; ชายแดน: 1px Solid #CCC; } [class *= col-] [class *= col-] {พื้นหลังสี: #f36; เส้นขอบ: 1px ประ #FFFF; สี: #FFFF; } </style> </head> <body> <div> <div> <div> <div> ฉันมีกริดซ้อนอยู่ในนั้น <div> <div> <div> COL-MD-6 </div> <div> COL-MD-6 </div> </div> </div> </div>การเรนเดอร์มีดังนี้:
หากคุณยังต้องการเรียนรู้อย่างลึก
ชุดของบทความ:
ครั้งแรกที่ฉันได้ติดต่อกับ Magical Bootstrap Basic Layout //www.vevb.com/article/89278.htm
ครั้งแรกที่ฉันติดต่อกับ Magical Bootstrap Form //www.vevb.com/article/89330.htm
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น