自定义卡片（Cards）

Bootstrap的卡片，默认带有边框，背景色，圆角，边距等样式，感觉用起来不太方便，需要先清除这些属性，所以仿照自定义一个卡片。

On this page

自定义卡片cards所有class样式

.cards可以结合bootstrap5预定义的属性来定义背景色,间距等属性。
内间距p-1到p-5，外边距m-1到m-5，
背景色bg-white,bg-light等，
边框border，border-top等，
圆角rounded-0到rounded-3,rounded-circle,rounded-pill,rounded-top,rounded-end,rounded-bottom,rounded-start
阴影shadow,shadow-sm,shadow-lg,shadow-none
结合flex布局，.cards_hd里面可以左标题右更多，cards_ft里面可以左价格，右按钮d-flex justify-content-between
文字对齐，text-center，text-start,text-end 宽度，默认宽度100%，结合w-25，w-50,w-75,w-100 多个卡片等高，加h-100样式文本加粗.fw-light,.fw-lighter,.fw-normal,.fw-bold,.fw-bolder 新闻列表加图片，结合row col使用

.cards .cards_hd头部
.cards_bd主体，title,subtitle,text,link都放在里面,cards_img可以放里面，也可以放外面
.cards_title结合h1到h6使用
.cards_subtitle字体大小没有区别，上下间距小点
.cards_text简介描述文字放到div.cards_text比较好，放到p标签里面，默认有下边距
.cards_ft底部
.list-group列表，默认背景色为白色，可以用.bg-transparent去除背景色
.scale_img鼠标经过，图片放大,图片默认宽度不是100%，需要100%用w-100定义
.cards_shadow默认小阴影，鼠标经过阴影放大

自定义卡片css：

/* 自定义cards */
.cards {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
}
.cards_hd {
  padding: 0.5rem 1rem;
}
.cards_ft {
  padding: 0.5rem 1rem;
}
.cards_bd {
  padding: 0.5rem 1rem;
}
.cards_img{
 overflow: hidden;
}
.cards_title {
  margin-bottom: 0.5rem;
}
.cards_subtitle {
  margin-top: -0.25rem;
  margin-bottom: 0;
}
.cards_shadow {  
 box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
.cards_shadow:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
/* 图片经过放大 */
img.scale_img:hover{
  -webkit-transform:scale(1.05);/*在Safari 和 Chrome兼容下还原*/
  -moz-transform:scale(1.05);/*在Firefox兼容下还原*/
  -ms-transfrom:scale(1.05);/*在IE9兼容下还原*/
  -o-transform:scale(1.05);/*在opera兼容下还原*/
  transform:scale(1.05);/*适用于所有浏览兼容下还原*/
}
img.scale_img{
  -webkit-transition:0.5s all;/* 适用Safari 和 Chrome兼容 */
  -moz-transition:0.5s all;/* 适用Firefox兼容 */
  -ms-transition:0.5s all;/* 适用IE9兼容 */
  -o-transition:0.5s all;/* Opera */
  transition: .5s;
}
.rounded-16 {
  border-radius: 1rem !important;
}

综合示例：为了效果明显，给cards加上边框和背景色bg-light border

新闻中心

华北公司2020年商务系统新员工

我是副标题

每一次结业，都是一次惊喜，都是获取新知识的刷新。每一次告别，都是为下一次更好的相聚，都是为了更好地蜕变。图｜中建一局华北公司2020年商务系统新员工合影为提高公司商务人员造价业务水平、实践操作能力，进

.list-group-item
.list-group-item
.list-group-item

已咨询成功报名：298人立即报名

<div class="cards bg-light border cards_shadow">
  <div class="cards_hd d-flex justify-content-between">
    <h4>新闻中心</h4>
    <a href="" class="btn btn-primary btn-sm rounded-pill">更多</a>
  </div>
  <div class="cards_img">
    <img src="images/about.jpg" class="scale_img w-100" style="height: 200px;" alt="">
  </div>              
  <div class="cards_bd">            
    <h5 class="cards_title">华北公司2020年商务系统新员工</h5>
    <h6 class="cards_subtitle mb-2 text-muted">我是副标题</h6>
    <div class="cards_text text-muted" style="font-size: 14px;">每一次结业，都是一次惊喜，都是获取新知识的刷新。每一次告别，都是为下一次更好的相聚，都是为了更好地蜕变。图｜中建一局华北公司2020年商务系统新员工合影为提高公司商务人员造价业务水平、实践操作能力，进</div>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item bg-transparent">.list-group-item</li>
    <li class="list-group-item">.list-group-item</li>
    <li class="list-group-item">.list-group-item</li>
  </ul>
  <div class="cards_ft d-flex justify-content-between">
    <span class="text-muted" style="font-size: 14px;">已咨询成功报名：298人</span>
    <a href="" class="btn btn-primary btn-sm">立即报名</a>
  </div>
</div>

示例一：cards_bd里面用到了row col，因为不是描述文字，是多个链接选项

工程造价类

零基础造价培训

查看更多+

已咨询成功报名：298人立即报名

<div class="cards bg-light border cards_shadow w-50">
  <div class="cards_hd">工程造价类</div>
  <div class="cards_bd row row-cols-2">
    <div class="col">
      <a href="">零基础造价培训</a>
    </div>
    <div class="col">
      <a href="">零基础造价培训</a>
    </div>
    <div class="col">
      <a href="">零基础造价培训</a>
    </div>
    <div class="col">
      <a href="">零基础造价培训</a>
    </div>
    <div class="col">
      <a href="">查看更多+</a>
    </div>
  </div>
  <div class="cards_ft d-flex justify-content-between">
    <span class="text-muted" style="font-size: 14px;">已咨询成功报名：298人</span>
    <a href="" class="btn btn-primary btn-sm">立即报名</a>
  </div>
</div>

示例二：cards_bd里面是表单

在线报名

填写成功后会有专业客服与您联系

860,158 人已咨询

<div class="cards bg-light border cards_shadow w-50">
  <div class="cards_hd text-white bg-primary text-center">
    <h6 class="fw-bold">在线报名</h6>
    <span style="font-size: 14px;">填写成功后会有专业客服与您联系</span>
  </div>
  <div class="cards_bd">
    <form>
      <div class="mb-3">
      <input type="text" class="form-control form-control-sm" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="您的姓名">
      </div>
      <div class="mb-3">
      <input type="text" class="form-control form-control-sm" id="exampleInputPassword1" placeholder="联系方式">
      </div>
      <div class="mb-3">
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="4" placeholder="备注信息"></textarea>
      </div>
      <div class="d-grid gap-2">
        <button class="btn btn-outline-primary" type="button">点击提交</button>
      </div>
    </form>
  </div>
  <div class="cards_ft text-center text-muted" style="font-size: 14px;">
    <span class="text-warning">860,158</span> 人已咨询
  </div>
</div>

示例二2：cards_bd里面是表单2

在线报名

填写成功后会有专业客服与您联系

860,158 人已咨询

<div class="cards bg-light border cards_shadow">
  <div class="cards_hd text-white bg-primary text-center">
    <h6 class="fw-bold">在线报名</h6>
    <span style="font-size: 14px;">填写成功后会有专业客服与您联系</span>
  </div>
  <div class="cards_bd">
    <form method="post" id="quickForm">
      <div class="row g-3">
        <label for="userName" class="col-3 col-lg-2 col-form-label text-secondary"><span class="text-danger">*</span> Name:</label>
        <div class="col-9 col-lg-10">
          <input type="text" class="ipt form-control form-control-sm" id="userName" name="userName" placeholder="Your name">
        </div>
        <label for="feedbackTel" class="col-3 col-lg-2 col-form-label text-secondary"><span class="text-danger">*</span> Tel:</label>
        <div class="col-9 col-lg-10">
          <input type="text" class="ipt form-control form-control-sm" id="feedbackTel" name="feedbackTel" placeholder="Your tel">
        </div>
        <label for="feedbackContent" class="col-3 col-lg-2 col-form-label text-secondary"><span class="text-danger">*</span> Content:</label>
        <div class="col-9 col-lg-10">
          <textarea class="ipt form-control" id="feedbackContent" name="feedbackContent" rows="4" placeholder="We suggest you detail your product requirements and company information here."></textarea>
        </div>
        <label for="" class="col-3 col-lg-2 col-form-label"></label>
        <div class="col-9 col-lg-10">
          <button class="btn btn-primary" type="submit">Send</button>
        </div>
      </div>
    </form>
  </div>
  <div class="cards_ft text-center text-muted" style="font-size: 14px;">
    <span class="text-warning">860,158</span> 人已咨询
  </div>
</div>

示例三：图片是个小图标

雄厚的研发能力

拥有自主课程研发中心及研发团队,专注于重庆造价培训、重庆工程造价课程研发、持续为客户提供高质量的产品。

<div class="cards bg-light border cards_shadow w-50 p-4">
  <div class="cards_img text-center">
    <img src="images/ts1.png" alt="">
  </div>
  <div class="cards_bd text-center">
    <h5 class="cards_title fw-bold">雄厚的研发能力</h5>
    <div class="cards_text">拥有自主课程研发中心及研发团队,专注于重庆造价培训、重庆工程造价课程研发、持续为客户提供高质量的产品。</div>
  </div>
</div>

示例四：cards整体有边距，有圆角，有背景色

重庆工程造价综合食堂项目

框架结构，独立基础。地上二层，建筑面积2480.88平米。广联达画图算量对量。

<div class="cards bg-light border cards_shadow w-50 p-4 rounded-16">
  <div class="cards_img">
    <img src="images/tjsxgc.png" class="scale_img w-100" alt="">
  </div>
  <div class="cards_bd text-center">
    <h5 class="cards_title fw-bold">重庆工程造价综合食堂项目</h5>
    <div class="cards_text text-muted" style="font-size: 14px;">框架结构，独立基础。地上二层，建筑面积2480.88平米。广联达画图算量对量。</div>
  </div>
  <div class="cards_ft text-end">
    <img src="images/syh.png" alt="">
  </div>
</div>

示例五：小图片，主标题在下，描述在上

学习造价培训，自己在家里被折磨的不行了就去朋友推荐的重庆一砖一瓦，没想到效果这么好，老师的教学能力很强，将知识点讲解的很清楚，也会有巩固训练，效果特别好，可以来试试。

刘某某 / 造价学员

<div class="cards bg-light border cards_shadow w-50 p-4 rounded-16">
  <div class="cards_img text-center">
    <img src="images/tx1.png" alt="">
  </div>
  <div class="cards_bd text-center">                
    <div class="cards_text text-muted my-3" style="font-size: 14px;">学习造价培训，自己在家里被折磨的不行了就去朋友推荐的重庆一砖一瓦，没想到效果这么好，老师的教学能力很强，将知识点讲解的很清楚，也会有巩固训练，效果特别好，可以来试试。</div>
    <h6 class="cards_title fw-bold">刘某某 / 造价学员</h6>
  </div>
  <div class="cards_ft text-center">
    <img src="images/syh2.png" alt="">
  </div>
</div>

示例六：新闻列表

新闻中心

.list-group-item
.list-group-item
.list-group-item

<div class="cards bg-light border cards_shadow">
  <div class="cards_hd d-flex justify-content-between">
    <h4>新闻中心</h4>
    <a href="" class="btn btn-primary btn-sm rounded-pill">更多</a>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">.list-group-item</li>
    <li class="list-group-item">.list-group-item</li>
    <li class="list-group-item">.list-group-item</li>
  </ul>
</div>

示例七：新闻列表带图片

新闻中心

<div class="cards bg-light border cards_shadow">
  <div class="cards_hd d-flex justify-content-between">
    <h4>新闻中心</h4>
    <a href="" class="btn btn-primary btn-sm rounded-pill">更多</a>
  </div>
  <div class="cards_bd">
    <div class="row mb-2">
      <div class="col-3">
        <div class="cards_img">
          <img src="images/xw2.png" alt="" class="scale_img w-100">
        </div>
      </div>
      <div class="col-9">
        <h6 class="cards_title">
          <a href="">中建一局华北公司2020年商务系统新员工</a>
        </h6>
        <div class="cards_text text-muted" style="font-size: 14px;">每一次结业，都是一次惊喜，都是获取新知识的刷新。每一次告别，都是为下一次更好的相聚，都是为了更好地蜕变。</div>
      </div>
    </div>                
    <div class="row mb-2">
      <div class="col-3">
        <div class="cards_img">
          <img src="images/xw2.png" alt="" class="scale_img w-100">
        </div>
      </div>
      <div class="col-9">
        <h6 class="cards_title">
          <a href="">中建一局华北公司2020年商务系统新员工</a>
        </h6>
        <div class="cards_text text-muted" style="font-size: 14px;">每一次结业，都是一次惊喜，都是获取新知识的刷新。每一次告别，都是为下一次更好的相聚，都是为了更好地蜕变。</div>
      </div>
    </div>                
    <div class="row mb-2">
      <div class="col-3">
        <div class="cards_img">
          <img src="images/xw2.png" alt="" class="scale_img w-100">
        </div>
      </div>
      <div class="col-9">
        <h6 class="cards_title">
          <a href="">中建一局华北公司2020年商务系统新员工</a>
        </h6>
        <div class="cards_text text-muted" style="font-size: 14px;">每一次结业，都是一次惊喜，都是获取新知识的刷新。每一次告别，都是为下一次更好的相聚，都是为了更好地蜕变。</div>
      </div>
    </div>                
  </div>
</div>