Bootstrap 5 ตัวแทน

Bootstrap 5 ตัวแทน

คำแนะนำหลักสูตร:

จากบทก่อนหน้านี้คุณได้เรียนรู้ว่า Bootstrap ต้องการองค์ประกอบเพื่อที่จะล็อความหมายของเว็บไซต์

  • .container เราเติมสิ่งของที่ภายในตัวแทนความหมาย และมีสองหมวดความหมายสำหรับตัวแทนความหมาย:
  • .container-fluid class สร้างตัวแทนความหมายที่เป็นแบบ responsive และมีความกว้างเรียบร้อย

ตัวแทนความหมายที่ครอบคลุมความกว้างทั้งหมดของมุมมอง

ใช้ .container class สร้างตัวแทนความหมายที่เป็นแบบ responsive และมีความกว้างเรียบร้อย

โปรดจำหนดว่าความกว้างของมัน (max-width）จะเปลี่ยนแปลงตามขนาดจอที่แตกต่างกัน:

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra Large
≥1200px 		XXL
≥1400px
max-width 100% 540px 720px 960px 1140px 1320px

โปรดเปิดตัวอย่างด้านล่างและปรับขนาดหน้าตัวเครื่องเพื่อดูว่าความกว้างของตัวแทนความหมายเปลี่ยนแปลงใน breakpoint ต่างๆ:

ตัวอย่าง

<div class="container">
  <h1>หน้า Bootstrap แรกของฉัน</h1>
  <p>นี่คือข้อความบางอย่าง。</p>
</div>

ทดลองด้วยตัวเอง

XXL breakpoint（≥1400px）คือการเพิ่มเติมใน Bootstrap 5 และ breakpoint ใหญ่ที่สุดใน Bootstrap 4 คือ Extra large（≥1200px）。

ตัวแทนความหมายที่เป็นแบบ fluid

ใช้ .container-fluid class สร้างตัวแทนความหมายที่ครอบคลุมความกว้างทั้งหมดของจอสเครน (width เสมอๆ 100%）：

ตัวอย่าง

<div class="container-fluid">
  <h1>หน้า Bootstrap แรกของฉัน</h1>
  <p>นี่คือข้อความบางอย่าง。</p>
</div>

ทดลองด้วยตัวเอง

เติมพื้นที่ตัวแทนความหมาย

โดยมาตรฐาน ตัวแทนความหมายมีเติมพื้นที่ทางด้านซ้ายและขวา (เส้นในเนื้อที่ด้านซ้ายและขวา) และไม่มีเติมพื้นที่ส่วนบนหรือด้านล่าง (เส้นในเนื้อที่ด้านบนและด้านล่าง)。ดังนั้น เรามักใช้ เครื่องมือ spacing（เครื่องมือเพิ่มเติม），เช่น การเติมพื้นที่และเส้นบรรจบที่เพิ่มเติมเพื่อที่มันจะดูดีขึ้น。ตัวอย่างเช่น，.pt-5 หมายถึงการเพิ่มส่วนบนเติม：

ตัวอย่าง

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

ทดลองด้วยตัวเอง

ขอบและสีของตัวจัดการ

เครื่องมืออื่นๆ เช่น ขอบและสี มักถูกใช้ร่วมกับตัวจัดการ:

ตัวอย่าง

<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>

ทดลองด้วยตัวเอง

คุณจะเรียนรู้เพิ่มเติมเกี่ยวกับเครื่องมือสีและขอบเมื่อได้ศึกษาบทต่อไป

ตัวจัดการเปิดตัวต่อตอบ

คุณยังสามารถใช้ .container-sm|md|lg|xl ชั้นเพื่อระบุว่าตัวจัดการควรตอบสนองเมื่อไหร่

ของตัวจัดการ max-width จะเปลี่ยนแปลงตามขนาดหน้าจอ/วิวต์ ต่างๆ:

ชั้น Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥1200px		 XXL
≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px

ตัวอย่าง

<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>
<div class="container-xxl">.container-xxl</div>

ทดลองด้วยตัวเอง