Bootstrap 5 แก็ดเกิด

แก้ว

แก้วใน Bootstrap 5 คือกล่องที่มีขอบเขต และเนื้อหาที่อยู่รอบ ๆ มีเนื้อหาหัวใจแก้ว ส่วนท้าย เนื้อหา สี และตัวเลือกอื่นๆ

แก้วพื้นฐาน

แก้วพื้นฐานคือ .card ที่ทำขึ้นโดยคลาส เนื้อหาในแก้วมี .card-body คลาสที่

ตัวอย่าง

<div class="card">
  <div class="card-body">แก้วพื้นฐาน</div>
</div>

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

หัวใจแก้วและส่วนท้าย

.card-header ใช้คลาสเพื่อเพิ่มหัวใจแก้วให้กับแก้ว:.card-footer ใช้คลาสเพื่อเพิ่มส่วนท้ายให้กับแก้ว:

ตัวอย่าง

<div class="card">
  <div class="card-header">หัวใจแก้ว</div>
  <div class="card-body">เนื้อหา</div>
  <div class="card-footer">ส่วนท้าย</div>
</div>

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

แก้วของโดยรอบ

หากต้องการเพิ่มสีพื้นหลังให้กับแก้ว ใช้คลาสของโดยรอบ:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

ตัวอย่าง

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

หัวใจแก้ว ข้อความ และลิงก์

กรุณาใช้ .card-title เพิ่มข้อความหัวใจแก้วให้กับองค์ประกอบหัวใจแก้วใดๆ หาก <p> องค์ประกอบนี้คือ .card-body ขององค์ประกอบหลังสุด (หรือองค์ประกอบเดียวๆ) ของมัน .card-text คลาสใช้เพื่อลบ <p> ขอบด้านล่างขององค์ประกอบ.card-link ความงดงามและประสาวงามสีสนิทของลิงก์เมื่อเคลื่อนไหว

ตัวอย่าง

<div class="card">
  <div class="card-body">
    <h4 class="card-title">ข้อความหัวเรื่องแผงบัตร</h4>
    <p class="card-text">ข้อความตัวอย่าง. ข้อความตัวอย่าง.</p>
    <a href="#" class="card-link">ลิงก์แผงบัตร</a>
    <a href="#" class="card-link">ลิงก์อื่นๆ</a>
  </div>
</div>

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

รูปภาพแผงบัตร

เพิ่ม .card-img-top หรือ .card-img-bottom เพิ่มเข้าไปใน <img>สามารถจัดเก็บรูปภาพที่ด้านบนหรือด้านล่างของแผงบัตรได้

โปรดระวังว่าเราได้เพิ่มรูปภาพนอก .card-body เพื่อครอบคลุมความกว้างทั้งหมด:

ตัวอย่าง

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates คือนักแพทย์และวิศวกรโปรแกรมมิ่ง. ข้อความตัวอย่าง. ข้อความตัวอย่าง.</p>
    <a href="#" class="btn btn-primary">ดูข้อมูลส่วนบุคคล</a>
  </div>
</div>

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

การเพิ่มรูปภาพบนแผงบัตร

เปลี่ยนรูปภาพเป็นสีพื้นหลังและใช้ .card-img-overlay เพิ่มข้อความบนรูปภาพด้านบน:

ตัวอย่าง

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">ข้อความตัวอย่าง. ข้อความตัวอย่าง.</p>
    <a href="#" class="btn btn-primary">ดูข้อมูลส่วนบุคคล</a>
  </div>
</div>

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