Bootstrap 4 卡片组件

Bootstrap 4 提供了 .card.card-body CSS 类用于创建卡片组件

<div class="card">
  <div class="card-body">简单的卡片</div>
</div>

运行范例 »

卡片组件的头部和底部

.card-header CSS 类用于创建卡片的头部样式

.card-footer CSS 类用于创建卡片的底部样式

<div class="card">
  <div class="card-header">卡片头部</div>
  <div class="card-body">卡片内容</div> 
  <div class="card-footer">卡片底部</div>
</div>

运行范例 »

多种颜色卡片

可以在 .card 元素上添加以下 CSS 类来设置卡片的颜色

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light

<div class="card">
  <div class="card-body">Basic card</div>
</div>
<br>
<div class="card bg-primary text-white">
  <div class="card-body">Primary card</div>
</div>
<br>
<div class="card bg-success text-white">
  <div class="card-body">Success card</div>
</div>
<br>
<div class="card bg-info text-white">
  <div class="card-body">Info card</div>
</div>
<br>
<div class="card bg-warning text-white">
  <div class="card-body">Warning card</div>
</div>
<br>
<div class="card bg-danger text-white">
  <div class="card-body">Danger card</div>
</div>
<br>
<div class="card bg-secondary text-white">
  <div class="card-body">Secondary card</div>
</div>
<br>
<div class="card bg-dark text-white">
  <div class="card-body">Dark card</div>
</div>
<br>
<div class="card bg-light text-dark">
  <div class="card-body">Light card</div>
</div>

运行范例 »

标题、文本和链接

可以在头部元素上使用 .card-title 来设置卡片的标题

添加 .card-text 用于设置卡片正文的内容

添加 .card-link 用于给链接设置颜色

<div class="card">
  <div class="card-body">
    <h4 class="card-title">卡片标题</h4>
    <p class="card-text">这是卡片的正文</p>
    <a href="#" class="card-link">一个链接</a>
    <a href="#" class="card-link">另一个链接</a>
  </div>
</div>

运行范例 »

图文卡片

可以给 <img> 元素添加 .card-image-top (图片在文字上方) 或 .card-image-bottom (图片在文字下方) 来创建一个图文卡片

<div class="card" style="width:300px">
  <img class="card-img-top" src="/static/i/img3.jpg" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">李白</h4>
    <p class="card-text">唐朝诗先</p>
    <a href="#" class="btn btn-primary">详情</a>
  </div>
</div>

运行范例 »

图文卡片-图片为背景

如果图片要设置为背景,可以使用 .card-img-overlay 代替 .card-body

<div class="card" style="width:300px">
  <img class="card-img-top" src="/static/i/img3.jpg" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">李白</h4>
    <p class="card-text">唐朝诗先</p>
    <a href="#" class="btn btn-primary">详情</a>
  </div>
</div>

运行范例 »

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.