bootstrap 布局圆角卡片信息卡

最新推荐文章于 2024-10-09 09:00:00 发布

iteye_13003

最新推荐文章于 2024-10-09 09:00:00 发布

阅读量1.7k

点赞数

分类专栏： bootstrap 文章标签：乔乐共享纵观千象每天进步一点点学习永无止境 bootstrap ViewUI

本文链接：https://blog.csdn.net/iteye_13003/article/details/82613165

版权

bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用Bootstrap创建具有圆角样式的卡片布局，包括卡片的基本结构、圆角属性的应用，以及如何定制卡片内容，实现信息卡的美观展示。通过实例代码和效果展示，帮助读者深入理解Bootstrap卡片的使用技巧。

摘要由CSDN通过智能技术生成

.product-container {
      width: 260px;
      margin: 0 auto;
      border-radius: 10px;
      background: #f6f8f7;

      .name {
        border-bottom: 1px solid @gray-light;
        font-size: 20px;
        padding: 2px;
      }
      .interest {
        color: #1da427;
        font-size: 70px;
        font-weight: bold;
        padding: 0px;
        margin-bottom: -30px;

        .percent {
          font-size: 31px;
        }
      }
      .intro {
        padding: 5px;
      }
      .strong {
        padding: 3px;
        font-size: 17px;
        color: @white;
        background: #326c84;
        border-radius: 0 0 10px 10px;
      }
    }

<div class="row">
      <div class="col-xs-4 feature">
        <div class="product-container">
          <div class="name">融e富·定盈</div>
          <div class="interest">6<span class="percent">%</span></div>
          <div class="intro">3个月起 100元起投</div>
          <div class="strong">专业选择 积累财富</div>
        </div>
      </div>