Bootstrap 4 การใช้งาน Containers

Bootstrap 4 การใช้งาน Containers

ใน Bootstrap 4 เราต้องกำหนดเอลิเมนต์สำหรับเป็น Container ขึ้นมา 1 เอลิเมนต์ เพื่อบรรจุเอลิเมนต์ตัวอื่น ๆ ไว้ด้านใน และใน Bootstrap จะใช้ class เป็นตัวระบุว่าอิลิเมนต์นั้นเป็น Container แบบไหน โดยจะมีอยู่ 2 แบบ คือ

1. คลาส .container สำหรับกำหนดคอนเทนเนอร์แบบ fixed width container (ความกว้างไม่เต็มหน้าจอ มีขอบด้านข้างทั้งสองข้าง)
2. คลาส .container-fluid สำหรับกำหนดคอนเทนเนอร์แบบ full width container ความกว้างเต็มหน้าจอ

Fixed Container

เมื่อต้องการใช้งานคอนเทนเนอร์แบบ fixed-width container ให้ใช้คลาส .container ซึ่งความกว้างของคอนเทนเนอร์จะเปลี่ยนตามขนาดหน้าจอ ดังตาราง

ตัวอย่างการใช้คลาส .container

 <div class="container">
  <h1>ส่วนหัวเรื่อง</h1>
  <p>ส่วนย่อหน้า</p>
</div> 

Fluid Container

หากต้องการใช้งานคอนเทนเนอร์ที่มีความกว้างเต็มหน้าจอ ให้ใช้คลาส .container-fluid ซึ่งคอนเทนเนอร์จะมีความกว้าง 100% เสมอ

ตัวอย่างการใช้งานคลาส .container-fluid

 <div class="container-fluid">
  <h1>ส่วนหัวเรื่อง</h1>
  <p>ส่วนย่อหน้า</p>
</div> 

Container Padding ระยะห่างจากขอบด้านในของคอนเทนเนอร์

โดยปกติ คอนเทนเนอร์จะมี padding (ระยะห่างจากขอบด้านใน) ด้านซ้ายและด้านขวา 15px แต่ด้านบนด้านล่างจะไม่มี

หากต้องการเพิ่ม padding ด้านบนหรือด้านล่าง เราต้องกำหนดโดยการใช้คลาสของ Bootstrap เช่น

<div class="container pt-3"></div> 

Container Border and Color ขอบและสีของคอนเทนเนอร์

เราสามารถกำหนดขอบและสีให้กับคอนเทนเนอร์ได้ เช่น

    <div class="container p-3 my-3 border">
        <h1>คอนเทนเนอร์แบบมีขอบ</h1>
    </div>

    <div class="container p-3 my-3 bg-dark text-white">
        <h1>คอนเทนเนอร์แบบพื้นหลังมืด</h1>
    </div>
    
    <div class="container p-3 my-3 bg-primary text-white">
        <h1>คอนเทนเนอร์แบบตัวอักษรสีขาว</h1>
    </div> 

Responsive Containers

เราสามารถสร้าง responsive containers ได้ โดยใช้คลาสดังนี้ .container-ขนาดหน้าจอ โดยที่ ขนาดหน้าจอ สามารถกำหนดได้ดังนี้

• sm คือหน้าจอขนาดเล็ก (small)
• md คือหน้าจอขนาดกลาง (medium)
• lg คือหน้าจอขนาดใหญ่ (large)
• xl คือหน้าจอขนาดใหญ่มาก (extra large)

ความกว้างสูงสุดของคอนเทนเนอร์ max-width จะเปลี่ยนตามขนาดหน้าจออุปกรณ์ ดังตาราง

ตัวอย่างการใช้งาน เช่น

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div> 

คุณอาจสนใจ:

เริ่มต้นใช้งาน Bootstrap 4 Bootstrap 4 Grids ระบบกริดในบูทสแตร็ป 4 Bootstrap 4 จัดรูปแบบข้อความและตัวอักษร ใช้งานสีใน Bootstrap 4