Bootstrap4 卡片

简单的卡片

我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，实例如下:

创新互联公司是一家以成都网站建设、网页设计、品牌设计、软件运维、营销推广、小程序App开发等移动开发为一体互联网公司。已累计为成都加固等众行业中小客户提供优质的互联网建站和软件开发服务。

实例

<
div

class
=
"
card
"
>

<
div

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

div
>

尝试一下 »

Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。

头部和底部

.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式：

实例

<
div

class
=
"
card
"
>

<
div

class
=
"
card-header
"
>
头部
div
>

<
div

class
=
"
card-body
"
>
内容
div
>

<
div

class
=
"
card-footer
"
>
底部
div
>

div
>

尝试一下 »

多种颜色卡片

Bootstrap 4 提供了多种卡片的背景颜色类： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

实例

<
div

class
=
"
container
"
>

<
h2
>
多种颜色卡片
h2
>

<
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
>

div
>

尝试一下 »

标题、文本和链接

我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。

实例

<
div

class
=
"
card
"
>

<
div

class
=
"
card-body
"
>

<
h4

class
=
"
card-title
"
>
Card title
h4
>

<
p

class
=
"
card-text
"
>
Some example text. Some example text.
p
>

<
a

href
=
"
#
"

class
=
"
card-link
"
>
Card link
a
>

<
a

href
=
"
#
"

class
=
"
card-link
"
>
Another link
a
>

div
>

div
>

尝试一下 »

图片卡片

我们可以给 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片：

实例

<
div

class
=
"
card
"

style
=
"
width:400px
"
>

<
img

decoding
=
"
async
"

class
=
"
card-img-top
"

src
=
"
img_avatar1.png
"

alt
=
"
Card image
"
>

<
div

class
=
"
card-body
"
>

<
h4

class
=
"
card-title
"
>
John Doe
h4
>

<
p

class
=
"
card-text
"
>
Some example text.
p
>

<
a

href
=
"
#
"

class
=
"
btn btn-primary
"
>
See Profile
a
>

div
>

div
>

尝试一下 »

如果图片要设置为背景，可以使用 .card-img-overlay 类:

实例

<
div

class
=
"
card
"

style
=
"
width:500px
"
>

<
img

decoding
=
"
async
"

class
=
"
card-img-top
"

src
=
"
img_avatar1.png
"

alt
=
"
Card image
"
>

<
div

class
=
"
card-img-overlay
"
>

<
h4

class
=
"
card-title
"
>
John Doe
h4
>

<
p

class
=
"
card-text
"
>
Some example text.
p
>

<
a

href
=
"
#
"

class
=
"
btn btn-primary
"
>
See Profile
a
>

div
>

div
>

尝试一下 »

当前题目：创新互联Bootstrap4教程：Bootstrap4卡片
网页网址：http://www.mswzjz.cn/qtweb/news3/289953.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能