iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >Bootstrap中如何使用Card卡片组件
  • 201

0
分享到

Bootstrap中如何使用Card卡片组件

2024-04-02 19:04:59 201人浏览 薄情痞子
摘要

本篇内容介绍了“Bootstrap中如何使用Card卡片组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

本篇内容介绍了“Bootstrap中如何使用Card卡片组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

Bootstrap中如何使用Card卡片组件

1 bootstrap 卡片介绍

Bootstrap的卡提供了一个灵活的、可扩展的内容容器，其中包含多种变体和选项。卡片被设计成尽可能的少用一些标记和样式，它们可以更方便的对齐，并与其它的Bootstrap元件良好混合。预设中它并没有margin，所以可以依需求加入spacing通用类别。

以下是一个具有混合内容和固定宽度的基本卡片示例。卡片如果没有固定的宽度，那么它们将自然填充其父元素的全部宽度。这可以透过我们的各种缩放选项轻松调整。下面是一个简单的例子。

<div class="card" style="width: 18rem;">
            <img src="../pic/5.jpg" class="card-img-top" alt="卡片的图片宽度会自动设置">
            <div class="card-body">
            <h6 class="card-title">卡片标题</h6>
            <p class="card-text">卡片的内容可以使用文本、列表、表格、表单、图片等各种html元素</p>
            <a href="#" class="btn btn-primary">这是一个按钮</a>
            </div>
</div>

Bootstrap中如何使用Card卡片组件

2 卡片的结构

2.1 完整的卡片结构示例

一般情况下，我们无须完整的卡片结构就可以很好的使用一个卡片组件，如上例所示，一个完整的卡片包括页眉、页脚、图片（此处指的是页眉下面的图片，与卡片同宽度）、主体、列表群组五部分，其中主体可包含标题和文本。 下面是一个内容俱全的示例，事实上，一般情况下我们根据需要使用卡片的一两个元素就够用了，下面示例仅是演示，后面我们会逐一讲解各个部分功能。

 <div class="card" style="width: 18rem;">
        <div class="card-header">
           卡片页眉
        </div>
        <img src="../pic/5.jpg" class="card-img-top" alt="卡片的图片宽度会自动设置">
        <div class="card-body">
        <h6 class="card-title">卡片标题</h6>
        <p class="card-text">卡片的内容可以使用文本、列表、表格、表单、图片等各种html元素
          <img src="../pic/7.jpg" class="card-img-top" alt="卡片主体内的图片">
        </p>
        <a href="#" class="btn btn-primary">这是一个按钮</a>
        </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-footer text-muted">
            卡片页脚
        </div>
    </div>

Bootstrap中如何使用Card卡片组件

2.1 卡片的页眉和页脚

页眉和页脚不是必要的，与其他内容相比，页眉和页脚文字颜色较浅，字体略小。另外还可以通过通用类来调整其对齐方式，灵活使用可以达到很多特殊的效果。

2.1.1 简单卡片

<div class="card">
        <h6 class="card-header">通知</h6>
        <div class="card-body">
        <h6 class="card-title">中秋节放假通知</h6>
        <p class="card-text">下周中秋节放假7天，给大家乐活以下.........</p>
        <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>

Bootstrap中如何使用Card卡片组件

2.1.2  使用引用用于名人名言

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

Bootstrap中如何使用Card卡片组件

2.1.3 页眉页脚一起使用

      <div class="card text-center">
        <div class="card-header">
        名著推荐
        </div>
        <div class="card-body">
        <h6 class="card-title">《红楼梦》</h6>
        <p class="card-text">
            《红楼梦》是一部具有世界影响力的人情小说作品，举世公认的中国古典小说巅峰之作，
        中国封建社会的百科全书，传统文化的集大成者。小说以贾、史、王、薛四大家族的兴衰为背景，
        以贾府的家庭琐事、闺阁闲情为脉络，以贾宝玉、林黛玉、薛宝钗的爱情婚姻故事为主线，
        刻画了以贾宝玉和金陵十二钗为中心的正邪两赋有情人的人性美和悲剧美。
        通过家族悲剧、女儿悲剧及主人公的人生悲剧，揭示出封建末世危机。
    </p>
        <a href="#" class="btn btn-primary">马上阅读</a>
        </div>
        <div class="card-footer text-muted">
        2 days aGo
        </div>
        </div>

Bootstrap中如何使用Card卡片组件

2.2 图像的使用

2.2.1 图像在顶部或在底部

图像通过类card-img-top或card-img-bottom，设置显示在卡片的顶部还是底部，下面是两个卡片，一个图片在上，一个图片在下。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keyWords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.CSS" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div class="card mb-2">
        <img src="../pic/5.jpg" alt="...">
        <div>
        <h6>软发布 Win11 </h6>
        <p>T
          微软已宣布将于 6 月 24 日举行“What's next for windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
        </p>
        <p><small>Last updated 3 mins ago</small></p>
        </div>
        </div>
        
        <div>
        <div>
        <h6>飞利浦推出4K显示器</h6>
        <p>飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
        </p>
        <p><small>Last updated 3 mins ago</small></p>
        </div>
        <img src="../pic/7.jpg" alt="...">
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用Card卡片组件

2.2.2 图像作为卡片背景

将图片转换为卡片背景，并叠加卡片的文字。根据图片，你可以选择是否需要额外的样式或通用类别。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div class="card card bg-dark text-white">
        <img src="../pic/7.jpg" alt="...">
        <div class="card-body card-img-overlay">
        <h6>微软发布 Win11 </h6>
        <p>
          微软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
        </p>
        <p><small>Last updated 3 mins ago</small></p>
        </div>
        </div>
        

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

注意，我们通过bg-dark给卡片添加了一个黑色背景，text-white设置字体为白色，在card-body中设置card-img-overlay为背景色。也可以不要card-body，直接用card-img-overlay"如上。

Bootstrap中如何使用Card卡片组件

2.2.3 图像在左侧

结合使用网格以及通用类，可以让卡片以响应式的方法呈现水平状态。在下面的示例中，我们使用g-0移除网格的间隙，并使用col-md-*类别让卡片在md断点之后呈现水平。根据卡片内容，将可能会需要一些额外的调整。

<div class="card mb-3" style="max-width: 540px;">
        <div class="row g-0">
        <div class="col-md-4">
        <img src="../pic/3.jpg" alt="..." class="w-100">
        </div>
        <div class="col-md-8">
        <div class="card-body">
          <h6 class="card-title">春夏秋冬皆自然</h6>
          <p class="card-text">
            春夏秋冬皆自然,明月清风共我闲,有春风拂面的温柔,也有美好故事的发生,又一个春天如约而至,温柔的朝阳里布谷鸟声声呼唤,愿普天同安康,迎接春天到来的简...
          </p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        </div>
        </div>
        </div>

Bootstrap中如何使用Card卡片组件

当然，你最好设置一下图片宽度，否则容易发生溢出。

2.3 卡片的主体

2.3.1 标题和副标题

卡片的构造块是.card-body。当你需要卡片中的填充部分时就使用它。

  • 在<h*>标签中添加card-title以使用卡片标题。

  • 在<h*>标签中加入card-subtitle以使用副标题。

如果card-title以及card-subtitle元件被放在card-body里面，它们将会对齐良好。

2.3.2 文本内容和链接

文本内容可以放置任何html元素和bootstrap的组件，如按钮等，在a标签中加入card-link并使连接彼此相邻。

      <div class="card" style="width: 18rem;">
        <div class="card-body">
        <h6 class="card-title">微软发布 Win11</h6>
        <h7 class="card-subtitle mb-2 text-muted">科技动态</h7>
        <p class="card-text">
          微软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
        </p>
        <a href="#" class="card-link">了解详情</a>
        <a href="#" class="card-link">下载试用</a>
        </div>
        </div>

Bootstrap中如何使用Card卡片组件

2.4 列表群組

列表群组使用非常简单

<div class="card" style="width: 18rem;">
        <div class="card-header text-center">
        晚会活动
        </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>

Bootstrap中如何使用Card卡片组件

2.5 混合样式

混合并搭配多个内容形式，用来创建你所需要的卡片。以下示例将图片样式、块、文字样式以及列表群组全部包装在一个固定宽度的卡片中。

<div class="card" style="width: 18rem;">
<img src="../pic/cap.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h6 class="card-title">Card title</h6>
<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>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>

Bootstrap中如何使用Card卡片组件

3 卡片的排版及宽度

卡片预设没有特定的起始width，除非另有声明，否则它们的宽度将是100%。

3.1 使用网格

使用网格，根据需要在列和行中包装卡片。需要注意的是卡片默认是每个卡片一行的，要想一行中显示多个卡片，必须把几个卡片放在一个div容器中且每行中的卡片总宽度不能超过屏幕宽度。网格中的row-cols-*同样适用卡片。另外卡片默认是宽度相同，高度根据内容自动调整的，但是如果卡片拥有页脚，则高度会自动调整到相同。 下面给出一个完整例子。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div>
        <div>
        <div>
        <div>
          <h6>微软发布 Win11</h6>
          <p>
            软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
          </p>
          <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
        </div>

        <div>
        <div>
        <div>
          <h6>飞利浦推出4K显示器</h6>
          <p>
            飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
          </p>
          <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
        </div>
        </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用Card卡片组件

3.2 使用通用类

使用可调整宽度大小的通用类来快速设置卡片的宽度。

使用网格

使用网格，根据需要在列和行中包装卡片。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div class="card w-75">
        <div>
            <h6>微软发布 Win11</h6>
            <p>
              软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
            </p>
            <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
        
        <div class="card w-50">
        <div>
            <h6>飞利浦推出4K显示器</h6>
            <p>
              飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
            </p>
            <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
       

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用Card卡片组件

需要注意的是，这里的宽度值必须是预定的，预设包含25%，50%，75%，100%和auto，而不是随意写的。 详情见 Bootstrap5中文手册 通用类 尺寸（Sizing）一节。

3.3 使用自定义CSS

在样式表中使用自定义的CSS或使用行内样式设置宽度，这种方式比较灵活，可以使用rem、px、百分比。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div style="width: 30rem;">
        <div>
            <h6>微软发布 Win11</h6>
            <p>
              软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
            </p>
            <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
        
        <div style="width: 20rem;">
        <div>
            <h6>飞利浦推出4K显示器</h6>
            <p>
              飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
            </p>
            <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
       

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用Card卡片组件

3.4 卡片中的文本对齐

可以透过文字对齐类别更改任何卡片的整体或特定部分的文本对齐方式。默认全部是局左（text-start）对齐的，可以用card-text、text-end通用类使之居中对齐或居右对齐。通用类可用在card容器，也可以单独以用在标题、页眉页脚、主体等任意部分，如果同时使用，则单独的覆盖整体的。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div>
        <div>
        <div class="card text-center">
        <div>
                整体居中
        </div>    
        <div>
          <h6>微软发布 Win11</h6>
          <p>
            软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
          </p>
          <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
        </div>

        <div>
            <div>
            <div class="card-header text-center"">
                    页眉、标题居中
            </div>    
            <div>
              <h6 class="card-title  text-center">微软发布 Win11</h6>
              <p>
                软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
              </p>
              <a href="#" class="btn btn-primary">了解详情</a>
            </div>
            </div>
            </div>
            
            <div>
                <div class="card text-center">
                <div>
                        整体居中中标题居左
                </div>    
                <div>
                  <h6 class="card-title text-start">微软发布 Win11</h6>
                  <p>
                    软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
                  </p>
                  <a href="#" class="btn btn-primary">了解详情</a>
                </div>
                </div>
                </div>
        
        </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用Card卡片组件

4 带选项卡的卡片

使用Bootstrap的导航组件在卡片的页首（或块）添加一些导航，获得选项卡效果。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div class="card text-center">
        <div>
        <ul class="nav nav-tabs card-header-tabs">
        <li>
          <a aria-current="true" href="#" data-bs-toggle="tab" data-bs-target="#nav-hot">热门新闻</a>
        </li>
        <li>
          <a class="nav-link active" href="#" data-bs-toggle="tab" data-bs-target="#nav-home">国内新闻</a>
        </li>
        <li>
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">国外新闻</a>
        </li>
        </ul>
        </div>
           <div>
                <div class="card-body tab-pane  fade" id="nav-hot">
                <h6>热点新闻</h6>
                <p>热点新闻</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
                
                <div class="card-body tab-pane  fade show active" id="nav-home">
                        <h6>国内新闻</h6>
                        <p>国内热点新闻</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>    
            </div>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用Card卡片组件

对于上面的代码，只需经过两处替换，就可以换为胶囊导航

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

替换为

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

所有的

data-bs-toggle="tab"

替换为

data-bs-toggle="pill"

Bootstrap中如何使用Card卡片组件

5 卡片样式

卡片包含许多用来自定义背景、边框、颜色的选项。

5.1 背景和颜色

使用文字和背景通用类别来改变卡片的外观。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="d-flex">  
      <div class="card text-white bg-primary" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Primary</h6>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-secondary" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Secondary</h6>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-success" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Success</h6>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-danger" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Danger</h6>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
      </div>
    </div>
        <div class="d-flex">
        
        <div class="card text-dark bg-warning" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Warning</h6>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-dark bg-info" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Info</h6>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-dark bg-light" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Light</h6>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-dark" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h6 class="card-title">Dark</h6>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
      </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrap中如何使用Card卡片组件

5.2 边框和颜色

<div class="d-flex">
      <div class="card border-primary mb-3" style="max-width: 18rem;">
        <div class="card-header">页眉</div>
        <div class="card-body text-primary">
        <h6 class="card-title">Primary 卡片标题</h6>
        <p class="card-text">card-text 卡片文字内容</p>
        </div>
        </div>
        <div class="card border-secondary mb-3" style="max-width: 18rem;">
        <div class="card-header">页眉</div>
        <div class="card-body text-secondary">
        <h6 class="card-title">Secondary 卡片标题</h6>
        <p class="card-text">card-text 卡片文字内容</p>
        </div>
        </div>
        <div class="card border-success mb-3" style="max-width: 18rem;">
        <div class="card-header">页眉</div>
        <div class="card-body text-success">
        <h6 class="card-title">Success 卡片标题</h6>
        <p class="card-text">card-text 卡片文字内容</p>
        </div>
        </div>
        <div class="card border-danger mb-3" style="max-width: 18rem;">
        <div class="card-header">页眉</div>
        <div class="card-body text-danger">
        <h6 class="card-title">Danger 卡片标题</h6>
        <p class="card-text">card-text 卡片文字内容</p>
        </div>
        </div>
        
    </div>
    <div class="d-flex">
        <div class="card border-warning mb-3" style="max-width: 18rem;">
            <div class="card-header">页眉</div>
            <div class="card-body">
            <h6 class="card-title">Warning 卡片标题</h6>
            <p class="card-text">card-text 卡片文字内容</p>
            </div>
            </div>
            <div class="card border-info mb-3" style="max-width: 18rem;">
            <div class="card-header">页眉</div>
            <div class="card-body">
            <h6 class="card-title">Info 卡片标题</h6>
            <p class="card-text">card-text 卡片文字内容</p>
            </div>
            </div>
            <div class="card border-light mb-3" style="max-width: 18rem;">
            <div class="card-header">页眉</div>
            <div class="card-body">
            <h6 class="card-title">Light 卡片标题</h6>
            <p class="card-text">card-text 卡片文字内容</p>
            </div>
            </div>
            <div class="card border-dark mb-3" style="max-width: 18rem;">
            <div class="card-header">页眉</div>
            <div class="card-body text-dark">
            <h6 class="card-title">Dark 卡片标题</h6>
            <p class="card-text">card-text 卡片文字内容</p>
            </div>
            </div>
    </div>

Bootstrap中如何使用Card卡片组件

限于篇幅，仅展示前面一部分边框图片。

5.2 Mixin通用类

也可以依照需求更改卡片页首、页尾的边框，并能使用bg-transparent来移除它们的background-color。

 <div class="card border-success mb-3" style="max-width: 26rem;">
        <div class="card-header bg-transparent border-success">页眉</div>
        <div class="card-body text-success">
        <h6 class="card-title">Success卡片标题</h6>
        <p class="card-text">
            注意card-body使用了 text-success"，页脚使用了bg-transparent border-success
        </p>
        </div>
        <div class="card-footer bg-transparent border-success">页脚</div>
        </div>

Bootstrap中如何使用Card卡片组件

“Bootstrap中如何使用Card卡片组件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Bootstrap中如何使用Card卡片组件

本文链接: https://www.lsjlt.com/news/87328.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • Bootstrap中如何使用Card卡片组件
    本篇内容介绍了“Bootstrap中如何使用Card卡片组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！...
    99+
    2024-04-02
  • Bootstrap中如何导航组件和选项卡组件
    本篇内容介绍了“Bootstrap中如何导航组件和选项卡组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！...
    99+
    2024-04-02
  • Bootstrap中如何使用Toasts组件
    这篇文章主要介绍Bootstrap中如何使用Toasts组件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1 吐司消息（Toasts）示例吐司（Toasts）是一种轻量级通知，旨在模...
    99+
    2024-04-02
  • bootstrap组件中如何使用导航组件
    这篇文章主要介绍了bootstrap组件中如何使用导航组件，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。Bootstrap 中的导航组件都依...
    99+
    2024-04-02
  • Bootstrap中Blazor组件如何使用
    这篇文章给大家介绍Bootstrap中Blazor组件如何使用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。1、安装模板dotnet new -i Bootstrap.Blazor.T...
    99+
    2024-04-02
  • Web Components如何实现类Element UI中的Card卡片
    这篇“Web Components如何实现类Element UI中的Card卡片”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下...
    99+
    2023-07-02
  • Bootstrap中如何使用徽章图标组件
    本篇内容主要讲解“Bootstrap中如何使用徽章图标组件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Bootstrap中如何使用徽章图标组件”吧!1 徽章（...
    99+
    2024-04-02
  • Bootstrap中列表组组件的使用示例
    小编给大家分享一下Bootstrap中列表组组件的使用示例，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！列表组可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件，列表组在bootstrap框架中也...
    99+
    2023-06-06
  • ng-bootstrap组件集中tabset组件如何实现
    这篇文章给大家分享的是有关ng-bootstrap组件集中tabset组件如何实现的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。ng-bootstrap: tabset ...
    99+
    2024-04-02
  • Bootstrap中的图片组件和轮廓组件举例分析
    这篇文章主要介绍“Bootstrap中的图片组件和轮廓组件举例分析”，在日常操作中，相信很多人在Bootstrap中的图片组件和轮廓组件举例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，...
    99+
    2024-04-02
  • Bootstrap中分页组件的使用方法
    这篇文章主要介绍Bootstrap中分页组件的使用方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！概述在Bootstrap框架中提供了两种分页导航：☑   带页码的分页导航☑   带翻页的分页导...
    99+
    2023-06-14
  • vue卡片式点击切换图片组件使用详解
    本文实例为大家分享了vue卡片式点击切换图片组件，供大家参考，具体内容如下 因为公司业务的问题，最近在写vue项目，有了一个卡片图片的点击的需求，自己又不想写动画效果，就偷个懒，采用...
    99+
    2024-04-02
  • Bootstrap按钮组件怎么使用
    这篇文章主要介绍“Bootstrap按钮组件怎么使用”，在日常操作中，相信很多人在Bootstrap按钮组件怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Bootstrap按钮组件怎么使用”的疑惑有所...
    99+
    2023-07-04
  • bootstrap中select插件如何封装成Vue2.0组件
    这篇文章主要介绍bootstrap中select插件如何封装成Vue2.0组件，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！因为bootstrap-select功能比较强大，而且样式...
    99+
    2024-04-02
  • bootstrap中select插件如何封装成Vue组件
    本篇内容主要讲解“bootstrap中select插件如何封装成Vue组件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“bootstrap中select插件如何封装成Vue组件”吧!因为boot...
    99+
    2023-07-04
  • Bootstrap学习之如何使用缩略图组件和警示框组件
    这篇“Bootstrap学习之如何使用缩略图组件和警示框组件”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“Bootstrap学习之如何使用缩略图组件和警示框组件”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细...
    99+
    2023-06-06
  • Bootstrap中如何配置使用时间日历插件bootstrap-datetimepicker
    这篇文章将为大家详细讲解有关Bootstrap中如何配置使用时间日历插件bootstrap-datetimepicker，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。1....
    99+
    2024-04-02
  • 如何使用JS组件Bootstrap实现弹出框效果
    本篇内容主要讲解“如何使用JS组件Bootstrap实现弹出框效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用JS组件Bootstrap实现弹出框效果”吧!插件依赖弹出框依赖工具提示插...
    99+
    2023-07-04
  • bootstrap分页插件如何使用
    要使用Bootstrap分页插件，您需要遵循以下步骤：1. 引入Bootstrap的CSS和JavaScript文件。在您的HTML...
    99+
    2023-08-24
    bootstrap
  • Bootstrap中Blazor组件有什么用
    这篇文章主要介绍Bootstrap中Blazor组件有什么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！Bootstrap是什么Bootstrap是目前最受欢迎的前端框架，它是基于 HTML、CSS、JAVASCR...
    99+
    2023-06-09
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作