การใช้งาน Bootstrap 5

Bootstrap 5 การใช้งาน Grid กับหน้าจอ Extra Large (XL)

สำหรับการกำหนดการแสดงผลเฉพาะสำหรับหน้าจอ Extra Large (XL) สามารถใช้คลาส .col-xl-* ซึ่ง * จะเป็นตัวเลขตั้งแต่ 1 ถึง 12 ที่บ่งบอกจำนวนพื้นที่ในกริดระบบ 12 คอลัมน์

แบ่งคอลัมน์ตามสัดส่วนในหน้าจอ XL

HTML
<div class="container">
  <div class="row">
    <div class="col-xl-4">คอลัมน์ 1 (4/12)</div>
    <div class="col-xl-8">คอลัมน์ 2 (8/12)</div>
  </div>
</div>

ในตัวอย่างนี้ เมื่อหน้าจอมีความกว้างตั้งแต่ 1200px ขึ้นไป คอลัมน์ที่ 1 จะมีความกว้าง 4 ส่วนจาก 12 ส่วน และคอลัมน์ที่ 2 จะมีความกว้าง 8 ส่วนจาก 12 ส่วน

การใช้งานออฟเซ็ต (Offset) ในหน้าจอ XL

HTML
<div class="container">
  <div class="row">
    <div class="col-xl-6 offset-xl-3">คอลัมน์กลางหน้าจอ (ขนาด 6/12 และเลื่อน 3/12)</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์จะถูกจัดให้อยู่กลางหน้าจอโดยใช้คลาส .offset-xl-3 ซึ่งทำให้คอลัมน์ถูกเลื่อนจากซ้ายไป 3 ส่วนจาก 12 ส่วน และคอลัมน์นั้นจะมีความกว้าง 6 ส่วน

การจัดเลย์เอาต์ด้วยคอลัมน์หลายขนาดสำหรับหน้าจอ XL

HTML
<div class="container">
  <div class="row">
    <div class="col-xl-3">คอลัมน์ 1 (ขนาด 3/12)</div>
    <div class="col-xl-6">คอลัมน์ 2 (ขนาด 6/12)</div>
    <div class="col-xl-3">คอลัมน์ 3 (ขนาด 3/12)</div>
  </div>
</div>

ตัวอย่างนี้จะแสดงคอลัมน์ที่ 1 และคอลัมน์ที่ 3 มีขนาด 3 ส่วนเท่าๆ กัน และคอลัมน์ที่ 2 มีขนาดใหญ่ที่สุดคือ 6 ส่วน เมื่อหน้าจอมีขนาด XL ขึ้นไป

การซ้อนคอลัมน์ในหน้าจอ XL

HTML
<div class="container">
  <div class="row">
    <div class="col-xl-6">คอลัมน์ซ้าย (6/12)</div>
    <div class="col-xl-6">
      <div class="row">
        <div class="col-xl-6">คอลัมน์ซ้อน 1 (3/12)</div>
        <div class="col-xl-6">คอลัมน์ซ้อน 2 (3/12)</div>
      </div>
    </div>
  </div>
</div>

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

การซ่อนคอลัมน์ในหน้าจอ XL

หากต้องการซ่อนคอลัมน์ในหน้าจอขนาด XL เราสามารถใช้คลาส d-none และกำหนดให้คอลัมน์ปรากฏเฉพาะในหน้าจอที่ไม่ใช่ XL

HTML
<div class="container">
  <div class="row">
    <div class="col-xl-6 d-none d-xl-block">คอลัมน์ที่ซ่อนในหน้าจอขนาดเล็กและกลาง</div>
    <div class="col-xl-6">คอลัมน์นี้แสดงในทุกขนาดหน้าจอ</div>
  </div>
</div>

ในตัวอย่างนี้ คอลัมน์แรกจะถูกซ่อนไว้ในหน้าจอที่มีขนาดเล็กกว่า XL และจะปรากฏเฉพาะในหน้าจอที่มีขนาด XL ขึ้นไป

ผลลัพธ์ในหน้าจอที่มีขนาดเล็กกว่า XL

ผลลัพธ์ในหน้าจอที่มีขนาด XL ขึ้นไป

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ