bootstrap的card样式距离底部为30px，太大

2022-01-03 14:26:34

如题

更多相关内容
面对不同寻常的换行需求：Bootstrap Card响应式倒序向下移动（观看尚硅谷Bootstrap视频P5栅格实例的小作业...
2021-01-06 15:13:18
目录视频地址查看bootstrap官方文档引入资源复制Card 查看Migration 搜索Order 实现确定布局计算机换行与列排序最终代码视频地址视频地址戳这：尚硅谷_bootstrap_栅格实例强烈推荐这位老师讲的bootstrap...
目录

视频地址
查看bootstrap官方文档
引入资源
复制Card
查看Migration
搜索Order

实现
确定布局
计算机换行与列排序
最终代码
视频地址

视频地址戳这：尚硅谷_bootstrap_栅格实例

强烈推荐这位老师讲的bootstrap（v3），视频P1~P6有讲到Grid的less源码，里面有大神写代码的思路，虽然现在bootstrap版本已经更新到v5了，但是依然很重要！

简略说一下这个视频的有趣之处~~~~~

在一个即将下班的幸福时刻，客户打来了电话：“喂，小明啊，你这个布局不对啊，是这样，浏览器屏幕缩小的时候，我要第一个格子先换到第二行，下班前交给我吧！”

啊这……开搞呗！想看最终呈现请直接跳转实现。

查看bootstrap官方文档

bootstrap已经更新到版本5 了（但我还是用的v4.3），大家可以参考我的思路看一下怎么去完成老师的小作业~

引入资源

注意：因为bootstrap要用到 jQuery，所以 jquery.min.js必须要在bootstrap.min.js之前（xxxxx.min.js 代表压缩过的资源）。以下介绍的2种方法可选用其一，更详细的介绍可移步官网（需要哪个版本把链接网址里的版本号改一下就行）。
1. 从CDN（Content Delivery Network 内容分发网络）引入
  [面包屑导航：Getting started > Introduction > 找到标题 CSS \ JS]
1. 下载bootstrap资源包
  [面包屑导航：Getting started > Download > 找到按钮 Download]
也可以直接复制引入模板
[面包屑导航：Getting started > Introduction > 找到标题 Starter template]

在这里简单介绍一下meta

来源于百度：meta提供文档最基本的元信息。meta除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定，对搜索引擎营销有重要作用。
```
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
```
- viewport 代表移动端适配
- width=device-width 视区宽度为屏幕宽度
- initial-scale=1 初始缩放比例为1，即不缩放显示原始网页
- shrink-to-fit=no 使以上代码在ios9上生效，但部分编辑器不支持
  
  提示：在meta里不要随意加空格，特别是双引号前后。
复制Card

[面包屑导航：Components > Card > 找到标题 Example]
```
<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
```
为了方便呈现，我去掉了<h5>和<a>标签。

查看Migration

由于老师讲的是v3，而我用的是v4.3，所以就必须要看看版本之间的变化（migration）。

在看 Migration前，梳理一下本实例要用到的相关知识点：
- Bootstrap Grid（bootstrap栅格）:
1. container 容器，保证自适应
2. row 行，bootstrap布局以行呈现
3. col-{breakpoint}-{size} 列，也可叫格，bootstrap把一行分为12格。下面介绍breakpoint和size.
  
  ① breakpoint 代表xs,sm,md,lg,xl，表示各个尺寸屏宽px.
breakpoint（断点） screen width（屏宽范围） device（适用设备）
xs [0,576) 手机、穿戴设备
sm [576,768) 手机
md [768,992) 手机、平板
lg [992,1200) 中屏PC
xl [1200,+∞) 大屏PC

②size 确定某元素占一行12格中的几格，例如：
col-sm-12 表示在屏宽范围为sm时占一行 12/12=1
col-sm-4 表示在屏宽范围为sm时占一行的1/3 4/12=1/3
- 列排序
  给每个格子进行排序。
现在就可以来看 Migration了！

先找Grid，在Migration里有两个Grid system：
- 第1个Grid system说明：这次Grid的改版添加了sm，上文已经介绍。且删去了代码中的xs，即col-xs-6改为col-6.
  
  [面包屑导航：Migration > Summary > Grid system]
- 第2个Grid system说明：把col-{breakpoint}-{modifier}-{size}改为{modifier}-{breakpoint}-{size}，如col-sm-offset-6改为offset-sm-6；
  取消bootstrap v3 列排序的pull、push，改用order，如order-sm-1、order-sm-2…数字越小代表次序越前。
  
  [面包屑导航：Migration > By component > Grid system]
搜索Order

那么order到底怎么用，实在找不到，就直接搜索一下order吧！不知道点哪一个，那就每一个都看一下。本例与Grid相关，看见有Grid system的order，就是它了！

[面包屑导航：Layout > Grid system > Reordering > Order classes]

图中代码顺序是First，Second，Third.
对Second，Third进行排序，Second加了order-12，Third加了order-1.所以在呈现的时候Third就在Second前面了。
最终呈现顺序是First，Third，Second.

基础的东东终于准备完毕，开干吧！！！

实现

确定布局

写col时老师教的按断点从大到小（xl→lg→md→sm）写，但是好像从小到大写也没有什么问题，大家可以自行探索一下是否可行（乱序是一定不行的）。
```
<div class="container">
	<div class="row">
		<div class="col-lg-3 col-md-4 col-sm-6 col-12">
			<div>...</div>
	  	</div>
	</div>
</div>
```
计算机换行与列排序

来一张动图看看计算机的默认换行方式：

屏幕变小时，要把计算机的默认换行方式改成客户期望的换行方式，来一张色彩纷呈的图：

图要是看不过来，那再来一个表格：

总之，就是修改格子的呈现次序。最后写代码的时候注意，order-lg-{size}一定要写在col-lg-{size}之后，order-md-{size}写在col-md-{size}后……依次排列，不可乱序！

最终代码

看一下实现的动图：
```
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" href="vendor/bootstrap.min.css" />
		<style>
			.container{
				margin-top: 20px;
			}
			
			.card{
				margin-top: 20px;
			}
			
			img{
				height: 138px;
			}
			
		</style>
	</head>
	<body>
		<div class="container">
		<div class="row">
			<div class="col-lg-3 order-lg-4 col-md-4 order-md-3 col-sm-6 order-sm-2 order-4">
				<div class="card">
				  <div style="height: 138px;">
				  	<img src="img/bread.jpg" class="card-img-top" alt="...">
				  </div>
				  <div class="card-body">
				    <p class="card-text">第4444444</p>
				  </div>
				</div>
			</div>
			
			<div class="col-lg-3 order-lg-3 col-md-4 order-md-2 col-sm-6 order-sm-1 order-3">
				<div class="card">
				  <div style="height: 138px;">
				  	<img src="img/cake.jpg" class="card-img-top" alt="...">
				  </div>
				  <div class="card-body">
				    <p class="card-text">第3333333</p>
				  </div>
				</div>
			</div>
			
			<div class="col-lg-3 order-lg-2 col-md-4 order-md-1 col-sm-6 order-sm-3 order-2">
				<div class="card">
				  <div style="height: 138px;">
				    <img src="img/cream.jpg" class="card-img-top" alt="...">
				  </div>
				  <div class="card-body">
				    <p class="card-text">第2222222</p>
				  </div>
				</div>
			</div>
			
			<div class="col-lg-3 order-lg-1 col-md-4 order-md-4 col-sm-6 order-sm-4 order-1">
				<div class="card">
			      <div style="height: 138px;">
				    <img src="img/salad.jpg" class="card-img-top" alt="...">
				  </div>
				  <div class="card-body">
				    <p class="card-text">第1111111</p>
				  </div>
				</div>
			</div>
				
		</div>
		</div>
	</body>
	
	<script src="vendor/jquery-3.4.1.min.js"></script>
	<script src="vendor/bootstrap.min.js"></script>
</html>
```
收起
展开全文
bootstrap-html-card-shadow-example:在此项目中，将展示如何实现不同类型的阴影以引导卡。这些示例对您的...
2021-05-28 07:22:12

Bootstrap HTML影子卡示例 :backhand_index_pointing_right: ＆Credits对Samuel Thornton @ codepens的引用在此项目中，将展示如何实现不同类型的阴影以引导卡。这些示例对您的项目进行工作时以及需要参考时可能...

收起
移动端 bootstrap card内容长了自动切掉解决办法？
2021-04-04 21:00:35

三个视频：https://res-static.jwhgzs.com/arch/没问题的1.mp4、https://res-static.jwhgzs.com/arch/没... 问题规律：电脑可以手机不行（分辨率？）示例（出现问题的）...

收起

css

breakpoint（断点）	screen width（屏宽范围）	device（适用设备）
`xs`	[0,576)	手机、穿戴设备
`sm`	[576,768)	手机
`md`	[768,992)	手机、平板
`lg`	[992,1200)	中屏PC
`xl`	[1200,+∞)	大屏PC

bootstrap 卡片card图片布局

千次阅读 2022-02-22 11:48:01

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />...link rel="stylesheet" ...

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>热卖商品分析-xxx热卖单品 V1.0.1</title>
    <link rel="stylesheet" href="../../css/bootstrap.css"/>
    <link rel="stylesheet" href="../../css/bootstrapValidator.css"/>

    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrapValidator.js"></script>

    <style type="text/css">
        .modal-header{
            padding: 0;
        }
        .div-main h3{
            font-size: 14px;
            height:42px;
            line-height: 42px;
            margin: 0;
            padding: 0 80px 0 20px;
        }
        .div-main label{
            margin-left: 0;
            font-weight: 400;
        }
        .div-main {
        }
        .form-control{
            width: 100px;
        }
        .modal-content{
            max-height: 15000px;
            height: auto;
        }
        .form-inline{
            margin-left: 30px;
        }
        .container-item{
            margin-left: 20px;
            margin-right: 20px;
        }
        .list-inline{
            margin-left: 30px;
        }
        .font-item{
            font-size: 13px;
        }
        .img-item{
            width: 203px;
        }
        .li-item{
            cursor: pointer;
            width: 222px;
            height: 300px;
            margin-left: 10px;
        }
        .card {
            margin-left: 10px;
        }
        .div-img{
            height: 100%;
            width: 100%;
            float: left;
            margin-bottom: 10px;
        }
        .span-sale{
            margin-left: 80px;
        }
        .p-desc {
            border: 1px;
            line-height: 30px;
            height: 60px;
            max-height: 60px;
            overflow: hidden;/* 超出的文本隐藏 */
            text-overflow: ellipsis; /* 溢出用省略号显示 */
            display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
            -webkit-box-orient: vertical; /* 这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数 */
            -webkit-line-clamp: 2; /*  从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
        }
    </style>
</head>
<body>
<!--模态框-->
<div class="div-main">
    <div class="modal-content">

        <form id="formId" class="form-inline" role="form" action="/selenium/getskwsalebyclass" method="post">
            <div class="modal-header">
                <h3>商品分析-xxx热卖单品</h3>
            </div>

            <div class="modal-body">
                <div class="form-group">
                    <label class="sr-1" for="goodsClassId">品类：</label>
                    <select class="form-control" id="goodsClassId" name="goodsClass" onchange="selectOnChang(this)">
                        <option value="连衣裙">连衣裙</option>
                        <option value="衬衫">衬衫</option>
                    </select>
                </div>
            </div>
        </form>

        <div class="container-item" id="mainContentDiv">
            <ul class="list-inline" id="mainContentUl">
                <li class="li-item">
                    <div class="card">
                        <div class="div-img">
                            <img class="card-img-top img-item" src="https://img1.vvic.com/upload/1634153146192_501848.png?x-oss-process=image/resize,mfit,h_230,w_230" alt="加载中">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title font-item">
                                <span>￥60</span>
                                <span class="span-sale">销量:129561</span>
                            </h5>
                            <p class="card-text font-item p-desc">实拍 刺绣两件套连衣裙</p>
                        </div>
                    </div>
                </li>
                <li class="li-item">
                    <div class="card">
                        <div class="div-img">
                            <img class="card-img-top img-item" src="https://img1.vvic.com/upload/1634153146192_501848.png?x-oss-process=image/resize,mfit,h_230,w_230" alt="加载中">
                        </div>
                        <div class="card-body">
                            <h5 class="card-title font-item">
                                <span>￥60</span>
                                <span class="span-sale">销量:129561</span>
                            </h5>
                            <p class="card-text font-item p-desc">实拍2021新款春夏季裙子碎花连衣裙女装复古法式显瘦a字小个子</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<script type="text/javascript">
    
    $(
        console.log("$.in")
    );
    
    function selectOnChang(obj) {
        // 构造请求参数
        var goodsClass = obj.options[obj.selectedIndex].value;
        var dataValue = {};
        dataValue.goodsClass = goodsClass;
        var dataParam = {};
        dataParam.data = dataValue;
        dataParam.data = JSON.stringify(dataValue);

        $.ajax({
            url: "/selenium/getskwsalebyclass",
            type: "POST",
            contentType: "application/x-www-form-urlencoded",
            data: dataParam,
            success:function (message) {
                var retJson = JSON.parse(message);
                console.log(retJson);
                var flag = retJson['flag'];
                var total = retJson['total'];
                var mainContentDiv = $("#mainContentUl");
                mainContentDiv.empty();
                if(flag && total > 0){
                    console.log("获取数据成功!");
                    var dataArray = retJson['data'];
                    for(var index in dataArray){
                        var subJson = dataArray[index];
                        var name = subJson['itemName'];
                        var url = subJson['itemPicUrl'];
                        var price = subJson['showPrice'];
                        var sale = subJson['itemSale'];
                        var liStr = "                <li class=\"li-item\">\n" +
                            "                    <div class=\"card\">\n" +
                            "                        <div class=\"div-img\">\n" +
                            "                            <img class=\"card-img-top img-item\" src=\""+url+"\" alt=\"加载中\">\n" +
                            "                        </div>\n" +
                            "                        <div class=\"card-body\">\n" +
                            "                            <h5 class=\"card-title font-item\">\n" +
                            "                                <span>￥"+price+"</span>\n" +
                            "                                <span class=\"span-sale\">销量:"+sale+"</span>\n" +
                            "                            </h5>\n" +
                            "                            <p class=\"card-text font-item\">"+name+"</p>\n" +
                            "                        </div>\n" +
                            "                    </div>\n" +
                            "                </li>";
                        mainContentDiv.append(liStr);
                    }
                }else{
                    console.log("未获取到数据!");
                    mainContentDiv.append("未获取到数据!");
                }
            },
            error:function (message) {
                console.log("提交失败"+JSON.stringify(message));
            }
        });
    }

</script>

</body>
</html>

收起

展开全文

javascript css

Bootstrap -Card卡片

万次阅读 2019-05-08 13:57:29

Bootstrap 提供了一个可伸缩可扩展的内容容器给多种变量和选择。关于卡片是一个灵活的、可扩展的内容容器。它包括用于页眉和页脚的选项、各种各样的内容、上下文背景颜色和强大的显示选项。如果您熟悉Bootstrap 3...

Cards（卡片）

Bootstrap 提供了一个可伸缩可扩展的内容容器给多种变量和选择。

关于

卡片是一个灵活的、可扩展的内容容器。它包括用于页眉和页脚的选项、各种各样的内容、上下文背景颜色和强大的显示选项。如果您熟悉Bootstrap 3，卡将替换我们的旧面板、井和缩略图。与这些组件类似的功能可以作为卡片的修饰符类使用。

例子

卡片是用尽可能少的标记和样式构建的，但仍然能够交付大量的控制和定制。使用flexbox构建，它们提供了简单的对齐和与其他引导组件的良好混合。它们在默认情况下没有空白，所以根据需要使用间距实用程序。
下面是一个混合内容和固定宽度的基本卡片示例。卡片没有固定的起始宽度，因此它们自然会填充其父元素的全部宽度。这是很容易定制与我们的各种大小选项。
在这里插入图片描述

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

内容类型

卡片支持各种各样的内容，包括图像、文本、列表组、链接等等。下面是支持的示例。

主体

卡片的构造块是.card-body。当您需要在卡片中填充部分时，可以使用它。
在这里插入图片描述

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

标题、文本和链接

通过将. Card -title添加到<h*>标记中来使用卡片标题。以同样的方式，通过向标记添加.card-link来添加和放置链接。

通过向<h*>标记添加.card-subtitle来使用字幕。如果.card-title和.card-subtitle项被放置在.card-body项中，那么card title和subtitle就可以很好地对齐。
在这里插入图片描述

演示代码

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</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>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

图像

.card-img-top将图像放在卡片的顶部。使用.card-text，可以将文本添加到卡中。.card- Text中的文本也可以使用标准HTML标记进行样式设计。
在这里插入图片描述

演示代码

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <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>

列表组

在具有刷新列表组的卡片中创建内容列表。
在这里插入图片描述

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

在这里插入图片描述
添加了header。

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

厨房的水槽

混合并匹配多种内容类型来创建您需要的卡片，或者将所有内容都放入其中。下面显示的是图像样式、块、文本样式和列表组—所有这些都包装在固定宽度的卡片中。
在这里插入图片描述

演示代码

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">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>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

页头和页脚

在这里插入图片描述

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Card headers can be styled by adding .card-header to <h*> elements.
头部修饰：
在这里插入图片描述

<h5 class="card-header">Featured</h5>

一个不错的例子

在这里插入图片描述

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

不错的例子2

在这里插入图片描述

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

大小

卡片没有特定的宽度来开始，所以它们将是100%的宽度，除非另有说明。您可以根据需要使用自定义CSS、网格类、网格Sass mixin或实用程序来更改这一点。

通过网格布局来布局我们的标签

在这里插入图片描述

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

使用工具类

使用我们的几个可用的大小工具来快速设置卡片的宽度。
在这里插入图片描述

<div class="card w-75">
  <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-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>

使用自定义的CSS

使用自定义的css到你的样式表中去指定内联样式的宽度。
在这里插入图片描述

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

文本排列

您可以使用我们的text align类快速更改任何卡片的文本对齐方式(包括全部或特定部分)。
在这里插入图片描述

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

导航栏目

使用引导程序的导航组件向卡的头(或块)添加一些导航。
在这里插入图片描述

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

下面header 的样式跟上面的有些许不同。
在这里插入图片描述

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

图像

卡片包括一些处理图像的选项。选择在卡的两端附加“图像帽”，将图像与卡的内容叠加，或简单地将图像嵌入卡中。

图像帽

与页眉和页脚类似，卡片可以包括顶部和底部的“图像帽”——卡片顶部或底部的图像。
在这里插入图片描述

<div class="card mb-3">
  <img src="..." 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">
  <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="..." class="card-img-top" alt="...">
</div>

图像上浮文本

将图像转换为卡片背景并覆盖卡片的文本。根据映像的不同，您可能需要也可能不需要其他样式或实用程序。
在这里插入图片描述

<div class="card bg-dark text-white">
  <img src="..." 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>

注意，内容不应该大于图像的高度。如果内容大于图像，则内容将显示在图像之外。

水平布局

使用网格和实用程序类的组合，卡可以以一种移动友好和响应的方式水平放置。在下面的示例中，我们删除带有.no- guet的网格沟槽，并使用.col-md-*类使卡片在md断点处保持水平。根据您的卡的内容可能需要进一步的调整。
在这里插入图片描述

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." 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>

华丽的卡片样式

背景色和字体颜色

在这里插入图片描述

<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>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary 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>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success 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>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger 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>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning 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>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info 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>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light 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>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark 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>

边框

在这里插入图片描述

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <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>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary 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>

Mixins 实用工具

您还可以根据需要更改卡片页眉和页脚的边框，甚至可以使用.bg-transparent删除它们的背景颜色。
在这里插入图片描述

。。。还有好多，未完待续

收起

展开全文

前端

BootStrap查询条件布局卡片card 面板panel 工具栏标题栏
2022-03-15 11:12:45

卡片card 示例1： <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...

收起

html javascript
[bootstrap]一个简单的bootstrap4的card的demo
千次阅读 2018-12-20 21:09:57

<p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer ...

收起
Bootstrap4速成笔记三 Card Carousel
2020-02-21 19:58:29

目录Card卡片组件Carousel循环显示组件 Card卡片组件一个卡片可以由卡片头，卡片体，卡片尾组成，使用卡片的方法仍然是设置相关类进行操作；首先设置一个div，类为"card"；如若想要文本居中可以加入情景类"text-...

收起

css javascript
bootstrap的.card-columns瀑布流显示列数修改
千次阅读 2020-05-04 11:56:45

bootstrap多列卡片浮动排版可以实现卡片瀑布流显示，官方说明是：將卡片包在.card-columns 中，可以將做出象 Masonry网站的瀑布式排列卡片效果，卡片是使用column属性，而不是基于 flexbox弹性布局，从而实现更...

收起
利用Bootstrap card 制作母亲节小礼物
2020-05-10 23:10:02

谁说程序员不懂浪漫今天就利用Bootstrap中的卡片组件为母亲大人做一组名片。保证让母亲感动到哭。你将会看到妈妈的这个样子（我儿子终于出息了），开不开心激不激动！首先要知道什么是卡片：一张图片会配上一...

收起
bootstrap表格固定表头并且tbody部分添加滚动条
2017-10-24 16:32:48

bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。bootstrap的tbody加竖向滚动条，而且当前表格的表头。

收起
Django学习6-Bootstrap样式：导航栏、表单、card
千次阅读 2018-10-26 23:05:15

Bootstrap的安装 pip install django-bootstrap4安装完成。可以在venv下的lib看到bootstrap4：然后在setting.py中添加bootstrap应用： INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth'...

收起

Django Python
使用Bootstrap 4水平居中动态div.card
2018-11-14 13:20:08

<p>I'm listing articles from a database on a website based on Bootstrap 4. I would like the blocks (div.card) to always be centered horizontally no matter how much there are with a maximum of 3 blocks...

收起

css php sql
Bootstrap中卡的水平滚动列表
2021-07-16 16:09:09

You can simply use flex-row and flex-nowrap: Card Card Card Card ... Update 2019 Bootstrap 4.3+ The above method still works, or you can use the flexbox utils in the container of the cards: ...

收起
react-bootstrap 卡片网格布局
2021-12-23 11:49:46

import { Container, Row, Col, Stack, Form, Button, Alert, ToggleButtonGroup, ToggleButton, ButtonToolbar, ButtonGroup, InputGroup, FormControl, Dropdown, DropdownButton, Card, } from 'react-bootstrap'...

收起

react.js javascript
dash-bootstrap-卡片
2022-01-10 14:42:33

from logging import debug import dash from dash import Input, Output, State ...import dash_bootstrap_components as dbc from dash_bootstrap_components.themes import BOOTSTRAP app = d.

收起

python
BootStrap 卡片
2022-05-08 20:27:53

1.卡片作为一个新式引入到BootStrap 4中，可能样式、标记和扩展属性不会很多（未来会不断扩充发展），但它仍然可以提供许多控制项和定义方法，由于我们使用了flex弹性布局，使得它们可以轻松对齐、并方便的与其它...

收起

html css
Bootstrap组件——卡片
千次阅读 2020-07-29 16:01:39

卡片一、卡片（card）1.基础卡片2.内容类型2.宽度设置3.文本对齐4.导航5. 图像6.文本放在图片身上7.水平排列8.卡片样式9.卡片组一、卡片（card）卡片是一个灵活的、可扩展的内容窗口，同时可以做出多种展示效果...

收起
Bootstrap
2021-07-23 21:20:50

1.Bootstrap 4 页面 1.移动设备优先在网页的 head 之中添加 viewport meta 标签， H2.容器类 .container 类用于固定宽度并支持响应式布局的容器。 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的...

收起
bootstrap-card-layout
2021-03-09 02:01:56

bootstrap-card-layout

收起

HTML

面对不同寻常的换行需求：Bootstrap Card响应式倒序向下移动（观看尚硅谷Bootstrap视频P5栅格实例的小作业...

目录

视频地址

查看bootstrap官方文档

引入资源

复制Card

查看Migration

搜索Order

实现

确定布局

计算机换行与列排序

最终代码

bootstrap-html-card-shadow-example:在此项目中，将展示如何实现不同类型的阴影以引导卡。 这些示例对您的...

移动端 bootstrap card内容长了自动切掉解决办法？

bootstrap 卡片card图片布局

Bootstrap -Card卡片

Cards（卡片）

关于

例子

内容类型

主体

标题、文本和链接

演示代码

图像

演示代码

列表组

厨房的水槽

演示代码

页头和页脚

一个不错的例子

不错的例子2

大小

通过网格布局来布局我们的标签

使用工具类

使用自定义的CSS

文本排列

导航栏目

图像

图像帽

图像上浮文本

水平布局

华丽的卡片样式

背景色和字体颜色

边框

Mixins 实用工具

BootStrap查询条件布局 卡片card 面板panel 工具栏 标题栏

[bootstrap]一个简单的bootstrap4的card的demo

Bootstrap4速成笔记三 Card Carousel

bootstrap的.card-columns瀑布流显示列数修改

利用Bootstrap card 制作母亲节小礼物

bootstrap表格固定表头并且tbody部分添加滚动条

Django学习6-Bootstrap样式：导航栏、表单、card

使用Bootstrap 4水平居中动态div.card

Bootstrap中卡的水平滚动列表

react-bootstrap 卡片网格布局

dash-bootstrap-卡片

BootStrap 卡片

Bootstrap组件——卡片

Bootstrap

bootstrap-card-layout

bootstrap的card

bootstrap-html-card-shadow-example:在此项目中，将展示如何实现不同类型的阴影以引导卡。这些示例对您的...

BootStrap查询条件布局卡片card 面板panel 工具栏标题栏