技术无忧-Bootstrap4 教程-Bootstrap4 卡片

Bootstrap4 教程

Bootstrap4 教程简介 Bootstrap4 安装使用 Bootstrap4 网格系统 Bootstrap4 文字排版 Bootstrap4 颜色 Bootstrap4 表格 Bootstrap4 图形形状 Bootstrap4 Jumbotron Bootstrap4 信息提示框 Bootstrap4 按钮 Bootstrap4 按钮组 Bootstrap4 徽章 Bootstrap4 进度条 Bootstrap4 分页 Bootstrap4 列表组 Bootstrap4 卡片 Bootstrap4 下拉菜单 Bootstrap4 折叠 Bootstrap4 导航 Bootstrap4 导航栏 Bootstrap4 面包屑导航 Bootstrap4 表单 Bootstrap4 表单控件 Bootstrap4 输入框组 Bootstrap4 自定义表单 Bootstrap4 轮播 Bootstrap4 模态框 Bootstrap4 提示框 Bootstrap4 弹出框 Bootstrap4 滚动监听 Bootstrap4 小工具 Bootstrap4 Flex布局 Bootstrap4 多媒体对象

Bootstrap4 卡片

简单的卡片

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

效果：

简单的卡片

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
                        ">
                        Default card
                        </
                        div
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                          <
                        div 
                        class
                        ="
                        card bg-primary text-white
                        ">
                    
                    
                            <
                        div 
                        class
                        ="
                        card-body
                        ">
                        Primary card
                        </
                        div
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                          <
                        div 
                        class
                        ="
                        card bg-success text-white
                        ">
                    
                    
                            <
                        div 
                        class
                        ="
                        card-body
                        ">
                        Success card
                        </
                        div
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                          <
                        div 
                        class
                        ="
                        card bg-info text-white
                        ">
                    
                    
                            <
                        div 
                        class
                        ="
                        card-body
                        ">
                        Info card
                        </
                        div
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                          <
                        div 
                        class
                        ="
                        card bg-warning text-white
                        ">
                    
                    
                            <
                        div 
                        class
                        ="
                        card-body
                        ">
                        Warning card
                        </
                        div
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                          <
                        div 
                        class
                        ="
                        card bg-danger text-white
                        ">
                    
                    
                            <
                        div 
                        class
                        ="
                        card-body
                        ">
                        Danger card
                        </
                        div
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                          <
                        div 
                        class
                        ="
                        card bg-secondary text-white
                        ">
                    
                    
                            <
                        div 
                        class
                        ="
                        card-body
                        ">
                        Secondary card
                        </
                        div
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                          <
                        div 
                        class
                        ="
                        card bg-dark text-white
                        ">
                    
                    
                            <
                        div 
                        class
                        ="
                        card-body
                        ">
                        Dark card
                        </
                        div
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                          <
                        div 
                        class
                        ="
                        card bg-light text-dark
                        ">
                    
                    
                            <
                        div 
                        class
                        ="
                        card-body
                        ">
                        Light card
                        </
                        div
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                        </
                        div
                        >

效果：

多种颜色卡片

Default card

Primary card

Success card

Info card

Warning card

Danger card

Secondary card

Dark card

Light card

标题、文本和链接

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

                
                    
                        <
                        div 
                        class
                        ="
                        card
                        ">
                    
                    
                          <
                        div 
                        class
                        ="
                        card-body
                        ">
                    
                    
                            <
                        h4 
                        class
                        ="
                        card-title
                        ">
                        Card title
                        </
                        h4
                        >
                    
                    
                            <
                        p 
                        class
                        ="
                        card-text
                        ">
                        This is example text.
                        </
                        p
                        >
                    
                    
                            <
                        a 
                        href
                        ="
                        #
                        " 
                        class
                        ="
                        card-link
                        ">
                        Card link
                        </
                        a
                        >
                    
                    
                            <
                        a 
                        href
                        ="
                        #
                        " 
                        class
                        ="
                        card-link
                        ">
                        Another link
                        </
                        a
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                        </
                        div
                        >

效果：

标题、文本和链接

Card title

This is example text.

Card link Another link

图片卡片

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

                
                    
                        <
                        div 
                        class
                        ="
                        card
                        " 
                        style
                        ="
                        width:400px;
                        ">
                    
                    
                          <
                        img 
                        class
                        ="
                        card-img-top
                        " 
                        src
                        ="
                        img_avatar1.png
                        " 
                        alt
                        ="
                        Card image
                        ">
                    
                    
                          <
                        div 
                        class
                        ="
                        card-body
                        ">
                    
                    
                            <
                        h4 
                        class
                        ="
                        card-title
                        ">
                        Qiao
                        </
                        h4
                        >
                    
                    
                            <
                        p 
                        class
                        ="
                        card-text
                        ">
                        This is example text. Qiao is beautiful.
                        </
                        p
                        >
                    
                    
                            <
                        a 
                        href
                        ="
                        #
                        " 
                        class
                        ="
                        btn btn-primary
                        ">
                        See Profile
                        </
                        a
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                        </
                        div
                        >

效果：

图片卡片

图片在头部 (card-img-top):

Qiao

This is example text. Qiao is beautiful.

See Profile

图片在底部(card-img-bottom):

Qiao

This is example text. Qiao is beautiful.

See Profile

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

                
                    
                        <
                        div 
                        class
                        ="
                        card
                        " 
                        style
                        ="
                        width:400px;
                        ">
                    
                    
                          <
                        img 
                        class
                        ="
                        card-img-top
                        " 
                        src
                        ="
                        img_avatar1.png
                        " 
                        alt
                        ="
                        Card image
                        ">
                    
                    
                          <
                        div 
                        class
                        ="
                        card-img-overlay
                        ">
                    
                    
                            <
                        h4 
                        class
                        ="
                        card-title
                        ">
                        Qiao
                        </
                        h4
                        >
                    
                    
                            <
                        p 
                        class
                        ="
                        card-text
                        ">
                        This is example text. Qiao is beautiful.
                        </
                        p
                        >
                    
                    
                            <
                        a 
                        href
                        ="
                        #
                        " 
                        class
                        ="
                        btn btn-primary
                        ">
                        See Profile
                        </
                        a
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                        </
                        div
                        >

效果：

文字覆盖图片

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

Qiao

This is example text. Qiao is beautiful.This is example text. Qiao is beautiful.

See Profile