精华内容
下载资源
问答
  • 2022-01-03 14:26:34

    如题

    更多相关内容
  • 目录 视频地址 查看bootstrap官方文档 引入资源 复制Card 查看Migration 搜索Order 实现 确定布局 计算机换行与列排序 最终代码 视频地址 视频地址戳这:尚硅谷_bootstrap_栅格实例 强烈推荐这位老师讲的bootstrap...

    视频地址

    视频地址戳这:尚硅谷_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格。下面介绍breakpointsize.

      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 列排序pullpush,改用order,如order-sm-1order-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影子卡示例 :backhand_index_pointing_right: &Credits对Samuel Thornton @ codepens的引用 在此项目中,将展示如何实现不同类型的阴影以引导卡。 这些示例对您的项目进行工作时以及需要参考时可能...
  • 三个视频:https://res-static.jwhgzs.com/arch/没问题的1.mp4、https://res-static.jwhgzs.com/arch/没... 问题规律:电脑可以手机不行(分辨率?) 示例(出现问题的)...
  • 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>
    

    展开全文
  • 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删除它们的背景颜色。
    在这里插入图片描述

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

    展开全文
  • 卡片card 示例1: <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
  • <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 ...
  • 目录Card卡片组件Carousel循环显示组件 Card卡片组件 一个卡片可以由卡片头,卡片体,卡片尾组成,使用卡片的方法仍然是设置相关类进行操作;首先设置一个div,类为"card"; 如若想要文本居中可以加入情景类"text-...
  • bootstrap多列卡片浮动排版可以实现卡片瀑布流显示,官方说明是: 將卡片包在.card-columns 中,可以將做出象 Masonry网站的瀑布式排列卡片效果, 卡片是使用column属性,而不是基于 flexbox弹性布局,从而实现更...
  • 谁说程序员不懂浪漫今天 就利用Bootstrap中的卡片组件为母亲大人做一组名片。保证让母亲感动到哭。 你将会看到妈妈的这个样子(我儿子终于出息了),开不开心 激不激动! 首先要知道什么是卡片:一张图片会配上 一...
  • bootstrap的tbody加竖向滚动条,而且当前表格的表头。bootstrap的tbody加竖向滚动条,而且当前表格的表头。bootstrap的tbody加竖向滚动条,而且当前表格的表头。
  • Bootstrap的安装 pip install django-bootstrap4安装完成。可以在venv下的lib看到bootstrap4: 然后在setting.py中添加bootstrap应用: INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth'...
  • <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...
  • 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: ...
  • import { Container, Row, Col, Stack, Form, Button, Alert, ToggleButtonGroup, ToggleButton, ButtonToolbar, ButtonGroup, InputGroup, FormControl, Dropdown, DropdownButton, Card, } from 'react-bootstrap'...
  • 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.
  • BootStrap 卡片

    2022-05-08 20:27:53
    1.卡片作为一个新式引入到BootStrap 4中,可能样式、标记和扩展属性不会很多(未来会不断扩充发展),但它仍然可以提供许多控制项和定义方法,由于我们使用了flex弹性布局,使得它们可以轻松对齐、并方便的与其它...
  • 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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,097
精华内容 2,838
关键字:

bootstrap的card