Bootstrap 4 การ์ด
การ์ด
การ์ดใน Bootstrap 4 เป็นกล่องที่มีขอบและมีช่องว่างภายในบางส่วน ประกอบด้วยตัวเลือกสำหรับส่วนหัว ส่วนท้าย เนื้อหา สี ฯลฯ
บัตรพื้นฐาน
การ์ดพื้นฐานถูกสร้างขึ้นพร้อมกับ.cardคลาส และเนื้อหาภายในการ์ดมี.card-bodyคลาส:
ตัวอย่าง
<div class="card">
<div class="card-body">Basic
card</div>
</div>
หากคุณคุ้นเคยกับ Bootstrap 3 การ์ดจะแทนที่แผง หลุม และภาพขนาดย่อแบบเก่า
ส่วนหัวและส่วนท้าย
ชั้น.card-headerเรียนเพิ่มส่วนหัวลงในการ์ดและ.card-footerชั้นเรียนเพิ่มส่วนท้ายลงในการ์ด:
ตัวอย่าง
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
การ์ดบริบท
ในการเพิ่มสีพื้นหลังให้กับการ์ด ให้ใช้คลาสตามบริบท ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkและ.bg-light.
ตัวอย่าง
ชื่อเรื่อง ข้อความ และลิงก์
ใช้.card-titleเพื่อเพิ่มชื่อการ์ดให้กับองค์ประกอบส่วนหัวใดๆ คลาส.card-textใช้เพื่อลบระยะขอบด้านล่างสำหรับองค์ประกอบ <p> หากเป็นลูกคนสุดท้าย (หรือคนเดียว) .card-bodyภายใน ชั้น.card-linkเรียนจะเพิ่มสีฟ้าให้กับลิงก์ใดๆ และเอฟเฟกต์โฮเวอร์
ตัวอย่าง
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another 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="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
ลิงค์ยืด
เพิ่ม.stretched-linkชั้นเรียนลงในลิงก์ภายในการ์ด และจะทำให้การ์ดทั้งใบสามารถคลิกและเลื่อนได้ (การ์ดจะทำหน้าที่เป็นลิงก์):
ตัวอย่าง
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
ภาพการ์ดซ้อนทับ
เปลี่ยนรูปภาพให้เป็นพื้นหลังของการ์ดและใช้.card-img-overlay
เพื่อเพิ่มข้อความที่ด้านบนของรูปภาพ:
ตัวอย่าง
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
คอลัมน์การ์ด
ข้อความบางส่วนในการ์ดใบแรก
ข้อความบางส่วนในการ์ดใบที่สอง
ข้อความบางส่วนในการ์ดใบที่สาม
ข้อความบางส่วนในการ์ดใบที่สี่
ข้อความบางส่วนในไพ่ใบที่ห้า
ข้อความบางส่วนในการ์ดใบที่หก
ชั้น.card-columnsเรียนสร้างตารางไพ่ที่มีลักษณะคล้ายอิฐ (เช่น pinterest) เลย์เอาต์จะปรับโดยอัตโนมัติเมื่อคุณใส่การ์ดเพิ่ม
หมายเหตุ:การ์ดจะแสดงในแนวตั้งบนหน้าจอขนาดเล็ก (น้อยกว่า 576px):
ตัวอย่าง
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
สำรับไพ่
ข้อความบางส่วนในการ์ดใบแรก
ข้อความเพิ่มเติมเพื่อเพิ่มความสูง
ข้อความเพิ่มเติมเพื่อเพิ่มความสูง
ข้อความเพิ่มเติมเพื่อเพิ่มความสูง
ข้อความบางส่วนในการ์ดใบที่สอง
ข้อความบางส่วนในการ์ดใบที่สาม
ข้อความบางส่วนในการ์ดใบที่สี่
ชั้น.card-deckเรียนสร้างตารางของไพ่ที่มีความสูงและความกว้างเท่ากัน เลย์เอาต์จะปรับโดยอัตโนมัติเมื่อคุณใส่การ์ดเพิ่ม
หมายเหตุ:การ์ดจะแสดงในแนวตั้งบนหน้าจอขนาดเล็ก (น้อยกว่า 576px):
ตัวอย่าง
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
กลุ่มบัตร
ข้อความบางส่วนในการ์ดใบแรก
ข้อความเพิ่มเติมเพื่อเพิ่มความสูง
ข้อความเพิ่มเติมเพื่อเพิ่มความสูง
ข้อความเพิ่มเติมเพื่อเพิ่มความสูง
ข้อความบางส่วนในการ์ดใบที่สอง
ข้อความบางส่วนในการ์ดใบที่สาม
ข้อความบางส่วนในการ์ดใบที่สี่
ชั้น.card-groupเรียนคล้าย.card-deckกับ ข้อแตกต่างเพียงอย่างเดียวคือ.card-groupคลาสจะลบระยะขอบซ้ายและขวาระหว่างการ์ดแต่ละใบ
หมายเหตุ:การ์ดจะแสดงในแนวตั้งบนหน้าจอขนาดเล็ก (น้อยกว่า 576px) C ขอบด้านบนและด้านล่าง:
ตัวอย่าง
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>