关键词搜索

源码搜索 ×
×

BootStrap笔记-卡片的使用

发布2022-01-24浏览913次

详情内容

运行截图如下；

 

代码如下：

 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CN_TEST1</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8. <!--    bootstrap css核心文件-->
  9.     <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
  10. <!--    bootstrap使用到了jquery，需要提前引用-->
  11.     <script src="js/jquery-3.5.1.min.js"></script>
  12. <!--    弹窗、提示、下拉菜单-->
  13.     <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
  14. <!--    bootstrap核心文件-->
  15.     <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
  16.  
  17. </head>
  18. <body>
  19.  
  20.     <div class="container-fluid">
  21.  
  22.         <div class="card">
  23.             <div class="card-body">Card</div>
  24.         </div>
  25.  
  26.         <br/>
  27.  
  28.         <div class="card">
  29.             <div class="card-header">Header</div>
  30.             <div class="card-body">Body</div>
  31.             <div class="card-footer">Footer</div>
  32.         </div>
  33.  
  34.         <br/>
  35.  
  36.         <h2>多颜色Card</h2>
  37.         <div class="card">
  38.             <div class="card-body">Basic card</div>
  39.         </div>
  40.         <br/>
  41.         <div class="card">
  42.             <div class="card-body bg-primary text-white">Primary card</div>
  43.         </div>
  44.         <br/>
  45.         <div class="card">
  46.             <div class="card-body bg-success text-white">Success card</div>
  47.         </div>
  48.         <br/>
  49.         <div class="card">
  50.             <div class="card-body bg-info">Info card</div>
  51.         </div>
  52.         <br/>
  53.         <div class="card">
  54.             <div class="card-body bg-warning text-white">Warning card</div>
  55.         </div>
  56.         <br/>
  57.         <div class="card">
  58.             <div class="card-body bg-danger text-white">Danger card</div>
  59.         </div>
  60.         <br/>
  61.         <div class="card">
  62.             <div class="card-body bg badge-secondary text-white">Secondary card</div>
  63.         </div>
  64.         <br/>
  65.         <div class="card">
  66.             <div class="card-body bg-dark text-light">Dark card</div>
  67.         </div>
  68.         <br/>
  69.  
  70. <!--        标题、文本、链接-->
  71.         <div class="card">
  72.             <div class="card-body">
  73.                 <h4 class="card-title">Card Title</h4>
  74.                 <p class="card-text">Hello World</p>
  75.                 <a href="#" class="card-link">link one</a>
  76.                 <a href="#" class="card-link">link two</a>
  77.             </div>
  78.         </div>
  79.  
  80.         <br/>
  81.  
  82. <!--        图片-->
  83.         <div class="card" style="width: 500px">
  84.             <img class="card-img-top" src="pic/it1995.jpg"/>
  85.             <div class="card-body">
  86.                 <h4 class="card-title">Card Title</h4>
  87.                 <p class="card-text">Hello World</p>
  88.                 <a href="#" class="card-link">link one</a>
  89.                 <a href="#" class="card-link">link two</a>
  90.             </div>
  91.         </div>
  92.  
  93.         <br/>
  94.  
  95. <!--        图片设置为背景-->
  96.         <div class="card" style="width: 500px">
  97.             <img class="card-img-top" src="pic/it1995.jpg"/>
  98.             <div class="card-img-overlay">
  99.                 <h4 class="card-title">Card Title</h4>
  100.                 <p class="card-text">Hello World</p>
  101.                 <a href="#" class="card-link">link one</a>
  102.                 <a href="#" class="card-link">link two</a>
  103.             </div>
  104.         </div>
  105.  
  106.     </div>
  107.  
  108. </body>
  109. </html>

解释：

①在div中先添加card类，在到内部的div中设置card-body，就能创建卡片了；

②卡片通常分为三个部分分别是：card-header、card-body、card-footer；

③图片卡片里面，在img中添加card-img-top和card-img-bottom设置图片在文字的什么地方。

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载