当前阅读教程:Bootstrap4教程 > 多种颜色卡片 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 头部和底部 | 下一篇: 标题、文本和链接 |
Bootstrap 4 提供了多种卡片的背景颜色类: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。 实例 <div> <h2>多种颜色卡片</h2> <div> <div>Basic card</div> </div> <br> <div class="card bg-primary text-white"> <div>Primary card</div> </div> <br> <div class="card bg-success text-white"> <div>Success card</div> </div> <br> <div class="card bg-info text-white"> <div>Info card</div> </div> <br> <div class="card bg-warning text-white"> <div>Warning card</div> </div> <br> <div class="card bg-danger text-white"> <div>Danger card</div> </div> <br> <div class="card bg-secondary text-white"> <div>Secondary card</div> </div> <br> <div class="card bg-dark text-white"> <div>Dark card</div> </div> <br> <div class="card bg-light text-dark"> <div>Light card</div> </div> </div> 完整代码 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例(小白教程网 2d5.net)</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div> <h2>多种颜色卡片</h2> <div> <div>Basic card</div> </div> <br> <div class="card bg-primary text-white"> <div>Primary card</div> </div> <br> <div class="card bg-success text-white"> <div>Success card</div> </div> <br> <div class="card bg-info text-white"> <div>Info card</div> </div> <br> <div class="card bg-warning text-white"> <div>Warning card</div> </div> <br> <div class="card bg-danger text-white"> <div>Danger card</div> </div> <br> <div class="card bg-secondary text-white"> <div>Secondary card</div> </div> <br> <div class="card bg-dark text-white"> <div>Dark card</div> </div> <br> <div class="card bg-light text-dark"> <div>Light card</div> </div> </div> </body> </html> 效果图 |
|
上一篇: 头部和底部 | 下一篇: 标题、文本和链接 |