首页bootstrap上下两行卡片每行三个卡片由图片和文字构成怎么写代码

bootstrap上下两行卡片每行三个卡片由图片和文字构成怎么写代码

时间: 2024-10-20 09:02:58 浏览: 19

Bootstrap中创建两行三列的卡片布局，你可以使用`card`、`row`和`col-md-4`等响应式网格系统组件。假设每个卡片由图片（img）和标题（h3或p）组成，这里是一个基本示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Bootstrap Card Layout</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row">  <div class="col-md-4 mb-4"> <div class="card"> <img src="图片路径1" alt="图片描述1" class="card-img-top"> <div class="card-body"> <h3 class="card-title">卡片标题1</h3> <p class="card-text">这是卡片内容1...</p> </div> </div> </div>  </div> <div class="row mt-4">   <div class="col-md-4 mb-4"> <div class="card"> <img src="图片路径2" alt="图片描述2" class="card-img-top"> <div class="card-body"> <h3 class="card-title">卡片标题2</h3> <p class="card-text">这是卡片内容2...</p> </div> </div> </div>  </div> </div> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script> </body> </html> ``` 记得替换`图片路径1`, `图片路径2`以及实际的卡片标题和内容。如果你需要自适应屏幕大小，可以考虑使用媒体查询调整布局。

阅读全文