14.Bootstrap(中文教程)元件：卡片

ㄧ.单一卡片

<div id="demo" class="component"> <div class="card text-center" style="width: 18rem;">  <div class="card-header">   <h4>card</h4>  </div>  <div class="card-body">   <h4 class="card-title">title</h4>   <p class="card-text">description...</p>   <a href="#" class="card-link">action</a>   <a href="#" class="card-link">action</a>  </div>  <div class="card-footer">footer</div> </div></div>.component.demo{ padding: 50px;}

重点：
1.一开始父元素为.card，之后子元素卡片的架构为.card-header(上层)、.card-body(内容)、.card-footer(下层)
2.属性.card-body的架构有.card-title、.card-text、.card-link
3.属性.card-title为标题、.card-text为文字内容、.card-link为连结
4.属性.text-center让整个卡片的文字都置中

二.简单卡片图片内容样式

<div id="demo" class="component"> <div class="card text-center" style="width: 18rem;">  <img src="http://img2.58codes.com/2024/1-1P920091I8.jpg" alt="" class="card-img-top">  <div class="card-body">   <h4 class="card-title">title</h4>   <p class="card-text">description...</p>   <a href="#" class="card-link">action</a>   <a href="#" class="card-link">action</a>  </div> </div></div>.component.demo{ padding: 50px;}

重点：
1.这裏为简单的卡片样式，把.card-header与card-footer拿掉。
2.在上层加一个img，且在img的class加一个.card-img-top，让img的图片能对齐到上层并且让上层有圆角的效果。

三.将文字覆盖到图片上

<div id="demo" class="component"> <div class="card text-center text-white" style="width: 18rem;">  <img src="http://img2.58codes.com/2024/1-1P920091I8.jpg" alt="" class="card-img">  <div class="card-img-overlay">   <h4 class="card-title">title</h4>   <p class="card-text">description...</p>   <a href="#" class="card-link">action</a>   <a href="#" class="card-link">action</a>  </div> </div></div>.component.demo{ padding: 50px;}

重点：
1.卡片的文字覆盖到图片上，将.card-body改成.card-img-overlay
2.再将card-img-top改成card-img让四周的图片都有圆角
3.在.card这层加入.text-white让文字变成白色

codepen
参考：bootstrap4