Bootstrap4组件：卡片(Card)


发布时间：2020-03-20 16:28    作者： 晖哥哥   已过去：3 年   阅读总量：2200 已被赞：0

卡片(Card)

如果你对Bootstrap 3很熟悉，卡片代替了我们旧的panel、well和thumbnail样式--那些组件类似的功能可以通过卡片的修饰类来实现。

内容类型

主体

引用.card-body样式，可以建立起卡片的内容主体，如果你需要在一个.card中装置带边框的内容时，可以使用它。

<div class="card">

<div class="card-body">

主体主体主体主体主体主体主体主体主体主体主体主体。

</div>

</div>

标题、文字和链接

通过.card-title和 <h*>组合，可以添加卡片标题。同亲将.card-link 与 <a>结合使用，可以方便添加平行的链接。

通过 .card-subtitle 和 <h*> 结合，可以添加副标题，如果 .card-title 和 .card-subtitle 组合放在 .card-body 中, 则可对齐主、副标题。

<div class="card">

<div class="card-body">

<h5 class="card-title">标题！</h5>

<h6 class="card-subtitle mb-2 text-muted">子标题！</h6>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

<!-- <a href="" class="btn btn-primary">查看详情</a> -->

<a href="" class="card-link">立即下载</a>

<a href="" class="card-link">了解更多</a>

</div>

</div>

图片

.card-img-top 定义一张图片在卡片的顶部， .card-text定义文字在卡片中，当然你也可以在.card-text 中设计自己的个性化HTML标签样式。

<div class="card" style="width:18rem;">

<img src="images/sm.jpg" alt="" class="card-img-top">

<div class="card-body">

<p class="card-text">主体主体主体主体主体主体主体主体主体主体主体主体。</p>

</div>

<!-- <img src="images/sm.jpg" alt="" class="card-img-bottom"> -->

</div>

图像叠加覆盖：文字在图片上

将图像转换为卡片背景，并覆盖卡片的文字。根据图像，你可以选择是否需要额外的样式或其它属性定义。card-img-overlay

<div class="card" style="width:18rem;">

<img src="images/sm.jpg" alt="" class="card-img-top">

<div class="card-img-overlay">

<h5 class="card-title">标题！</h5>

<p class="card-text">主体主体主体主体主体主体主体主体主体主体主体主体。</p>

</div>

</div>

列表组

建立一个包含内容的列表组卡片。

<div class="card" style="width:18rem;">

<!-- <div class="card-header">Title</div> -->

<ul class="list-group list-group-flush">#list-group-flush清除边框

<li class="list-group-item">aaaaaa</li>

<li class="list-group-item">bbbbbb</li>

<li class="list-group-item">cccccc</li>

</ul>

</div>

混合样式

混合并结合多种内容形式来创建个性化卡片，下例即是将图像、块、文字以及列表整合在一个固定宽度的卡片中。

<div class="card" style="width:18rem;">

<img src="images/sm.jpg" alt="" class="card-img-top">

<div class="card-body">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

<ul class="list-group list-group-flush">

<li class="list-group-item">列表项一列表项一</li>

<li class="list-group-item">列表项二列表项二</li>

<li class="list-group-item">列表项三列表项三</li>

</ul>

<div class="card-body">

<a href="" class="card-link">立即下载</a>

<a href="" class="card-link">了解更多</a>

</div>

</div>

页眉页脚

在卡内添加可选的页眉和/或页脚。

您还可以更改卡上的页眉和页脚所需的边框，也能使用.bg-transparent删除其background-color背景颜色。

<div class="card text-center">

<div class="card-header">页眉</div>

<div class="card-body">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述。</p>

<a href="" class="btn btn-primary">查看详情</a>

</div>

<div class="card-footer text-muted">

页脚

</div>

</div>

使用blockquote：备注显示

<div class="card">

<div class="card-header">页眉</div>

<div class="card-body">

<blockquote class="blockquote mb-0">

<p>爱上一个地方，就应该背上包去旅游，走得更远。</p>

<footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>

</blockquote>

</div>

</div>

缩放_文本对齐

缩放

卡片没有特定的宽度width定义，除非另有定义声明，否则它们的真实宽度将是100%，您可以根据需要使用自定义CSS，引入栅格系统、定义栅格系统Sass mixins或其它程式进行更改。

(1) 使用栅格系统

(2) 使用通用全局属性。如 .w-25等。

(3) 自定义CSS。如style=”width:18rem;”等。

文本对齐

使用我们的文本对齐类(.text-left/center/right)来更改或特定部份的文本对齐。

在卡片中导航

使用 Bootstrap导航组件将导航元件添加到卡片的标题或块中

<div class="card text-center">

<div class="card-header">

<ul class="nav nav-tabs card-header-tabs">

<!-- <ul class="nav nav-pills card-header-pills"> -->

<li class="nav-item">

<a href="" class="nav-link active">选项一</a>

</li>

<li class="nav-item">

<a href="" class="nav-link">选项二</a>

</li>

<li class="nav-item">

<a href="" class="nav-link">选项三</a>

</li>

</ul>

</div>

<div class="card-body">

<h5 class="card-title">标题！</h5>

<p class="card-text">

描述描述描述描述描述描述描述描述描述描述描述描述。

</p>

<a href="" class="btn btn-primary">查看详情</a>

</div>

</div>

卡片样式

背景和颜色

使用 文字和通用背景定义 定义卡片的显示颜色。

<div class="row">

<div class="col-3">

<div class="card text-white bg-primary mb-3">

<div class="card-header">Header</div>

<div class="card-body">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

<div class="col-3">

<div class="card text-white bg-secondary mb-3">

<div class="card-header">Header</div>

<div class="card-body">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

<div class="col-3">

<div class="card text-white bg-success mb-3">

<div class="card-header">Header</div>

<div class="card-body">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

<div class="col-3">

<div class="card text-white bg-danger mb-3">

<div class="card-header">Header</div>

<div class="card-body">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

<div class="col-3">

<div class="card text-white bg-warning mb-3">

<div class="card-header">Header</div>

<div class="card-body">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

<div class="col-3">

<div class="card text-white bg-info mb-3">

<div class="card-header">Header</div>

<div class="card-body">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

<div class="col-3">

<div class="card bg-light mb-3">

<div class="card-header">Header</div>

<div class="card-body">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

<div class="col-3">

<div class="card text-white bg-dark mb-3">

<div class="card-header">Header</div>

<div class="card-body">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

</div>

边框

使用 边框通用样式 来改变卡片的border-color 、 .text-{color} ，或者在父层的 .card 上显示内容。

<div class="row">

<div class="col-3">

<div class="card border-primary mb-3">

<div class="card-header">Header</div>

<div class="card-body text-primary">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

<div class="col-3">

<div class="card border-secondary mb-3">

<div class="card-header">Header</div>

<div class="card-body text-secondary">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

<div class="col-3">

<div class="card border-success mb-3">

<div class="card-header">Header</div>

<div class="card-body text-success">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

<div class="col-3">

<div class="card border-danger mb-3">

<div class="card-header">Header</div>

<div class="card-body text-danger">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

<div class="col-3">

<div class="card border-warning mb-3">

<div class="card-header">Header</div>

<div class="card-body text-warning">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

<div class="col-3">

<div class="card border-info mb-3">

<div class="card-header">Header</div>

<div class="card-body text-info">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

<div class="col-3">

<div class="card border-light mb-3">

<div class="card-header">Header</div>

<div class="card-body">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

<div class="col-3">

<div class="card border-dark mb-3">

<div class="card-header">Header</div>

<div class="card-body text-dark">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

</div>

卡片排版

Bootstrap除了对卡片內的內容可以进行设计排版外，还包括一系列布置选项，目前这些布置选项还不支持响应式。

卡片组

.card-group将多个卡片结为一个群组，使用他们具有相同的宽度和高度列。卡片组使用display: flex;来实现统一的布局。

<div class="card-group">

<div class="card">

<img src="images/sm.jpg" alt="" class="card-img-top">

<div class="card-body">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

<div class="card">

<img src="images/sm.jpg" alt="" class="card-img-top">

<div class="card-body">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

<div class="card">

<img src="images/sm.jpg" alt="" class="card-img-top">

<div class="card-body">

<h5 class="card-title">标题！</h5>

<p class="card-text">描述描述描述描述描述描述描述描述描述描述描述描述。</p>

</div>

</div>

</div>

Card decks卡片阵列（左右有间距）

需要一套相互不相连，但宽度和高度相同的卡片？使用卡片阵列.card-deck吧。

多列卡片浮动排版 （上下，左右都有间距，且自动换行）

將卡片包在.card-columns 中，可以將做出象 Masonry网站的瀑布式排列卡片效果，卡片是使用column属性，而不是基于 flexbox弹性布局，从而实现更方便实用的浮动对齐，顺序是从上到下、从左到右。

注意：为了防止卡片排列突出栏目，我们必须为它们设置为 display: inline-block （当 column-break-inside: avoid 这个解决方案还没有生效时。

 

 

点赞

0


登陆后方可评论

年 月 归 档
点 赞 最 多
同 类 推 荐