นั่งร้าน

Bootstrap สร้างขึ้นบนกริด 12 คอลัมน์ที่ตอบสนอง เรายังได้รวมเลย์เอาต์ความกว้างคงที่และแบบไหลตามระบบนั้นด้วย

ระบบกริดเริ่มต้นที่ให้ไว้เป็นส่วนหนึ่งของ Bootstrap คือ กริด 12 คอลัมน์ กว้าง940px

นอกจากนี้ยังมีรูปแบบที่ตอบสนองได้สี่รูปแบบสำหรับอุปกรณ์และความละเอียดต่างๆ: โทรศัพท์ ภาพบุคคลแท็บเล็ต แนวนอนตารางและเดสก์ท็อปขนาดเล็ก และเดสก์ท็อปแบบจอกว้างขนาดใหญ่

< คลาสdiv = "แถว" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

ดังที่แสดงไว้ที่นี่ เค้าโครงพื้นฐานสามารถสร้างขึ้นได้ด้วย "คอลัมน์" สองคอลัมน์ โดยแต่ละคอลัมน์ครอบคลุมจำนวนคอลัมน์พื้นฐาน 12 คอลัมน์ที่เรากำหนดให้เป็นส่วนหนึ่งของระบบกริดของเรา

คอลัมน์ออฟเซ็ต

4 ออฟเซ็ต 4

3 ออฟเซ็ต 3

8 ออฟเซ็ต 4

< คลาสdiv = "แถว" > 
  <div class = "span4" > ... </div> 
  <div class = "span4 offset4" > ... </div> 
</div>

เสาทำรัง

ด้วยระบบกริดแบบคงที่ (ที่ไม่ใช่ของไหล) ใน Bootstrap การซ้อนทำได้ง่าย ในการซ้อนเนื้อหาของคุณ เพียงเพิ่มคอลัมน์ใหม่.rowและชุดของ.span*คอลัมน์ภายในคอลัมน์ที่มี.span*อยู่

ตัวอย่าง

แถวที่ซ้อนกันควรมีชุดของคอลัมน์ที่รวมกันเป็นจำนวนคอลัมน์ของพาเรนต์ ตัวอย่างเช่น.span3ควรวางคอลัมน์ที่ซ้อนกันสองคอลัมน์ภายในไฟล์.span6.

ระดับ 1 ของคอลัมน์

ระดับ 2

< คลาสdiv = "แถว" > 
  < คลาสdiv = "span12" > 
    ระดับ 1 ของคอลัมน์
    < คลาสdiv = "แถว" > 
      <div class = "span6" > ระดับ 2 </div> 
      <div class = "span6" > ระดับ 2 </div> 
    </div>
  </div>
</div>

คอลัมน์ของเหลว

เปอร์เซ็นต์ ไม่ใช่พิกเซล

ระบบกริดของไหลใช้เปอร์เซ็นต์สำหรับความกว้างของคอลัมน์แทนพิกเซลคงที่ นอกจากนี้ยังมีรูปแบบการตอบสนองที่เหมือนกันกับระบบกริดแบบตายตัวของเรา ซึ่งรับประกันสัดส่วนที่เหมาะสมสำหรับความละเอียดและอุปกรณ์ของหน้าจอหลัก

แถวของเหลว

สร้างของเหลวแถวใดๆ ได้ง่ายๆ โดยเปลี่ยน.rowเป็น.row-fluid. คอลัมน์ยังคงเหมือนเดิม ทำให้ง่ายต่อการพลิกระหว่างเค้าโครงแบบคงที่และแบบไหล

มาร์กอัป

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

การทำรังของไหล

การทำรังด้วยกริดแบบไหลแตกต่างกันเล็กน้อย: จำนวนคอลัมน์ที่ซ้อนกันไม่จำเป็นต้องตรงกับพาเรนต์ แต่คอลัมน์ของคุณจะถูกรีเซ็ตในแต่ละระดับเพราะแต่ละแถวใช้พื้นที่ 100% ของคอลัมน์หลัก

ของเหลว 12

ของเหลว 6

<div class = "row-fluid" > 
  < คลาสdiv = "span12" > 
    ระดับ 1 ของคอลัมน์
    <div class = "row-fluid" > 
      <div class = "span6" > ระดับ 2 </div> 
      <div class = "span6" > ระดับ 2 </div> 
    </div>
  </div>
</div>

ตัวแปร	ค่าเริ่มต้น	คำอธิบาย
`@gridColumns`	12	จำนวนคอลัมน์
`@gridColumnWidth`	60px	ความกว้างของแต่ละคอลัมน์
`@gridGutterWidth`	20px	ช่องว่างเชิงลบระหว่างคอลัมน์
`@siteWidth`	ผลรวมที่คำนวณของคอลัมน์และรางน้ำทั้งหมด	นับจำนวนเสาและรางน้ำเพื่อกำหนดความกว้างของ`.container-fixed()`มิกซ์อิน

ตัวแปรใน LESS

สร้างขึ้นใน 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 ถึง 979px	42px	20px
ค่าเริ่มต้น	980px ขึ้นไป	60px	20px
จอแสดงผลขนาดใหญ่	1210px ขึ้นไป	70px	30px

ต้องใช้เมตาแท็ก

เพื่อให้แน่ใจว่าอุปกรณ์แสดงหน้าที่ตอบสนองอย่างเหมาะสม ให้ใส่เมตาแท็กของวิวพอร์ต

< ชื่อ เมตา = เนื้อหา"วิวพอร์ต" = "ความกว้าง=ความกว้างของอุปกรณ์ มาตราส่วนเริ่มต้น=1.0" >

พวกเขาทำอะไร

คิวรี่สื่ออนุญาตให้ใช้ CSS ที่กำหนดเองตามเงื่อนไขหลายประการ เช่น อัตราส่วน ความกว้าง ประเภทการแสดงผล ฯลฯ—แต่มักจะเน้นไปรอบๆmin-widthและmax-width

แก้ไขความกว้างของคอลัมน์ในตารางของเรา
กององค์ประกอบแทนการลอยทุกที่ที่จำเป็น
ปรับขนาดหัวเรื่องและข้อความให้เหมาะสมกับอุปกรณ์มากขึ้น

การใช้แบบสอบถามสื่อ

Bootstrap ไม่ได้รวมการสืบค้นสื่อเหล่านี้โดยอัตโนมัติ แต่การทำความเข้าใจและการเพิ่มนั้นทำได้ง่ายมาก และต้องมีการตั้งค่าเพียงเล็กน้อย คุณมีตัวเลือกสองสามอย่างในการรวมคุณสมบัติตอบสนองของ Bootstrap:

ใช้เวอร์ชันตอบสนองที่คอมไพล์แล้ว bootstrap-responsive.css
เพิ่ม @import "responsive.less" และคอมไพล์ Bootstrap . อีกครั้ง
แก้ไขและคอมไพล์ react.less ใหม่เป็นไฟล์แยกต่างหาก

ทำไมไม่เพียงแค่รวมมัน? พูดตามตรงไม่ใช่ทุกอย่างต้องตอบสนอง แทนที่จะสนับสนุนให้นักพัฒนานำคุณลักษณะนี้ออก เราคิดว่าควรเปิดใช้งานคุณลักษณะนี้ดีที่สุด

  // โทรศัพท์แนวนอนและลง
  @media ( ความกว้างสูงสุด: 480px ) { ... }     
 
  // โทรศัพท์แนวนอนไปยังแท็บเล็ตแนวตั้ง
  @media ( ความกว้างสูงสุด: 768px ) { ... }     
 
  // แท็บเล็ตแนวตั้งเป็นแนวนอนและเดสก์ท็อป
  @media ( ความกว้างต่ำสุด: 768px ) และ( ความกว้างสูงสุด: 980px ) { ... }        
 
  // เดสก์ท็อปขนาดใหญ่
  @media ( ต่ำ สุด - กว้าง: 1200px ) { .. }