Bootstrap从入门到实战---卡片（二）

最新推荐文章于 2023-10-22 11:08:53 发布
最新推荐文章于 2023-10-22 11:08:53 发布
阅读量192 收藏
点赞数
分类专栏： HTML/CSS/JS/Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46629123/article/details/118558362
版权

Bootstrap从入门到实战—卡片（二）
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19_卡片（二）</title>
    <!-- 移动设备优先 --> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>

    </style>
</head>
<body>
    <div class="card w-50">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Button</a>
        </div>
    </div>

    <div class="card w-25">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Button</a>
        </div>
    </div>

    <div class="card w-25 text-center">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Button</a>
        </div>
    </div>

    <br>
    <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                    <a href="#" class="nav-link active">active</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">link</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">disabled</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <h5 class="class-title">Special title treatment</h5>
            <p class="card-title">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>

    <br>

    <div class="card m-3 w-25">
        <img src="images/1.jpg" class="card-img-top" alt="">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
    <div class="card m-3">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        <img src="images/1.jpg" class="card-img-top" alt="">
    </div>

    <br>
    <div class="card bg-dark text-white">
        <img src="images/1.jpg" class="card-img" alt="">
        <div class="card-img-overlay">
            <h5 class="card-title">Card title1</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>

    <div class="card bg-dark text-white m-3">
        <img src="images/banner.jpg" class="card-img" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text">Last updated 3 mins ago</p>
        </div>
    </div>

    <br>
    <div class="card m-3" style="max-width: 540px;">
        <div class="row no-gutters">
            <div class="col-md-4">
                <img src="images/banner.jpg" class="card-img" alt="...">
            </div>
            <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
    </div>

    <br>

    <div class="card text-white bg-primary mb-3" style="max-width:18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
            <h5 class="card-title">Primary card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>

    <br>
    
    <div class="card border-primary mb-3" style="max-width:18rem;">
        <div class="card-header">header</div>
        <div class="card-body">
            <h5>primary card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
        <div class="card-footer">footer</div>
    </div>

    <br>


    <div class="card border-primary mb-3" style="max-width:18rem;">
        <div class="card-header bg-transparent">header</div>
        <div class="card-body">
            <h5>primary card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
        <div class="card-footer bg-transparent">footer</div>
    </div>

    <br>

    <div class="card-group">
        <div class="card">
            <img src="images/1.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>
          <div class="card">
            <img src="images/1.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>
          <div class="card">
            <img src="images/1.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
          </div>          
    </div>

    <div class="card-group">
        <div class="card">
          <img src="images/1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
          <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
        <div class="card">
          <img src="images/1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
          </div>
          <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
        <div class="card">
          <img src="images/1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
          </div>
          <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
          </div>
        </div>
      </div>

      <br>

      <div class="card-deck">
        <div class="card">
          <img src="images/1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
        <div class="card">
          <img src="images/1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
        <div class="card">
          <img src="images/1.jpg" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>


      <br>

      <div class="row row-cols-1 row-cols-md-2">
          <div class="col mb-4">
            <div class="card">
                <img src="images/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                </div>
              </div>
          </div>
          <div class="col mb-4">
            <div class="card">
                <img src="images/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                </div>
              </div>
          </div>
          <div class="col mb-4">
            <div class="card">
                <img src="images/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                </div>
              </div>
          </div>
      </div>

      <br>
      <div class="row row-cols-1 row-cols-md-2">
        <div class="col mb-4">
            <div class="card">
                <img src="images/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                </div>
              </div>
          </div>
          <div class="col mb-4">
            <div class="card">
                <img src="images/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                </div>
              </div>
          </div>
          <div class="col mb-4">
            <div class="card">
                <img src="images/1.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                </div>
              </div>
          </div>
          <div class="card">
            <img src="images/1.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            </div>
          </div>
      </div>

      </div>
      
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

</body>
</html>

在这里插入图片描述

i see the future
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap 卡片
y4418的博客
05-08 719
1.卡片作为一个新式引入到BootStrap 4中，可能样式、标记和扩展属性不会很多（未来会不断扩充发展），但它仍然可以提供许多控制项和定义方法，由于我们使用了flex弹性布局，使得它们可以轻松对齐、并方便的与其它Bootstrap组件混合搭配使用。 2.下面是一个具有混合内容并固定了宽度的基本.card卡片使用范例，如果.card卡片如果没有定义宽度，将自然地填满父元素的全宽-利用这个属性，我们可以轻松的订制各种尺寸的卡片。 3..这个是卡片的代码，width就是设置容器的...
Django系列之Bootstrap入门
u012852847的博客
06-27 1040
Django自学及总结，内容粗浅易懂，
bootstrap卡片
lin1072368472的博客
02-16 538
卡片一种可伸缩可扩展的容器 ##卡片的设置 div.card 容器 （div.card指 div 容器加上class 下面文章不在声明） div.card-body 容器 父级是.card h*.card-title 卡片标签 可放在.card也可以放cark-body中 （h* 指 h1-h7） <div class="card"> <d...
Bootstrap系列之卡片（Cards）
老__L的博客
05-29 5842
Bootstrap卡片提供了一个灵活的、可扩展的内容容器，具有多个变体和选项。卡片是一种灵活的、可扩展的内容容器。它包括页眉和页脚选项、各种各样的内容、背景颜色和强大的显示选项。如果你熟悉Bootstrap 3，卡片可以代替我们的旧面板、井和缩略图。与这些组件类似的功能可用作纸牌的修饰类。卡片使用尽可能少的标记和样式，但仍然设法提供大量的控制和定制。建立与flexbox，他们提供容易对齐和混合好与其他Bootstrap组件。默认情况下它们没有空白，因此需要时使用间距实用程序。下面是一个混合内容和固定宽度的基
Bootstrap组件——卡片
xun__xing的博客
07-29 4595
卡片一、卡片（card）1.基础卡片2.内容类型2.宽度设置3.文本对齐4.导航5. 图像6.文本放在图片身上7.水平排列8.卡片样式9.卡片组 一、卡片（card） 卡片是一个灵活的、可扩展的内容窗口，同时可以做出多种展示效果变体。 卡片没有特定的宽度width定义，除非另有定义声明，否则它们的真实宽度将是100%，您可以根据需要使用自定义CSS，引入栅格系统、定义栅格系统Sass mixins或其它程式进行更改。 1.基础卡片 <div class="row"> <div cla
Bootstrap5 卡片讲解
qq_65552364的博客
06-05 2766
在 Bootstrap5 中，通过类 .card 与 .card-body 可以快速创建一个简单的卡片，卡片可以包含头部、内容、底部以及各种颜色设置，卡片采用 flexbox 构建，易于对齐，并可与其他 Bootstrap 组件很好地混合。卡片没有固定的起始宽度，因此它们会自然地填充其父元素的整个宽度。卡片支持各种内容，包括图像、文本、列表组、链接等 🚀卡片之二式：标题 在卡片的内容中我们可以通过类 .card-title 设置卡片的标题，通过类 .card-subtitle 设置卡片的字幕。如果将 ..
Bootstrap从入门到项目实战.zip
01-13
这个"Bootstrap从入门到项目实战.zip"压缩包显然是一份全面的学习资源，包含了从基础到进阶的各个阶段的案例代码，帮助用户掌握Bootstrap 4.0的所有核心概念。 首先，Bootstrap 4.0是该框架的一个重大更新，引入了...
Bootstrap 项目实战（入门版）
09-24
这个"Bootstrap项目实战（入门版）"提供了丰富的实例，为初学者提供了深入理解和掌握Bootstrap的宝贵资源。下面，我们将详细探讨Bootstrap的基本概念、核心特性以及如何通过这些实战案例来提升你的前端开发技能。 ...
Bootstrap快速入门GitChat1
08-03
在Bootstrap快速入门中，首先需要了解其基本结构。Bootstrap的核心元素包括网格系统、导航、表单、按钮、图像、JavaScript插件等。网格系统是Bootstrap布局的基础，它基于12列的响应式栅格，允许开发者创建灵活的...
Bootstrap视频教程，实战开发后台管理系统 01
07-18
总之，“Bootstrap视频教程，实战开发后台管理系统 01”是你入门和提升Bootstrap技能的理想资源。通过这个系列的学习，你将能够快速搭建专业的后台管理系统，同时也能更好地理解和应用前端开发的最佳实践。
bootstrap卡片图文列表布局代码.zip
07-05
bootstrap卡片图文列表布局代码是一款基于jQuery跟Bootstrap实现的3种列表布局样式代码。
Bootstrap卡片图文列表布局样式代码
06-11
基于jQuery和Bootstrap实现的卡片图文列表布局样式代码，包括普通的卡片布局、等高卡片布局等。
Bootstrap的卡片组件相关知识
最新发布
昊虹AI笔记
10-22 1545
Bootstrap的卡片组件相关知识
Bootstrap-Bootstrap官网卡片响应式布局
Holy
10-18 4346
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--视口的设置，让网页能等比例的缩放到对应设备中--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!--告诉ie浏览器用最新内核去渲染
【每日一练】96—Bootstrap实现一个响应式卡片效果
web前端开发
11-12 336
作者 | 杨小爱写在前面今天这个练习是使用Bootstrap实现的一个卡片效果，关于这个卡片式的效果，我们在前面也分享过，主要是用纯CSS实现。当然，用什么方式实现自己想要的效果，主要是根据自己当前开发项目的需求来，同一个效果，实现的方式有多种，选择合适的就可以了，因此，我们在练习时，需要多尝试不同的实现方式，这样可以为实际开发项目时，找到合适的方式。现在，我们就来看一下今天这个练习的最终效果：看...
Bootstrap4响应式动态选项卡（卡片效果）详解
热门推荐
yufanhui的博客
06-20 2万+
Bootstrap4响应式动态选项卡（卡片效果）详解先看效果图。卡片会随着屏幕的缩放的缩放而缩放。1.逻辑详解。利用Bootstrap4网格系统与弹性盒子布局来实现效果。比较重要的一点是：在响应式网站中，我们可能需要某些元素会随着屏幕的变化而变化，有些元素可能不会随着屏幕的变化而变化。例如，本例中，...
Bootstrap -Card卡片
xiabenshu的博客
05-08 1万+
Cards（卡片） Bootstrap 提供了一个可伸缩可扩展的内容容器给多种变量和选择。 关于 卡片是一个灵活的、可扩展的内容容器。它包括用于页眉和页脚的选项、各种各样的内容、上下文背景颜色和强大的显示选项。如果您熟悉Bootstrap 3，卡将替换我们的旧面板、井和缩略图。与这些组件类似的功能可以作为卡片的修饰符类使用。 例子 卡片是用尽可能少的标记和样式构建的，但仍然能够交付大量的控制和定制...
bootstrap轮播图不起作用
Alan的博客
11-24 3573
在<head></head> 添加如下语句 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script s...
bootstrap组件（卡片）学习笔记
qq_45472813的博客
04-05 1207
组件卡片介绍 bootstrap4前并没有卡片，使用的是面板一词。卡片是bootstrap4加入的，操作非常容易，重点要说的是卡片排版，我觉得非常有用，所以需要记录下，方便复习。 作用场景 在bootstrap4中卡片提供一套实用的样式，这套样式在网页中非常常见。 上图中图片与文字搭配的样式在网页中常见，bootstrap因此也提供了这样的css组件，方便攻城狮们快速开发， <!DOCTY...
Bootstrap-validator前端表单校验实战指南
"Bootstrap-validator是基于Bootstrap框架的前端表单验证插件，它简化了对用户输入数据的验证过程，避免手动编写复杂的验证代码。这个插件依赖于Bootstrap的CSS和JS库，同时也提供了自己的CSS和JS文件来实现验证功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值