Bootstrap ตัวอย่างกริด: อุปกรณ์ขนาดกลาง
ในบทก่อนหน้านี้เรานำเสนอตัวอย่างเช่นตารางเรียนสำหรับอุปกรณ์ขนาดเล็ก เราใช้สอง divs (คอลัมน์) และเราให้พวกเขา 25%/75% แยก:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>แต่บนอุปกรณ์สื่อการออกแบบอาจจะดีกว่าเป็น 50%/50% แยก
เคล็ดลับ: ขนาดกลางอุปกรณ์จะมีการกำหนดว่ามีความกว้างหน้าจอจาก 992 พิกเซล 1199 พิกเซล
สำหรับอุปกรณ์ขนาดกลางเราจะใช้ .col-md-* เรียน
ตอนนี้เราจะเพิ่มความกว้างของคอลัมน์สำหรับอุปกรณ์ขนาดกลาง:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
ตอนนี้ Bootstrap จะไปพูด "ที่มีขนาดเล็กให้ดูที่ชั้นเรียนที่มี -sm- ในพวกเขาและใช้เหล่านั้น. ในขนาดกลางดูที่ชั้นเรียนที่มี -md- ในพวกเขาและใช้เหล่านั้น"
ตัวอย่างต่อไปนี้จะมีผลใน 25%/75% แยกบนอุปกรณ์ขนาดเล็กและ 50%/50% แยกบนกลาง (และใหญ่) อุปกรณ์ บนอุปกรณ์ขนาดเล็กเป็นพิเศษก็จะสแต็ค (100%):
ตัวอย่าง
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-3
col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> ลองตัวเอง» หมายเหตุ: ตรวจสอบให้แน่ใจว่าผลรวมเสมอเพิ่มขึ้นถึง 12
โดยใช้สื่อเท่านั้น
ในตัวอย่างด้านล่างเราจะระบุ .col-md-6 ระดับ (ไม่ .col-sm-* ) ซึ่งหมายความว่าอุปกรณ์กลางและขนาดใหญ่จะแบ่ง 50%/50% - เพราะชั้นขึ้นตาชั่ง อย่างไรก็ตามสำหรับอุปกรณ์ขนาดเล็กก็จะสแต็คในแนวตั้ง (กว้าง 100%):
ตัวอย่าง
<div
class="row">
<div class="col-md-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-md-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
ลองตัวเอง» บทต่อไปแสดงให้เห็นถึงวิธีการเพิ่มร้อยละแยกที่แตกต่างกันสำหรับอุปกรณ์ขนาดใหญ่