<div class="container"><div class="row"><div class="col-lg-4">这样就可以实现了响应式<div class="card">也采用了弹性布局<div class="card-body"><h3 class="card-title">这是卡片的标题</h3><h4 class="card-subtitle mb-3">这是卡片的幅标题</h4><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class</p><a href="#" class="card-link">链接1</a><a href="#" class="card-link">链接2</a>这是两个链接之间有间距，然后就是在第二个a标签上添加了</div></div></div><!-- 图片 --><div class="col-lg-4"><div class="card"><img class="card-img-top" src="images/img_02.jpg" alt=""><div class="card-body"><p class="card-text">这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长</p></div></div></div><!-- 列表组、页眉、页脚 --><div class="col-lg-4"><div class="card"><div class="card-header">这是卡片的头部，也叫页眉</div><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 class="card-footer">这是卡片的底部，也叫页脚</div></div></div></div><!-- 组合模式 --><div class="row mt-5"><div class="col-lg-4"><div class="card"><div class="card-header">陈数</div><img class="card-img-top" src="images/img_03.jpg" alt=""><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><a href="#" class="card-link btn btn-primary">链接1</a><a href="#" class="card-link btn btn-info">链接2</a></div><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 class="card-footer">页脚</div></div></div></div><div class="row mt-5"><div class="col"><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></div></div>尺寸<!-- 宽度设置 --><div class="row mt-5"><div class="card" style="width: 20rem;"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><a href="#" class="card-link btn btn-primary">链接1</a></div></div><!-- 对齐 --><div class="row mt-5"><div class="col-lg-4"><div class="card text-left"><div class="card-body"><h5 class="card-title">左对齐</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><a href="#" class="card-link btn btn-primary">链接1</a></div></div></div><div class="col-lg-4"><div class="card text-center"><div class="card-body"><h5 class="card-title">居中对齐</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><a href="#" class="card-link btn btn-primary">链接1</a></div></div></div><div class="col-lg-4"><div class="card text-right"><div class="card-body"><h5 class="card-title">右对齐</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><a href="#" class="card-link btn btn-primary">链接1</a></div></div></div></div><!-- 导航 --><div class="row mt-5"><div class="card"><div class="card-header"><ul class="nav nav-tabs card-header-tabs"><li class="nav-item"><a href="#" class="nav-link active">Active</a>一个导航</li><li class="nav-item"><a href="#" class="nav-link">Link</a></li><li class="nav-item"><a href="#" class="nav-link">Disabled</a></li></ul></div><div class="card-body"><h5 class="card-title">结合导航</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><a href="#" class="card-link btn btn-primary">链接1</a></div></div></div><!-- 图像 --><div class="row mt-5"><div class="card"><!-- 图片在上边 --><img class="card-img-top" src="images/banner.jpg" alt=""><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><p class="card-text"><small class="text-muted">2 days ago</small></p></div></div><div class="card"><!-- 图片在下边 --><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><p class="card-text"><small class="text-muted">2 days ago</small></p></div><img class="card-img-bottom" src="images/banner.jpg" alt=""></div></div><!-- 文本放在图片身上 --><div class="row mt-5"><div class="card"><img class="card-img-top" src="images/banner.jpg" alt=""><div class="card-img-overlay text-white"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><p class="card-text"><small>2 days ago</small></p></div></div></div><!-- 卡片样式-背景色 --><div class="row mt-5"><div class="col-3"><div class="card text-white bg-primary"><div class="card-header">卡片的头部</div><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div><div class="col-3"><div class="card text-white bg-secondary"><div class="card-header">卡片的头部</div><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div><div class="col-3"><div class="card text-white bg-success"><div class="card-header">卡片的头部</div><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div><div class="col-3"><div class="card text-white bg-danger"><div class="card-header">卡片的头部</div><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div><div class="col-3"><div class="card text-white bg-warning"><div class="card-header">卡片的头部</div><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div><div class="col-3"><div class="card text-white bg-info"><div class="card-header">卡片的头部</div><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div><div class="col-3"><div class="card bg-light"><div class="card-header">卡片的头部</div><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div><div class="col-3"><div class="card text-white bg-dark"><div class="card-header">卡片的头部</div><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div></div><!-- 卡片样式-边框 --><div class="row mt-5"><div class="col-3"><div class="card border-primary"><div class="card-header">卡片的头部</div><div class="card-body text-primary"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div><div class="col-3"><div class="card border-secondary"><div class="card-header">卡片的头部</div><div class="card-body text-secondary"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div><div class="col-3"><div class="card border-success"><div class="card-header">卡片的头部</div><div class="card-body text-success"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div><div class="col-3"><div class="card border-danger"><div class="card-header">卡片的头部</div><div class="card-body text-danger"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div><div class="col-3"><div class="card border-warning"><div class="card-header">卡片的头部</div><div class="card-body text-warning""><h5 class=" card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div><div class="col-3"><div class="card border-info"><div class="card-header">卡片的头部</div><div class="card-body text-info"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div><div class="col-3"><div class="card border-light"><div class="card-header">卡片的头部</div><div class="card-body border-light"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div><div class="col-3"><div class="card border-dark"><div class="card-header">卡片的头部</div><div class="card-body text-dark"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div></div></div></div><!-- 页眉的页脚的边框 --><div class="row mt-5"><div class="col-3"><div class="card border-success"><div class="card-header bg-transparent border-success">卡片的头部</div><div class="card-body text-primary"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p></div><div class="card-footer bg-transparent border-success">卡片的底部</div></div></div></div><!-- 卡片排版-卡片组--> 跟我们的按钮组是一样的<div class="row mt-5 card-group"><div class="card"><img class="card-img-top" src="images/img_03.jpg" alt=""><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><p class="card-text"><small class="text-muted">2 days ago</small></p></div></div><div class="card"><img class="card-img-top" src="images/img_03.jpg" alt=""><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><p class="card-text"><small class="text-muted">2 days ago</small></p></div></div><div class="card"><img class="card-img-top" src="images/img_03.jpg" alt=""><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><p class="card-text"><small class="text-muted">2 days ago</small></p></div></div></div><!-- 卡片排版-卡片之间互不相连的，但是尺寸是一样--><div class="row mt-5 card-deck">也就是卡片之间有间隙，彼此不影响尺寸<div class="card"><img class="card-img-top" src="images/img_03.jpg" alt=""><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><p class="card-text"><small class="text-muted">2 days ago</small></p></div></div><div class="card"><img class="card-img-top" src="images/img_03.jpg" alt=""><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><p class="card-text"><small class="text-muted">2 days ago</small></p></div></div><div class="card"><img class="card-img-top" src="images/img_03.jpg" alt=""><div class="card-body"><h5 class="card-title">这是卡片的标题</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><p class="card-text"><small class="text-muted">2 days ago</small></p></div></div></div><!-- 卡片排版-瀑布流式排列 --> 他们的布局是从上往下的层次不齐的<div class="row mt-5"><div class="card-columns">这样就变成了瀑布流的形式了<div class="card"><img class="card-img-top" src="images/img_03.jpg" alt=""><div class="card-body"><h5 class="card-title">这是卡片的标题1</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><p class="card-text"><small class="text-muted">2 days ago</small></p></div></div><div class="card"><img class="card-img-top" src="images/img_04.jpg" alt=""><div class="card-body"><h5 class="card-title">这是卡片的标题2</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><p class="card-text"><small class="text-muted">2 days ago</small></p></div></div><div class="card"><img class="card-img-top" src="images/img_04.jpg" alt=""><div class="card-body"><h5 class="card-title">这是卡片的标题3</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><p class="card-text"><small class="text-muted">2 days ago</small></p></div></div><div class="card"><img class="card-img-top" src="images/img_04.jpg" alt=""><div class="card-body"><h5 class="card-title">这是卡片的标题4</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class</p><p class="card-text"><small class="text-muted">2 days ago</small></p></div></div><div class="card"><img class="card-img-top" src="images/img_03.jpg" alt=""><div class="card-body"><h5 class="card-title">这是卡片的标题5</h5><p class="card-text">这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一，需要添加一个card-text的class</p><p class="card-text"><small class="text-muted">2 days ago</small></p></div></div></div></div></div>
若有收获，就点个赞吧
0 人点赞
