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