Bootstrap 4 คอนเทนเนอร์
ตู้คอนเทนเนอร์
คุณได้เรียนรู้จากบทก่อนหน้านี้ว่า Bootstrap ต้องการองค์ประกอบที่มีเพื่อตัดเนื้อหาของไซต์
คอนเทนเนอร์ใช้เพื่อเติมเนื้อหาภายใน และมีสองคลาสคอนเทนเนอร์ที่พร้อมใช้งาน:
- คลาส
.containerจัดเตรียมคอนเทนเนอร์ความกว้างคงที่ที่ ตอบสนอง - คลาส
.container-fluidจัดเตรียมคอนเทนเนอร์แบบเต็มความกว้างครอบคลุมความกว้างทั้งหมดของ viewport
คอนเทนเนอร์คงที่
ใช้.containerคลาสเพื่อสร้างคอนเทนเนอร์แบบตอบสนองและมีความกว้างคงที่
โปรดทราบว่าความกว้าง ( max-width) จะเปลี่ยนไปตามขนาดหน้าจอต่างๆ:
|
เล็กพิเศษ <576px |
เล็ก ≥576px |
กลาง ≥768px |
ใหญ่ ≥992px |
ขนาดใหญ่พิเศษ ≥1200px |
|
|---|---|---|---|---|---|
| ความกว้างสูงสุด | 100% | 540px | 720px | 960px | 1140px |
เปิดตัวอย่างด้านล่างและปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูว่าความกว้างของคอนเทนเนอร์จะเปลี่ยนไปตามจุดสั่งหยุดที่ต่างกัน:
ตัวอย่าง
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
ภาชนะบรรจุของเหลว
ใช้.container-fluidคลาสเพื่อสร้างคอนเทนเนอร์แบบเต็มความกว้าง ซึ่งจะขยายความกว้างทั้งหมดของหน้าจอเสมอ ( widthis always 100%):
ตัวอย่าง
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
คอนเทนเนอร์แพดดิ้ง
ตามค่าเริ่มต้น คอนเทนเนอร์จะมีช่องว่างภายในด้านซ้ายและขวา 15px โดยไม่มีช่องว่างด้านบนหรือด้านล่าง ดังนั้นเราจึงมักใช้ยูทิลิตี้การเว้นวรรคเช่น ช่องว่างภายในเพิ่มเติม และระยะขอบ เพื่อให้ดูดีขึ้น ตัวอย่างเช่น.pt-3หมายถึง "เพิ่มช่องว่างภายในด้านบนขนาด 16px":
ตัวอย่าง
<div class="container pt-3"></div>
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับยูทิลิตีการเว้นวรรคในBS4 Utilities Chapterของเรา
ขอบตู้คอนเทนเนอร์และสี
ยูทิลิตี้อื่นๆ เช่น เส้นขอบและสี มักใช้ร่วมกับคอนเทนเนอร์ด้วย:
ตัวอย่าง
หน้า Bootstrap แรกของฉัน
คอนเทนเนอร์นี้มีเส้นขอบและช่องว่างภายในและระยะขอบพิเศษบางส่วน
หน้า Bootstrap แรกของฉัน
คอนเทนเนอร์นี้มีสีพื้นหลังสีเข้มและข้อความสีขาว รวมถึงช่องว่างภายในและระยะขอบเพิ่มเติม
หน้า Bootstrap แรกของฉัน
คอนเทนเนอร์นี้มีสีพื้นหลังสีน้ำเงินและข้อความสีขาว รวมถึงช่องว่างภายในและระยะขอบเพิ่มเติม
<div class="container p-3 my-3 border"></div>
<div class="container
p-3 my-3 bg-dark
text-white"></div>
<div class="container p-3 my-3 bg-primary
text-white"></div>
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับสีและยูทิลิตี้เส้นขอบในBS4 Colours ChapterและBS4 Utilities Chapter
คอนเทนเนอร์ตอบสนอง
คุณยังสามารถใช้.container-sm|md|lg|xlคลาสเพื่อสร้างคอนเทนเนอร์ที่ตอบสนองได้
max-widthคอนเทนเนอร์จะเปลี่ยนไปตามขนาดหน้าจอ/วิวพอร์ตที่แตกต่างกัน:
| ระดับ |
เล็กพิเศษ <576px |
เล็ก ≥576px |
กลาง ≥768px |
ใหญ่ ≥992px |
ขนาดใหญ่พิเศษ ≥1200px |
|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
ตัวอย่าง
<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>
เธอรู้รึเปล่า?
W3.CSS เป็นทางเลือกที่ดีสำหรับ Bootstrap 4
W3.CSS มีขนาดเล็กกว่า เร็วกว่า และใช้งานง่ายกว่า
หากคุณต้องการเรียนรู้ W3.CSS ไปที่W3.CSS Tutorialของ เรา