Bootstrap卡片提供了多种自定义背景、边框和颜色的选项，以实现各种设计需求。本篇教程将详细介绍Bootstrap的卡片样式，包括背景和颜色、边框和Mixin通用类。
一、背景和颜色
使用文字和背景通用类别来改变卡片的外观。
<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-dark 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-dark 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 text-dark 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>
向辅助技术传达意义：
使用颜色来添加意义只能提供视觉指示，而不会被传达给辅助技术的用户，例如屏幕阅读器。确保通过颜色表示的信息要么从内容本身显而易见（例如可见的文本），要么通过其他方式包含，例如使用 .visually-hidden 类隐藏的额外文本。
二、边框
使用边框通用类别来改变卡片的border-color。你也能在.card父层设置.text-{color}类别，或是如以下示例设置在卡片内容的子集当中。
<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"> <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"> <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>
三、Mixin通用类
也可以依照需求更改卡片页首、页尾的边框，并能使用bg-transparent来移除它们的background-color。
<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>
