การ์ด
การ์ดของ Bootstrap มีคอนเทนเนอร์เนื้อหาที่ยืดหยุ่นและขยายได้พร้อมตัวเลือกและตัวเลือกที่หลากหลาย
การ์ดเป็นคอนเทนเนอร์เนื้อหาที่ยืดหยุ่นและขยายได้ ประกอบด้วยตัวเลือกสำหรับส่วนหัวและส่วนท้าย เนื้อหาที่หลากหลาย สีพื้นหลังตามบริบท และตัวเลือกการแสดงผลที่มีประสิทธิภาพ หากคุณคุ้นเคยกับ Bootstrap 3 การ์ดจะเข้ามาแทนที่แผง บ่อน้ำ และภาพขนาดย่อแบบเก่าของเรา ฟังก์ชันที่คล้ายคลึงกันกับส่วนประกอบเหล่านั้นมีให้เป็นคลาสตัวปรับแต่งสำหรับการ์ด
การ์ดถูกสร้างขึ้นด้วยมาร์กอัปและรูปแบบที่น้อยที่สุดเท่าที่จะเป็นไปได้ แต่ยังคงสามารถควบคุมและปรับแต่งได้มากมาย สร้างขึ้นด้วย flexbox ทำให้จัดตำแหน่งได้ง่ายและผสมผสานกับส่วนประกอบ Bootstrap อื่นๆ ได้ดี ไม่มีmargin
โดยค่าเริ่มต้น ดังนั้นให้ใช้ยูทิลิตี้การเว้นวรรคตามต้องการ
ด้านล่างนี้คือตัวอย่างการ์ดพื้นฐานที่มีเนื้อหาผสมและความกว้างคงที่ การ์ดไม่มีความกว้างตายตัวในการเริ่มต้น ดังนั้นการ์ดจะเติมความกว้างเต็มขององค์ประกอบหลักโดยธรรมชาติ ปรับแต่งได้ง่ายด้วยตัวเลือกขนาดต่างๆ ของเรา
ชื่อการ์ด
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ไปที่ไหนสักแห่ง<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
การ์ดรองรับเนื้อหาที่หลากหลาย รวมถึงรูปภาพ ข้อความ กลุ่มรายการ ลิงก์ และอื่นๆ ด้านล่างนี้เป็นตัวอย่างของสิ่งที่ได้รับการสนับสนุน
การสร้างบล็อคของการ์ดคือ.card-body
. ใช้เมื่อใดก็ตามที่คุณต้องการส่วนบุนวมภายในการ์ด
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
ชื่อการ์ดถูกใช้โดยการเพิ่ม.card-title
แท็<h*>
ก ในทำนองเดียวกัน ลิงก์จะถูกเพิ่มและวางติดกันโดยการเพิ่ม.card-link
ลงใน<a>
แท็ก
คำบรรยายถูกใช้โดยการเพิ่ม a .card-subtitle
ลงใน<h*>
แท็ก หาก วางรายการ .card-title
และ.card-subtitle
รายการไว้ใน.card-body
รายการ ชื่อการ์ดและคำบรรยายจะจัดตำแหน่งอย่างสวยงาม
ชื่อการ์ด
คำบรรยายการ์ด
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ลิงค์การ์ด ลิงค์ อื่น<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
.card-img-top
วางรูปภาพไว้บนสุดของการ์ด ด้วย.card-text
คุณสามารถเพิ่มข้อความลงในการ์ดได้ ข้อความภายใน.card-text
สามารถกำหนดสไตล์ด้วยแท็ก HTML มาตรฐานได้
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
สร้างรายการเนื้อหาในการ์ดที่มีกลุ่มรายการล้าง
- Cras justo odio
- Dapibus ac สิ่งอำนวยความสะดวกใน
- ขนถ่ายที่ eros
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
- Cras justo odio
- Dapibus ac สิ่งอำนวยความสะดวกใน
- ขนถ่ายที่ eros
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
ผสมผสานและจับคู่เนื้อหาหลายประเภทเพื่อสร้างการ์ดที่คุณต้องการ หรือใส่ทุกอย่างลงไป ด้านล่างนี้คือสไตล์รูปภาพ บล็อก สไตล์ข้อความ และกลุ่มรายการ ทั้งหมดนี้รวมอยู่ในการ์ดความกว้างคงที่
ชื่อการ์ด
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
- Cras justo odio
- Dapibus ac สิ่งอำนวยความสะดวกใน
- ขนถ่ายที่ eros
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
เพิ่มส่วนหัวและ/หรือส่วนท้ายที่ไม่บังคับภายในการ์ด
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
ส่วนหัวของการ์ดสามารถจัดสไตล์ได้โดยการ.card-header
เพิ่ม<h*>
องค์ประกอบ
จุดเด่น
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
การ์ดไม่มีความเฉพาะเจาะจงwidth
ในการเริ่ม ดังนั้นการ์ดจะมีความกว้าง 100% เว้นแต่จะระบุไว้เป็นอย่างอื่น คุณสามารถเปลี่ยนแปลงสิ่งนี้ได้ตามต้องการด้วย CSS แบบกำหนดเอง คลาสกริด มิกซ์อิน Sass ของกริด หรือยูทิลิตี้
ใช้กริด ห่อการ์ดในคอลัมน์และแถวตามต้องการ
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่งการรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
ใช้ยูทิลิตี้การปรับขนาดที่มีอยู่ จำนวนหนึ่ง เพื่อกำหนดความกว้างของการ์ดอย่างรวดเร็ว
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
ใช้ CSS ที่กำหนดเองในสไตล์ชีตของคุณหรือเป็นสไตล์อินไลน์เพื่อกำหนดความกว้าง
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
คุณสามารถเปลี่ยนการจัดแนวข้อความของการ์ดใดก็ได้—ในทั้งหมดหรือบางส่วน—ด้วยคลาสการจัดข้อความของ เรา
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่งการรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่งการรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
เพิ่มการนำทางไปยังส่วนหัวของการ์ด (หรือบล็อก) ด้วยส่วนประกอบการนำ ทาง ของ Bootstrap
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
การรักษาชื่อพิเศษ
พร้อมข้อความสนับสนุนด้านล่างเพื่อเป็นการนำไปสู่เนื้อหาเพิ่มเติมอย่างเป็นธรรมชาติ
ไปที่ไหนสักแห่ง<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
การ์ดมีตัวเลือกสองสามอย่างสำหรับการทำงานกับรูปภาพ เลือกจากการเพิ่ม "ตัวพิมพ์ใหญ่รูปภาพ" ที่ปลายด้านใดด้านหนึ่งของการ์ด ภาพซ้อนทับที่มีเนื้อหาในการ์ด หรือเพียงแค่ฝังภาพลงในการ์ด
เช่นเดียวกับส่วนหัวและส่วนท้าย การ์ดสามารถรวม "ตัวพิมพ์ใหญ่รูปภาพ" ด้านบนและด้านล่าง—ภาพที่ด้านบนหรือด้านล่างของการ์ด
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
<div class="card mb-3">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img class="card-img-bottom" src="..." alt="Card image cap">
</div>
เปลี่ยนรูปภาพเป็นพื้นหลังของการ์ดและซ้อนทับข้อความในการ์ดของคุณ คุณอาจต้องการหรือไม่ต้องการสไตล์หรือยูทิลิตี้เพิ่มเติม ทั้งนี้ขึ้นอยู่กับรูปภาพ
<div class="card bg-dark text-white">
<img class="card-img" src="..." alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
การ์ดมีตัวเลือกมากมายสำหรับปรับแต่งพื้นหลัง เส้นขอบ และสี
ใช้ยูทิลิตี้ข้อความและพื้นหลังเพื่อเปลี่ยนรูปลักษณ์ของการ์ด
ชื่อบัตรหลัก
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อบัตรรอง
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดความสำเร็จ
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดอันตราย
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดคำเตือน
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดข้อมูล
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดไฟ
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดมืด
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
<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 title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
ถ่ายทอดความหมายสู่เทคโนโลยีอำนวยความสะดวก
การใช้สีเพื่อเพิ่มความหมายเป็นเพียงการแสดงภาพเท่านั้น ซึ่งจะไม่ถูกถ่ายทอดไปยังผู้ใช้เทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ ตรวจสอบให้แน่ใจว่าข้อมูลที่แสดงด้วยสีนั้นชัดเจนจากเนื้อหา (เช่น ข้อความที่มองเห็นได้) หรือรวมไว้ด้วยวิธีการอื่น เช่น ข้อความเพิ่มเติมที่ซ่อนอยู่ใน.sr-only
ชั้นเรียน
ใช้ยูทิลิตี้เส้นขอบเพื่อเปลี่ยนเฉพาะborder-color
การ์ด โปรดทราบว่าคุณสามารถใส่.text-{color}
คลาสบนพาเรน.card
ต์หรือส่วนย่อยของเนื้อหาของการ์ดดังที่แสดงด้านล่าง
ชื่อบัตรหลัก
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อบัตรรอง
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดความสำเร็จ
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดอันตราย
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดคำเตือน
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดข้อมูล
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดไฟ
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
ชื่อการ์ดมืด
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
คุณยังสามารถเปลี่ยนเส้นขอบบนส่วนหัวและส่วนท้ายของการ์ดได้ตามต้องการ หรือแม้แต่ลบออกbackground-color
ด้วย.bg-transparent
.
ชื่อการ์ดความสำเร็จ
ตัวอย่างข้อความสั้นๆ เพื่อสร้างจากชื่อการ์ดและประกอบขึ้นเป็นเนื้อหาในการ์ดจำนวนมาก
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
นอกเหนือจากการจัดรูปแบบเนื้อหาภายในการ์ดแล้ว Bootstrap ยังมีตัวเลือกสองสามตัวสำหรับการจัดวางชุดการ์ด ในขณะนี้ ตัวเลือกเลย์เอาต์เหล่านี้ยังไม่ตอบสนอง
ใช้กลุ่มการ์ดเพื่อแสดงการ์ดเป็นองค์ประกอบเดียวที่แนบด้วยคอลัมน์ที่มีความกว้างและความสูงเท่ากัน กลุ่มบัตรใช้display: flex;
เพื่อให้ได้ขนาดที่เท่ากัน
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
ชื่อการ์ด
การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ การ์ดใบนี้มีเนื้อหาที่ยาวกว่าการ์ดใบแรกที่แสดงให้เห็นว่ามีความสูงเท่ากัน
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
<div class="card-group">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
เมื่อใช้กลุ่มการ์ดที่มีส่วนท้าย เนื้อหาจะเรียงกันโดยอัตโนมัติ
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
ชื่อการ์ด
การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ การ์ดใบนี้มีเนื้อหาที่ยาวกว่าการ์ดใบแรกที่แสดงให้เห็นว่ามีความสูงเท่ากัน
<div class="card-group">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
ต้องการชุดการ์ดความกว้างและความสูงที่เท่ากันซึ่งไม่ได้ต่อกันหรือไม่? ใช้สำรับไพ่
ชื่อการ์ด
การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
ชื่อการ์ด
การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ การ์ดใบนี้มีเนื้อหาที่ยาวกว่าการ์ดใบแรกที่แสดงให้เห็นว่ามีความสูงเท่ากัน
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
เช่นเดียวกับกลุ่มไพ่ ส่วนท้ายของไพ่ในสำรับจะเรียงกันโดยอัตโนมัติ
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
ชื่อการ์ด
การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ การ์ดใบนี้มีเนื้อหาที่ยาวกว่าการ์ดใบแรกที่แสดงให้เห็นว่ามีความสูงเท่ากัน
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
การ์ดสามารถจัดเป็น คอลัมน์แบบ Masonryด้วย CSS ได้โดยการใส่ไว้ใน.card-columns
. การ์ดสร้างขึ้นด้วยcolumn
คุณสมบัติ CSS แทน flexbox เพื่อให้จัดตำแหน่งได้ง่ายขึ้น ไพ่เรียงจากบนลงล่างและซ้ายไปขวา
หัวขึ้น! ไมล์สะสมของคุณกับคอลัมน์การ์ดอาจแตกต่างกันไป เพื่อป้องกันไม่ให้ไพ่แตกในคอลัมน์ เราต้องตั้งค่าให้display: inline-block
เป็น การ์ดที่ column-break-inside: avoid
ยังไม่สามารถกันกระสุนได้
ชื่อการ์ดที่ขึ้นบรรทัดใหม่
การ์ดนี้เป็นการ์ดที่ยาวกว่าพร้อมข้อความสนับสนุนด้านล่างซึ่งนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ เนื้อหานี้ยาวไปหน่อย
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante
ชื่อการ์ด
การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat
ชื่อการ์ด
การ์ดใบนี้มีข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante
ชื่อการ์ด
นี่คือการ์ดที่กว้างขึ้นพร้อมข้อความสนับสนุนด้านล่างเพื่อนำไปสู่เนื้อหาเพิ่มเติมโดยธรรมชาติ การ์ดใบนี้มีเนื้อหาที่ยาวกว่าการ์ดใบแรกที่แสดงให้เห็นว่ามีความสูงเท่ากัน
อัพเดทล่าสุดเมื่อ 3 นาทีที่แล้ว
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img" src="..." alt="Card image">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
คอลัมน์การ์ดสามารถขยายและปรับแต่งได้ด้วยรหัสเพิ่มเติม ด้านล่างนี้คือส่วนขยายของ.card-columns
คลาสที่ใช้ CSS เดียวกันกับที่เราใช้—คอลัมน์ CSS— เพื่อสร้างชุดของระดับที่ตอบสนองสำหรับการเปลี่ยนจำนวนคอลัมน์