Bootstrap5 卡片
https://getbootstrap.com/docs/5.3/components/card/
卡片是一种灵活且可扩展的内容容器。它包括了头部和尾部的选项，各种各样的内容，上下文背景颜色，以及强大的显示选项。
可以通过.card 与 .card-body类快速创建一个简单的卡片。
创建基本的卡片
外部包装器需要基类.card，而内容可以放置在 .card-body类修饰的元素内。
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> </head> <body> <div class="container"> <div class="card"> <div class="card-body"> 卡片的内容 </div> </div> </div> <script src="bootstrap5/js/bootstrap.bundle.min.js"></script> </body> </html>
设置卡片固定的宽度：
完整示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> </head> <body> <div class="container"> <div class="card" style="width: 300px;"> <div class="card-body"> 卡片的内容 </div> </div> </div> <script src="bootstrap5/js/bootstrap.bundle.min.js"></script> </body> </html>
页眉和页脚
https://getbootstrap.com/docs/5.3/components/card/#header-and-footer
通过.card-header类添加页眉，.card-footer类添加页脚。
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> </head> <body> <div class="container"> <div class="card" style="width: 300px;"> <div class="card-header">页眉</div> <div class="card-body"> 卡片的内容 </div> <div class="card-footer">页脚</div> </div> </div> <script src="bootstrap5/js/bootstrap.bundle.min.js"></script> </body> </html>
带有标题、文本和链接的卡片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> </head> <body> <div class="container"> <div class="card" style="width: 300px;"> <div class="card-header">页眉</div> <div class="card-body"> <h4 class="card-title">卡片标题</h4> <p class="card-text">卡片的文本</p> <a href="#" class="card-link">卡片链接</a> </div> <div class="card-footer">页脚</div> </div> </div> <script src="bootstrap5/js/bootstrap.bundle.min.js"></script> </body> </html>
卡片图像
https://getbootstrap.com/docs/5.3/components/card/#images
可以给<img>元素添加.card-img-top 类，使图片位于文字上方，添加.card-img-bottom类使图片位于文字下方。
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> </head> <body> <div class="container"> <div class="card" style="width: 300px;"> <div class="card-header">页眉</div> <img src="mudan.png" alt="" class="card-img-top"> <div class="card-body"> <h4 class="card-title">卡片标题</h4> <p class="card-text">卡片的文本</p> <a href="#" class="card-link">卡片链接</a> </div> <div class="card-footer">页脚</div> </div> </div> <script src="bootstrap5/js/bootstrap.bundle.min.js"></script> </body> </html>
图像作为卡片背景
https://getbootstrap.com/docs/5.3/components/card/#image-overlays
将图像转换为卡片的背景，并使用.card-img-overlay类叠加卡片的文字。
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> </head> <body> <div class="container"> <div class="card" style="width: 300px;"> <img src="mudan.png" alt="" class="card-img"> <div class="card-body card-img-overlay"> <h4 class="card-title">卡片标题</h4> <p class="card-text">卡片的文本</p> <a href="#" class="card-link">卡片链接</a> </div> </div> </div> <script src="bootstrap5/js/bootstrap.bundle.min.js"></script> </body> </html>
设置卡片的背景颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> </head> <body> <div class="container"> <div class="card bg-success" style="width: 300px;"> <div class="card-body"> <h4 class="card-title">卡片标题</h4> <p class="card-text">卡片的文本</p> <a href="#" class="card-link">卡片链接</a> </div> </div> </div> <script src="bootstrap5/js/bootstrap.bundle.min.js"></script> </body> </html>
在卡片中添加列表组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> </head> <body> <div class="container"> <div class="card bg-success" style="width: 300px;"> <div class="card-body"> <h4 class="card-title">卡片标题</h4> <p class="card-text">卡片的文本</p> <a href="#" class="card-link">卡片链接</a> <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> </div> </div> <script src="bootstrap5/js/bootstrap.bundle.min.js"></script> </body> </html>
卡片组
https://getbootstrap.com/docs/5.3/components/card/#card-groups
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> </head> <body> <div class="container"> <div class="card-group"> <div class="card bg-primary" style="width: 300px;"> <div class="card-header">这是页眉</div> <div class="card-body"> <h4 class="card-title">卡片标题</h4> <p class="card-text">卡片的文本</p> <a href="#" class="card-link">卡片链接</a> </div> <div class="card-footer">这是页脚</div> </div> <div class="card bg-success" style="width: 300px;"> <div class="card-header">这是页眉</div> <div class="card-body"> <h4 class="card-title">卡片标题</h4> <p class="card-text">卡片的文本</p> <a href="#" class="card-link">卡片链接</a> </div> <div class="card-footer">这是页脚</div> </div> <div class="card bg-info" style="width: 300px;"> <div class="card-header">这是页眉</div> <div class="card-body"> <h4 class="card-title">卡片标题</h4> <p class="card-text">卡片的文本</p> <a href="#" class="card-link">卡片链接</a> </div> <div class="card-footer">这是页脚</div> </div> </div> </div> <script src="bootstrap5/js/bootstrap.bundle.min.js"></script> </body> </html>
相关知识
Bootstrap5 卡片
Bootstrap花店模板
开发卡片
情人节卡片
浪漫卡片
送花卡片咋写,送花卡片内容表白简短
结婚鲜花祝福语卡片简短,鲜花卡片留言
鲜花留言卡片图片
送花卡片写什么,送女朋友的鲜花寄语卡片
送花卡片如何做手工
网址: Bootstrap5 卡片 https://m.huajiangbk.com/newsview2215953.html
| 上一篇: Sex sofa chair f |
下一篇: Is CT or FDG |
