BootStrap笔记-卡片的使用

最新推荐文章于 2023-10-03 22:40:36 发布

IT1995

最新推荐文章于 2023-10-03 22:40:36 发布

阅读量983

点赞数

分类专栏： web前端文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/qq78442761/article/details/122660743

版权

web前端专栏收录该内容

186 篇文章

订阅专栏

本文介绍了如何使用Bootstrap框架创建不同样式的卡片组件，并展示了如何添加标题、文本、链接及图片等元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运行截图如下；

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CN_TEST1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!--    bootstrap css核心文件-->
    <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
<!--    bootstrap使用到了jquery，需要提前引用-->
    <script src="js/jquery-3.5.1.min.js"></script>
<!--    弹窗、提示、下拉菜单-->
    <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
<!--    bootstrap核心文件-->
    <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>

</head>
<body>

    <div class="container-fluid">

        <div class="card">
            <div class="card-body">Card</div>
        </div>

        <br/>

        <div class="card">
            <div class="card-header">Header</div>
            <div class="card-body">Body</div>
            <div class="card-footer">Footer</div>
        </div>

        <br/>

        <h2>多颜色Card</h2>
        <div class="card">
            <div class="card-body">Basic card</div>
        </div>
        <br/>
        <div class="card">
            <div class="card-body bg-primary text-white">Primary card</div>
        </div>
        <br/>
        <div class="card">
            <div class="card-body bg-success text-white">Success card</div>
        </div>
        <br/>
        <div class="card">
            <div class="card-body bg-info">Info card</div>
        </div>
        <br/>
        <div class="card">
            <div class="card-body bg-warning text-white">Warning card</div>
        </div>
        <br/>
        <div class="card">
            <div class="card-body bg-danger text-white">Danger card</div>
        </div>
        <br/>
        <div class="card">
            <div class="card-body bg badge-secondary text-white">Secondary card</div>
        </div>
        <br/>
        <div class="card">
            <div class="card-body bg-dark text-light">Dark card</div>
        </div>
        <br/>

<!--        标题、文本、链接-->
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Hello World</p>
                <a href="#" class="card-link">link one</a>
                <a href="#" class="card-link">link two</a>
            </div>
        </div>

        <br/>

<!--        图片-->
        <div class="card" style="width: 500px">
            <img class="card-img-top" src="pic/it1995.jpg"/>
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Hello World</p>
                <a href="#" class="card-link">link one</a>
                <a href="#" class="card-link">link two</a>
            </div>
        </div>

        <br/>

<!--        图片设置为背景-->
        <div class="card" style="width: 500px">
            <img class="card-img-top" src="pic/it1995.jpg"/>
            <div class="card-img-overlay">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Hello World</p>
                <a href="#" class="card-link">link one</a>
                <a href="#" class="card-link">link two</a>
            </div>
        </div>

    </div>

</body>
</html>

解释：

①在div中先添加card类，在到内部的div中设置card-body，就能创建卡片了；

②卡片通常分为三个部分分别是：card-header、card-body、card-footer；

③图片卡片里面，在img中添加card-img-top和card-img-bottom设置图片在文字的什么地方。