Bootstrap的卡片组件相关知识

news2024/11/19 19:45:05

Bootstrap的卡片组件

01-卡片介绍及常用场合

Bootstrap的卡片组件（Card）是一种常用的UI元素，或者也可称为一种常用的结构，用于呈现信息和内容，通常在网页和应用程序中用于以下情况：

  1. 博客文章和新闻文章： 卡片可以用来显示博客文章、新闻文章或其他类似的内容。您可以在卡片内包含文章标题、摘要、作者信息、发布日期和文章图片等。

  2. 产品展示： 电子商务网站经常使用卡片来展示产品信息。每个产品都可以在一个独立的卡片中显示，包括产品名称、价格、描述和产品图像。

  3. 用户配置文件： 用户配置文件通常以卡片的形式呈现，包括用户头像、姓名、简介、联系信息等。

  4. 社交媒体帖子： 社交媒体网站常使用卡片来展示用户的帖子、图片和评论。每个帖子可以在一个卡片中显示，包括帖子文本、图片、点赞和评论等。

  5. 任务和待办事项： 卡片可以用于显示任务、待办事项或提醒事项的列表。每个任务可以在一个卡片中显示，包括任务描述、截止日期和状态。

  6. 产品特性和服务： 公司网站通常使用卡片来展示其产品特性或提供的服务。每个特性或服务可以在一个独立的卡片中详细介绍。

  7. 画廊和图库： 图片画廊和图库常使用卡片来展示图片集。每张图片可以在一个卡片中显示，包括图像、标题和描述。

Bootstrap的卡片组件提供了丰富的样式和排版选项，使您可以轻松地自定义卡片的外观和布局，以适应不同的需求和设计风格。卡片通常用于创建信息块，使内容更具吸引力和可读性。这些卡片可以以单个卡片的形式出现，也可以作为多个卡片的列表或网格排列。

02-一个简单的卡片使用示例

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>卡片</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">定义卡片</h3>
<div class="container">
    <div class="card">
        <h1 class="card-title">卡片标题</h1>
        <h5 class="card-subtitle text-muted">小标题</h5>
        <div class="card-body">
            <p class="card-text">卡片主体内容</p>
            <a href="#" class="card-link">注册</a>
            <a href="#" class="card-link">登录</a>
        </div>
    </div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

03-设置卡片中的图片

03-1-设置卡片顶部的图片

类card-img-top定义一张图片中卡片的顶部。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>卡片中的图像</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">卡片中的图像</h3>
<div class="card float-left" style="width: 25rem;">
    <img src="1.jpg" class="card-img-top" alt="">
    <div class="card-body">
        <p class="card-text">苹果营养价值很高，富含矿物质和维生素，含钙量丰富，有助于代谢掉体内多余盐分，苹果酸可代谢热量，防止肥胖。</p>
    </div>
</div>
</body
</html>

运行效果如下：
在这里插入图片描述

03-2-设置卡片的背景图片

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图像背景</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">图像背景</h3>
<div class="card bg-dark text-white">
    <img src="2.jpg" class="card-img" alt="">
    <div class="card-img-overlay">
    <h3 class="card-title">黄鹤楼送孟浩然之广陵</h3>
    <p class="card-text">故人西辞黄鹤楼，烟花三月下扬州。</p>
    <p class="card-text">孤帆远影碧空尽，唯见长江天际流。</p>
    </div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

04-卡片列表组效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>卡片列表组效果</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">卡片列表组效果</h3>
<div class="card">
    <div class="card-header">商品类别</div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">1. 洗衣机</li>
        <li class="list-group-item">2. 冰箱</li>
        <li class="list-group-item">3. 空调</li>
        <li class="list-group-item">4. 电视机</li>
    </ul>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

05-设置卡片的页眉和页脚

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页眉和页脚</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">卡片的页眉和页脚</h3>
<div class="card text-center">
    <div class="card-header">热门课程</div>
    <div class="card-body">
        <h5 class="card-title">热门训练营</h5>
        <p class="card-text">1. 网络安全训练营</p>
        <p class="card-text">2. 网站开发训练营</p>
        <p class="card-text">3. 智能开发训练营</p>
        <p class="card-text">4. Java开发训练营</p>
        <a href="#" class="btn btn-primary">报名课程</a>
    </div>
    <div class="card-footer">打造经典课程</div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

06-设置卡片的宽度

卡片没有固定宽度。默认情况下，卡片的真实宽度是100%。可以根据需要使用网格系统、宽度类或自定义CSS样式来设置卡片的宽度。

06-1-使用网格系统控制卡片的宽度

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>控制卡片的宽度</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
    <h2 align="center">使用网格系统控制卡片的宽度</h2>
    <div class="row">
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header">热门课程</div>
                <div class="card-body">网络安全训练营</div>
                <div class="card-footer">打造经典课程</div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="card">
                <div class="card-header">热门课程</div>
                <div class="card-body">网站开发训练营</div>
                <div class="card-footer">打造经典课程</div>
            </div>
        </div>
    </div>
</body>
</html>

运行效果如下：
在这里插入图片描述

06-2-使用宽度类控制卡片的宽度

可以使用Bootstrap的宽度类 w-* 设置卡片的宽度。可以选择的宽度类包括 w-25、w-50、w-75、和w-100。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用宽度类w-50控制卡片的宽度</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 align="center">使用宽度类w-50控制卡片的宽度</h2>
	<div class="card w-50 float-left">
		<div class="card-header">热门课程</div>
		<ul class="list-group list-group-flush">
			<li class="list-group-item">1. 网络安全训练营</li>
			<li class="list-group-item">2. 网站开发训练营</li>
			<li class="list-group-item">3. 人工智能开发训练营</li>
		</ul>
		<div class="card-footer">打造经典课程</div>
	</div>
	<div class="card w-50 float-left">
		<div class="card-header">经典教材</div>
		<ul class="list-group list-group-flush">
			<li class="list-group-item">1. 网站安全开发系列教材</li>
			<li class="list-group-item">2. 网站开发系列教材</li>
			<li class="list-group-item">3. 人工智能开发系列教材</li>
		</ul>
		<div class="card-footer">打造经典教材</div>
	</div>	
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

06-3-使用CSS样式来控制卡片的宽度

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>控制卡片的宽度</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
    <h2 align="center">使用CSS样式来控制卡片的宽度</h2>
    <div class="card mb-3" style="width: 15rem">
        <div class="card-body">卡片主体的宽度（15rem）</div>
    </div>
    <div class="card mb-3" style="width: 20rem">
        <div class="card-body">卡片主体的宽度（20rem）</div>
    </div>
    <div class="card" style="width: 40rem">
        <div class="card-body">卡片主体的宽度（40rem）</div>
    </div>
</body>
</html>

运行效果如下：
在这里插入图片描述

07-卡片中的文本的对齐方式

使用Bootstrap中的文本对齐类 text-center、text-center 、text-right可以设置卡片中内容的对齐方式。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本的对齐方式</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2 align="center">文本的对齐方式</h2>
<div>
    <div class="card-header text-left ">页眉(左对齐)</div>
    <div class="card-body text-center ">卡片的主体(居中对齐)</div>
    <div class="card-footer text-right ">页脚(右对齐)</div>
</div>
</body
</html>

运行效果如下：
在这里插入图片描述

08-在卡片中添加导航菜单

关于导航菜单的相关知识，可以参考下面两篇博文：
https://blog.csdn.net/wenhao_ir/article/details/133819035
https://blog.csdn.net/wenhao_ir/article/details/133901596
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加标签导航</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">添加标签导航</h3>
<div class="card ">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item">
                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#nav1">家用电器</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#nav2">数码相机</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#nav3">手机电脑</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#nav4">办公设备</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#nav5">水果特产</a>
            </li>
        </ul>
    </div>
    <div class="card-body tab-content">
        <div class="tab-pane fade show active" id="nav1">
            <div class="card-body">
                <h5 class="card-title">家用电器</h5>
                <p class="card-text"><input type="text" class="form-control"></p>
                <a href="#" class="btn btn-primary">搜索</a>
            </div>
        </div>
        <div class="tab-pane fade" id="nav2">
            <div class="card-body">
                <h5 class="card-title">数码相机</h5>
                <p class="card-text"><input type="text" class="form-control"></p>
                <a href="#" class="btn btn-primary">搜索</a>
            </div>
        </div>
        <div class="tab-pane fade" id="nav3">
            <div class="card-body">
                <h5 class="card-title">手机电脑</h5>
                <p class="card-text"><input type="text" class="form-control"></p>
                <a href="#" class="btn btn-primary">搜索</a>
            </div>
        </div>
        <div class="tab-pane fade" id="nav4">
            <div class="card-body">
                <h5 class="card-title">办公设备</h5>
                <p class="card-text"><input type="text" class="form-control"></p>
                <a href="#" class="btn btn-primary">搜索</a>
            </div>
        </div>
        <div class="tab-pane fade" id="nav5">
            <div class="card-body">
                <h5 class="card-title">水果特产</h5>
                <p class="card-text"><input type="text" class="form-control"></p>
                <a href="#" class="btn btn-primary">搜索</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述
在这里插入图片描述

09-设置卡片的背景颜色

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>卡片的背景颜色</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">卡片的背景颜色</h3>
<div class="card text-white bg-primary mb-3">
    <div class="card-header">这里是bg-primary</div>
</div>
<div class="card text-white bg-secondary mb-3">
    <div class="card-header">这里是 bg-secondary</div>
</div>
<div class="card text-white bg-success mb-3">
    <div class="card-header">这里是bg-success</div>
</div>
<div class="card text-white bg-danger mb-3">
    <div class="card-header">这里是bg-danger</div>
</div>
<div class="card text-white bg-warning mb-3">
    <div class="card-header">这里是bg-warning</div>
</div>
<div class="card text-white bg-info mb-3">
    <div class="card-header">这里是bg-info</div>
</div>
<div class="card text-dark bg-light mb-3">
    <div class="card-header">这里是bg-light</div>
</div>
<div class="card text-white bg-dark mb-3">
    <div class="card-header">这里是bg-dark</div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

10-设置卡片的边框颜色

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>卡片的边框颜色</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">卡片的边框颜色</h3>
<div class="card border-primary mb-3">
    <div class="card-header text-primary"> border-primary边框颜色</div>
</div>
<div class="card border-secondary mb-3">
    <div class="card-header text-secondary"> border-secondary边框颜色</div>
</div>
<div class="card border-success mb-3">
    <div class="card-header text-success"> border-success边框颜色</div>
</div>
<div class="card border-danger mb-3">
    <div class="card-header text-danger">border-danger边框颜色</div>
</div>
<div class="card border-warning mb-3">
    <div class="card-header text-warning"> border-warning边框颜色</div>
</div>
<div class="card border-info mb-3">
    <div class="card-header text-info"> border-info边框颜色</div>
</div>
<div class="card border-light mb-3">
    <div class="card-header"> border-light边框颜色</div>
</div>
<div class="card border-dark mb-3">
    <div class="card-header text-dark"> border-dark边框颜色</div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

11-多卡片的排版

11-1-卡片组

使用卡片组的类card-group可将多个卡片结为一个群组，使它们具有相同的宽度和高度。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>卡片组</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">卡片组排版</h3>
<div class="card-group">
    <div class="card">
        <img src="3.jpg" class="card-img-top" >
        <div class="card-body">
            <h5 class="card-title">网络安全训练营</h5>
            <p class="card-text"> 从零基础快速入门网络安全,一套课程带你掌握网络安全技术。侧重实际操作。 </p>
        </div>
        <div class="card-footer">
            <small>打造经典课程</small>
        </div>
    </div>
    <div class="card">
        <img src="4.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">网站开发训练营</h5>
            <p class="card-text"> 从零基础快速入门网站开发,一套课程带你掌握网站开发技术。侧重实际操作。</p>
        </div>
        <div class="card-footer">
            <small>打造经典课程</small>
        </div>
    </div>
    <div class="card">
        <img src="5.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">Java开发训练营</h5>
            <p class="card-text">从零基础快速入门Java开发,一套课程带你掌握Java开发技术。侧重实际操作。</p>
        </div>
        <div class="card-footer">
            <small>打造经典课程</small>
        </div>
    </div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

11-2-卡片阵列

如果需要一套相互不相连，但宽度和高度相同的卡片，可以使用卡片阵列来实现。
相关的类是：card-deck
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用卡片阵列排版</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">使用卡片阵列排版</h3>
<div class="card-deck">
    <div class="card">
        <img src="3.jpg" class="card-img-top" >
        <div class="card-body">
            <h5 class="card-title">网络安全训练营</h5>
            <p class="card-text"> 从零基础快速入门网路安全,一套课程带你掌握网络安全技术。侧重实际操作。 </p>
        </div>
        <div class="card-footer">
            <small>打造经典课程</small>
        </div>
    </div>
    <div class="card">
        <img src="4.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">网站开发训练营</h5>
            <p class="card-text"> 从零基础快速入门网站开发,一套课程带你掌握网站开发技术。侧重实际操作。</p>
        </div>
        <div class="card-footer">
            <small>打造经典课程</small>
        </div>
    </div>
    <div class="card">
        <img src="5.jpg" class="card-img-top">
        <div class="card-body">
            <h5 class="card-title">Java开发训练营</h5>
            <p class="card-text">从零基础快速入门Java开发,一套课程带你掌握Java开发技术。侧重实际操作。</p>
        </div>
        <div class="card-footer">
            <small>打造经典课程</small>
        </div>
    </div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

11-3-多列卡片浮动排版(瀑布流效果)

将卡片包在类card-columns中，可以将卡片设计成浮动排版，浮动排版的顺序 是从上到下、从左到右，从而实现瀑布流的效果。
示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>多列卡片</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2 align="center">多列卡片浮动排版</h2>
<div class="card-columns">
    <div class="card bg-primary p-3">
        <img src="1.png" class="card-img-top">
    </div>
    <div class="card bg-dark p-3">
        <img src="2.png " class="card-img-top">
    </div>
    <div class="card bg-info p-3">
        <img src="3.png " class="card-img-top">
    </div>
    <div class="card bg-light p-3">
        <img src="4.png " class="card-img-top" >
    </div>
    <div class="card bg-success p-3">
        <img src="5.png " class="card-img-top" >
    </div>
    <div class="card bg-danger p-3">
        <img src="6.png " class="card-img-top" >
    </div>
    <div class="card bg-secondary p-3">
        <img src="7.png" class="card-img-top">
    </div>
    <div class="card bg-warning p-3">
        <img src="8.png" class="card-img-top">
    </div>
</div>
</body>
</html>

运行效果如下：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1120225.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux自有服务与软件包管理

Linux自有服务与软件包管理

服务是一些特定的进程&#xff0c;自有服务就是系统开机后就自动运行的一些进程&#xff0c;一旦客户发出请求&#xff0c;这些进程就自动为他们提供服务&#xff0c;windows系统中&#xff0c;把这些自动运行的进程&#xff0c;称为"服务" 举例&#xff1a;当我们使…
阅读更多...
经管博士科研基础【27】如何判断正定矩阵或者负定矩阵？

经管博士科研基础【27】如何判断正定矩阵或者负定矩阵？

在【26】一章中，我们学习到可以通过判断海塞矩阵是正定矩阵或负定矩阵来判断函数的极值问题，为此，我们今天就回顾一下怎么判断海塞矩阵或者说任意一个矩阵是一个正定矩阵或者负定矩阵。 一、正定矩阵的定义 其实，我们可以看到上面的任意非零向量x可以更换为“单位向量”。…
阅读更多...
多继承的实例介绍

多继承的实例介绍

一、多继承同名覆盖 子类中的成员与父类中的成员同名问题&#xff0c;通过作用域分辨符&#xff08;&#xff1a;&#xff1a;&#xff09;进行限定类的访问&#xff0c;从而实现对不同类中的同名成员各自赋值。 #include<iostream> using namespace std; class A{//父…
阅读更多...
一起学数据结构（10）——排序

一起学数据结构（10）——排序

从本文开始&#xff0c;通过若干篇文章展开对于数据结构中——排序的介绍。 1. 排序的概念&#xff1a; 将一堆杂乱无章的数据&#xff0c;通过一定的规律顺序排列起来。即将一个无序序列排列成一个有序序&#xff08;由小到大或者由大到小&#xff09;的运算。 在数据的排序中…
阅读更多...
小微企业需要认定吗？怎么认定？

小微企业需要认定吗？怎么认定？

小微企业在方便人民群众生活&#xff0c;解决就业&#xff0c;活跃市场经济方面发挥了巨大作用。我国对小微企业也有相应的划分标准和税收优惠政策&#xff0c;那么小微企业需要认定吗&#xff1f;认定小微企业需要哪些资料&#xff1f;下面玖邀开业小编给大家做一个简单说明。…
阅读更多...
BUUCTF N种方法解决 1

BUUCTF N种方法解决 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 下载附件&#xff0c;解压得到一个.exe文件 密文&#xff1a; 解题思路&#xff1a; 1、双击.exe文件&#xff0c;出现一个错误&#xff0c;切换其他的方法。 2、将KEY.exe文件放到010 Editor&#xff0c;分析这个…
阅读更多...
Delphi : 在 SDK 管理器中添加其他 iOS 框架

Delphi : 在 SDK 管理器中添加其他 iOS 框架

在用Delphi开发IOS程序时&#xff0c;有时候需要添加其他的iOS框架&#xff0c;也就是说在默认的SDK中没有包含的iOS框架&#xff08;frameworks&#xff09;。 如果您希望利用 Delphi 提供支持之外的 iOS 框架&#xff0c;则需要在 SDK 管理器中添加框架的路径。 为此&#…
阅读更多...
使用Python打造微信高效自动化操作教程

使用Python打造微信高效自动化操作教程

引言 在如今数字化时代&#xff0c;人们对于效率的追求越来越强烈&#xff0c;尤其是在工作和学习中。自动化操作成为了提高生产力的有效途径之一&#xff0c;而PyAutoGUI和Pyperclip作为Python中的两个强大库&#xff0c;为我们实现自动化操作提供了便利。本文将向大家介绍如…
阅读更多...
抖音热搜榜：探索热门话题的奥秘

抖音热搜榜：探索热门话题的奥秘

抖音热搜榜是抖音平台根据用户观看、点赞、评论、分享等行为数据&#xff0c;综合计算得出的热门话题排行榜。它反映了当前平台上最热门、最受欢迎的话题和内容。抖音热搜榜有以下几个作用和意义&#xff1a; 1. 满足用户需求&#xff1a;抖音热搜榜为用户提供了丰富的热门话题…
阅读更多...
前端如何直接上传文件夹

前端如何直接上传文件夹

前面写了一篇仿写el-upload组件&#xff0c;彻底搞懂文件上传&#xff0c;实现了选择/拖拽文件上传&#xff0c;我们经常看到一些网站支持直接选择整个文件夹上传&#xff0c;例如&#xff1a;宝塔面板、cloudflare托管、对象存储网站等等需要模拟文件路径存储文件的场景。那是…
阅读更多...
每日刷题|贪心算法初识

每日刷题|贪心算法初识

食用指南&#xff1a;本文为作者刷题中认为有必要记录的题目 推荐专栏&#xff1a;每日刷题 ♈️今日夜电波&#xff1a;悬溺—葛东琪 0:34 ━━━━━━️&#x1f49f;──────── 3:17 &#x1f…
阅读更多...
递福巴士是不是骗局呢？

递福巴士是不是骗局呢？

递福巴士的背景介绍 递福巴士是社区服务机构软件。递福巴士是一家提供公益服务的平台&#xff0c;为社区居民提供各种服务和支持的软件。多年来&#xff0c;递福巴士一直致力于社区服务和社会公益&#xff0c;积极推动社区的发展&#xff0c;改善社区居民的生活质量。 递福巴士…
阅读更多...
震坤行、西域和京东工业三大工业电商平台API接口详解和说明

震坤行、西域和京东工业三大工业电商平台API接口详解和说明

一、震坤行 震坤行是中国领先的B2B电子商务平台之一&#xff0c;主要面向全国的制造商、供应商和采购商&#xff0c;提供物流、供应链等。万邦科技联手震坤行&#xff0c;全面拓展电商业务。电商数据API接口平台新增震坤行接口&#xff0c;可帮助客户轻松查询震坤行网站上的商…
阅读更多...
Leetcode—34.在排序数组中查找元素的第一个和最后一个位置【中等】

Leetcode—34.在排序数组中查找元素的第一个和最后一个位置【中等】

2023每日刷题&#xff08;六&#xff09; Leetcode—34.在排序数组中查找元素的第一个和最后一个位置 实现代码 /*** Note: The returned array must be malloced, assume caller calls free().*/ int lower_bound(int *arr, int numsSize, int target) {// 左闭右开区间[lef…
阅读更多...
Windows 下载编译chromium源码

Windows 下载编译chromium源码

前言 本文介绍如何下载并编译chromium源码。相关前置条件可参考官方文档。 环境 &#xff1a; Windows 11VS 2022 环境设置 打开cmd&#xff0c;设置代理 set http_proxyhttp://127.0.0.1:7890 & set https_proxyhttp://127.0.0.1:7890注意&#xff1a;使用cmd命令行…
阅读更多...
设计链表复习

设计链表复习

设计链表 class ListNode {int val;ListNode next;public ListNode() {}public ListNode(int val) {this.val val;}public ListNode(int val, ListNode next) {this.val val;this.next next;}}class MyLinkedList {//size存储链表元素的个数int size;//虚拟头节点ListNode…
阅读更多...
十四天学会C++之第七天：STL（标准模板库）

十四天学会C++之第七天：STL（标准模板库）

1. STL容器 什么是STL容器&#xff0c;为什么使用它们。向量&#xff08;vector&#xff09;&#xff1a;使用向量存储数据。列表&#xff08;list&#xff09;&#xff1a;使用列表实现双向链表。映射&#xff08;map&#xff09;&#xff1a;使用映射实现键值对存储。 什么…
阅读更多...
Swin Transformer V2 Scaling Up Capacity and Resolution（CVPR2022）

Swin Transformer V2 Scaling Up Capacity and Resolution（CVPR2022）

文章目录 AbstractIntroduction不稳定性问题下游任务需要的高分辨率问题解决内存问题- Related WorksLanguage networks and scaling upVision networks and scaling upTransferring across window / kernel resolution Swin Transformer V2Swin Transformer简介Scaling Up Mod…
阅读更多...
使用TensorRT-LLM进行高性能推理

使用TensorRT-LLM进行高性能推理

LLM的火爆之后&#xff0c;英伟达(NVIDIA)也发布了其相关的推理加速引擎TensorRT-LLM。TensorRT是nvidia家的一款高性能深度学习推理SDK。此SDK包含深度学习推理优化器和运行环境,可为深度学习推理应用提供低延迟和高吞吐量。而TensorRT-LLM是在TensorRT基础上针对大模型进一步…
阅读更多...
LeetCode2409——统计共同度过的日子数

LeetCode2409——统计共同度过的日子数

博主的解法过于冗长&#xff0c;是一直对着不同的案例debug修改出来的&#xff0c;不建议学习。虽然提交成功了&#xff0c;但是自己最后都不知道写的是啥了哈哈哈。 package keepcoding.leetcode.leetcode2409; /*Alice 和 Bob 计划分别去罗马开会。给你四个字符串 arriveA…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023