Bootstrap สร้างขึ้นบนกริด 12 คอลัมน์ที่ตอบสนอง เรายังได้รวมเลย์เอาต์ความกว้างคงที่และแบบไหลตามระบบนั้นด้วย
ระบบกริดเริ่มต้นที่ให้ไว้เป็นส่วนหนึ่งของ Bootstrap คือ กริด 12 คอลัมน์ กว้าง940px
นอกจากนี้ยังมีรูปแบบที่ตอบสนองได้สี่รูปแบบสำหรับอุปกรณ์และความละเอียดต่างๆ: โทรศัพท์ ภาพบุคคลแท็บเล็ต แนวนอนตารางและเดสก์ท็อปขนาดเล็ก และเดสก์ท็อปแบบจอกว้างขนาดใหญ่
- < คลาสdiv = "แถว" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
ดังที่แสดงไว้ที่นี่ เค้าโครงพื้นฐานสามารถสร้างขึ้นได้ด้วย "คอลัมน์" สองคอลัมน์ โดยแต่ละคอลัมน์ครอบคลุมจำนวนคอลัมน์พื้นฐาน 12 คอลัมน์ที่เรากำหนดให้เป็นส่วนหนึ่งของระบบกริดของเรา
- < คลาสdiv = "แถว" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset4" > ... </div>
- </div>
ด้วยระบบกริดแบบคงที่ (ที่ไม่ใช่ของไหล) ใน Bootstrap การซ้อนทำได้ง่าย ในการซ้อนเนื้อหาของคุณ เพียงเพิ่มคอลัมน์ใหม่.row
และชุดของ.span*
คอลัมน์ภายในคอลัมน์ที่มี.span*
อยู่
- < คลาสdiv = "แถว" >
- < คลาสdiv = "span12" >
- ระดับ 1 ของคอลัมน์
- < คลาสdiv = "แถว" >
- <div class = "span6" > ระดับ 2 </div>
- <div class = "span6" > ระดับ 2 </div>
- </div>
- </div>
- </div>
ตัวแปร | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|
@gridColumns |
12 | จำนวนคอลัมน์ |
@gridColumnWidth |
60px | ความกว้างของแต่ละคอลัมน์ |
@gridGutterWidth |
20px | ช่องว่างเชิงลบระหว่างคอลัมน์ |
@siteWidth |
ผลรวมที่คำนวณของคอลัมน์และรางน้ำทั้งหมด | นับจำนวนเสาและรางน้ำเพื่อกำหนดความกว้างของ.container-fixed() มิกซ์อิน |
สร้างขึ้นใน Bootstrap เป็นตัวแปรจำนวนหนึ่งสำหรับปรับแต่งระบบกริดเริ่มต้น 940px ที่บันทึกไว้ด้านบน ตัวแปรทั้งหมดสำหรับกริดถูกเก็บไว้ใน variable.less
การปรับเปลี่ยนกริดหมายถึงการเปลี่ยน@grid*
ตัวแปรสามตัวและการคอมไพล์ Bootstrap เปลี่ยนตัวแปรกริดใน variables.less และใช้หนึ่งในสี่วิธีที่จัดทำเป็นเอกสารเพื่อคอมไพล์ใหม่ หากคุณกำลังเพิ่มคอลัมน์เพิ่มเติม อย่าลืมเพิ่ม CSS สำหรับคอลัมน์ใน grid.less
การปรับแต่งกริดจะทำงานที่ระดับเริ่มต้นเท่านั้น นั่นคือกริด 940px เพื่อรักษาลักษณะการตอบสนองของ Bootstrap คุณจะต้องปรับแต่งกริดในแบบตอบสนอง.less
เลย์เอาต์กึ่งกลางกว้าง 940px ที่เป็นค่าเริ่มต้นและเรียบง่ายสำหรับเว็บไซต์หรือหน้าเว็บใดๆ ที่จัดทำโดยไฟล์<div class="container">
.
- <body>
- < คลาสdiv = "คอนเทนเนอร์" >
- ...
- </div>
- </body>
<div class="container-fluid">
ให้โครงสร้างหน้าที่ยืดหยุ่น ความกว้างต่ำสุดและสูงสุด และแถบด้านข้างด้านซ้าย เหมาะอย่างยิ่งสำหรับแอปและเอกสาร
- <div class = "container-fluid" >
- <div class = "row-fluid" >
- < คลาสdiv = "span2" >
- <!--เนื้อหาแถบด้านข้าง-->
- </div>
- < คลาสdiv = "span10" >
- <!--เนื้อหาเนื้อหา-->
- </div>
- </div>
- </div>
Bootstrap รองรับการสืบค้นสื่อจำนวนหนึ่งเพื่อช่วยให้โครงการของคุณเหมาะสมยิ่งขึ้นบนอุปกรณ์และความละเอียดหน้าจอที่แตกต่างกัน นี่คือสิ่งที่รวมอยู่ด้วย:
ฉลาก | ความกว้างของเค้าโครง | ความกว้างของคอลัมน์ | ความกว้างของรางน้ำ |
---|---|---|---|
สมาร์ทโฟน | 480px และต่ำกว่า | คอลัมน์ของเหลวไม่มีความกว้างคงที่ | |
แท็บเล็ตแนวตั้ง | 480px ถึง 768px | คอลัมน์ของเหลวไม่มีความกว้างคงที่ | |
แท็บเล็ตแนวนอน | 768px ถึง 940px | 44px | 20px |
ค่าเริ่มต้น | 940px ขึ้นไป | 60px | 20px |
จอแสดงผลขนาดใหญ่ | 1210px ขึ้นไป | 70px | 30px |
คิวรี่สื่ออนุญาตให้ใช้ CSS ที่กำหนดเองตามเงื่อนไขหลายประการ เช่น อัตราส่วน ความกว้าง ประเภทการแสดงผล ฯลฯ—แต่มักจะเน้นไปรอบๆmin-width
และmax-width
Bootstrap ไม่ได้รวมการสืบค้นสื่อเหล่านี้โดยอัตโนมัติ แต่การทำความเข้าใจและการเพิ่มนั้นทำได้ง่ายมาก และต้องมีการตั้งค่าเพียงเล็กน้อย คุณมีตัวเลือกสองสามอย่างในการรวมคุณสมบัติตอบสนองของ Bootstrap:
ทำไมไม่เพียงแค่รวมมัน? พูดตามตรงไม่ใช่ทุกอย่างต้องตอบสนอง แทนที่จะสนับสนุนให้นักพัฒนานำคุณลักษณะนี้ออก เราคิดว่าควรเปิดใช้งานคุณลักษณะนี้ดีที่สุด
- // โทรศัพท์แนวนอนและลง
- @media ( ความกว้างสูงสุด: 480px ) { ... }
- // โทรศัพท์แนวนอนไปยังแท็บเล็ตแนวตั้ง
- @media ( ความกว้างสูงสุด: 768px ) { ... }
- // แท็บเล็ตแนวตั้งเป็นแนวนอนและเดสก์ท็อป
- @media ( ความกว้างต่ำสุด: 768px ) และ( ความกว้างสูงสุด: 940px ) { ... }
- // เดสก์ท็อปขนาดใหญ่
- @media ( ต่ำ สุด - กว้าง: 1200px ) { .. }