สอนใช้งาน Bootstrap 4

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

Card เป็นหนึ่งในองค์ประกอบที่มีความยืดหยุ่นสูงใน Bootstrap 4 ที่สามารถใช้ในการจัดกลุ่มเนื้อหาและการออกแบบที่หลากหลาย เช่น แสดงเนื้อหาที่เป็นข้อความ รูปภาพ ปุ่ม และอื่น ๆ โดยที่สามารถจัดวางให้ดูเรียบร้อยและสวยงามได้ง่าย ๆ

พื้นฐานการใช้งาน Card

เริ่มต้นการใช้งาน Card โดยการใช้โครงสร้างพื้นฐานของ Card ใน Bootstrap 4

HTML
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">ตัวอย่างเนื้อหาภายใน Card นี้.</p>
    <a href="#" class="btn btn-primary">ไปที่ไหนสักแห่ง</a>
  </div>
</div>

ในตัวอย่างข้างต้น โครงสร้างของ Card ประกอบด้วย

  • card : คลาสหลักสำหรับสร้าง Card
  • card-img-top : ใช้สำหรับใส่รูปภาพด้านบนของ Card
  • card-body : ส่วนที่จัดเก็บเนื้อหาของ Card เช่น ชื่อเรื่อง (card-title), ข้อความ (card-text) และปุ่ม (btn)

การใช้ Card กับเนื้อหาประเภทต่าง ๆ

Card สามารถรองรับเนื้อหาหลากหลายประเภทไม่ว่าจะเป็น รูปภาพ ข้อความ ปุ่ม หรือแม้กระทั่งลิงก์ นี่คือตัวอย่างการใช้ Card กับเนื้อหาต่าง ๆ

Card ที่มีเนื้อหาหลายส่วน

HTML
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">ข้อความส่วนที่ 1.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">รายการที่ 1</li>
    <li class="list-group-item">รายการที่ 2</li>
    <li class="list-group-item">รายการที่ 3</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">ลิงก์ที่ 1</a>
    <a href="#" class="card-link">ลิงก์ที่ 2</a>
  </div>
</div>

ในตัวอย่างนี้ Card มีการแบ่งเนื้อหาออกเป็นหลายส่วน คือ ส่วนของรูปภาพ (card-img-top), ส่วนของข้อความ (card-body), ส่วนของรายการ (list-group) และส่วนของลิงก์ (card-link)

การจัดเรียง Card แบบแนวตั้งและแนวนอน

เราสามารถจัดเรียง Card ในลักษณะต่าง ๆ ตามความต้องการ เช่น การเรียงแนวตั้ง (default) และแนวนอน

Card เรียงแนวนอน

HTML
<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/150" class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">นี่คือตัวอย่างของการเรียง Card แบบแนวนอน.</p>
        <p class="card-text"><small class="text-muted">อัปเดตล่าสุดเมื่อ 3 นาทีที่แล้ว</small></p>
      </div>
    </div>
  </div>
</div>

ตัวอย่างนี้ใช้การจัดวางแบบแนวนอนโดยแบ่ง Card ออกเป็นสองส่วนคือส่วนของรูปภาพและเนื้อหาในลักษณะของแถว (row) ที่ใช้ no-gutters เพื่อลดระยะห่างระหว่างคอลัมน์

Card แบบ Group และ Deck

นอกจากนี้ยังสามารถจัดเรียง Card หลายใบในรูปแบบ Group หรือ Deck เพื่อแสดงผลหลาย Card ในพื้นที่เดียวกัน

Card แบบ Group

HTML
<div class="card-group">
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card Title 1</h5>
      <p class="card-text">ข้อความใน Card 1.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card Title 2</h5>
      <p class="card-text">ข้อความใน Card 2.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card Title 3</h5>
      <p class="card-text">ข้อความใน Card 3.</p>
    </div>
  </div>
</div>

card-group เป็นการจัดวาง Card หลายใบให้แสดงผลเรียงติดกันโดยไม่มีการเว้นระยะห่างระหว่าง Card

Card แบบ Deck

HTML
<div class="card-deck">
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card Title 1</h5>
      <p class="card-text">ข้อความใน Card 1.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card Title 2</h5>
      <p class="card-text">ข้อความใน Card 2.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card Title 3</h5>
      <p class="card-text">ข้อความใน Card 3.</p>
    </div>
  </div>
</div>

card-deck จะจัดวาง Card ให้แสดงผลอย่างยืดหยุ่น โดยที่แต่ละ Card จะมีขนาดความกว้างเท่ากันและปรับขนาดให้เหมาะสมกับขนาดหน้าจอ

การใช้สีใน Card

นอกจากนี้ Card ยังสามารถเปลี่ยนสีพื้นหลังและสีตัวหนังสือได้ง่าย ๆ ด้วยคลาส bg- และ text- ที่มีอยู่ใน Bootstrap

HTML
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary Card</h5>
    <p class="card-text">นี่คือข้อความใน Card ที่มีพื้นหลังสีน้ำเงินและข้อความสีขาว.</p>
  </div>
</div>

ในตัวอย่างนี้ใช้ bg-primary เพื่อเปลี่ยนสีพื้นหลังของ Card ให้เป็นสีน้ำเงิน และ text-white เพื่อเปลี่ยนสีของตัวหนังสือเป็นสีขาว

สรุป

Card ใน Bootstrap 4 เป็นเครื่องมือที่ยืดหยุ่นและใช้งานง่าย สามารถประยุกต์ใช้งานได้หลากหลายรูปแบบ ไม่ว่าจะเป็นการแสดงรูปภาพ ข้อความ รายการ หรือแม้แต่การจัดวาง Card หลายใบในรูปแบบต่าง ๆ การใช้ Card ทำให้การออกแบบหน้าเว็บดูเป็นระเบียบและสวยงามอย่างมีประสิทธิภาพ

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

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