一、卡片
1.1 简单的卡片
我们可以通过 Bootstrap5 的 .card 与 .card-body 类来创建一个简单的卡片，卡片可以包含头部、内容、底部以及各种颜色设置，实例如下:
<div class="container mt-3"> <h2>简单的卡片</h2> <div class="card"> <div class="card-body">简单的卡片</div> </div> </div>
1.2 头部和底部
.card-header类用于创建卡片的头部样式， .card-footer 类用于创建卡片的底部样式：
<div class="container mt-3"> <h2>卡片头部和底部</h2> <div class="card"> <div class="card-header">头部</div> <div class="card-body">内容</div> <div class="card-footer">底部</div> </div> </div>
1.3 多种颜色卡片
Bootstrap 5 提供了多种卡片的背景颜色类： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
<div class="container mt-3"> <h2>多种颜色卡片</h2> <div class="card"> <div class="card-body">基础卡片</div> </div> <br> <div class="card bg-primary text-white"> <div class="card-body">主要卡片</div> </div> <br> <div class="card bg-success text-white"> <div class="card-body">成功卡片</div> </div> <br> <div class="card bg-info text-white"> <div class="card-body">信息卡片</div> </div> <br> <div class="card bg-warning text-white"> <div class="card-body">警告卡片</div> </div> <br> <div class="card bg-danger text-white"> <div class="card-body">危险卡片</div> </div> <br> <div class="card bg-secondary text-white"> <div class="card-body">次要卡片</div> </div> <br> <div class="card bg-dark text-white"> <div class="card-body">黑色卡片</div> </div> <br> <div class="card bg-light text-dark"> <div class="card-body">浅色卡片</div> </div> </div>
1.4 标题、文本和链接
我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-body 类用于设置卡片正文的内容。.card-text 类用于设置卡 .card-body 类中的
标签，如果说最后一行可以移除底部边
距。 .card-link 类用于给链接设置颜色。
<div class="container mt-3"> <h2>标题、文本和链接</h2> <div class="card"> <div class="card-body"> <h4 class="card-title">Card title</h4> <p class="card-text">Some example text. Some example text.</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> </div>
1.5 图片卡片
我们可以给 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片：
<div class="container mt-3"> <h2>图片卡片</h2> <p>图片在头部 (card-img-top):</p> <div class="card" style="width:400px"> <img class="card-img-top" src="https://static.jyshare.com/images/mix/img_avatar.png" alt="Card image" style="width:100%"> <div class="card-body"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div> <br> <p>图片在底部(card-img-bottom):</p> <div class="card" style="width:400px"> <div class="card-body"> <h4 class="card-title">Jane Doe</h4> <p class="card-text">Some example text some example text. Jane Doe is an architect and engineer</p> <a href="#" class="btn btn-primary">See Profile</a> </div> <img class="card-img-bottom" src="https://static.jyshare.com/images/mix/img_avatar.png" alt="Card image" style="width:100%"> </div> </div>
如果图片要设置为背景，可以使用 .card-img-overlay 类:
<div class="container mt-3"> <h2>文字覆盖图片</h2> <p>如果图片要设置为背景，可以使用 .card-img-overlay 类:</p> <div class="card img-fluid" style="width:500px"> <img class="card-img-top" src="./img/bootstrap.png" alt="Card image" style="width:100%"> <div class="card-img-overlay"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div> </div>
二、下拉菜单
2.1 创建下拉菜单
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单
<div class="container mt-3"> <h2>Dropdowns</h2> <p>.dropdown 类用来指定一个下拉菜单。</p> <p>.dropdown-menu 类来设置实际下拉菜单。</p> <p>我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。</p> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> 下拉菜单按钮 </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">链接 1</a></li> <li><a class="dropdown-item" href="#">链接 2</a></li> <li><a class="dropdown-item" href="#">链接 3</a></li> </ul> </div> </div>
2.2 下拉菜单中的分割线
.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线：
<div class="container mt-3"> <h2>下拉菜单中的分割线</h2> <p>.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线：</p> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> 下拉菜单按钮 </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">链接 1</a></li> <li><a class="dropdown-item" href="#">链接 2</a></li> <li><a class="dropdown-item" href="#">链接 3</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">链接 4</a></li> </ul> </div> </div>
2.3 下拉菜单中的标题
.dropdown-header 类用于在下拉菜单中添加标题：
<div class="container mt-3"> <h2>下拉菜单</h2> <p>.dropdown-header 类用于在下拉菜单中添加标题：</p> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> 下拉菜单按钮 </button> <ul class="dropdown-menu"> <li><h5 class="dropdown-header">标题 1</h5></li> <li><a class="dropdown-item" href="#">链接 1</a></li> <li><a class="dropdown-item" href="#">链接 2</a></li> <li><a class="dropdown-item" href="#">链接 3</a></li> <li><h5 class="dropdown-header">标题 2</h5></li> <li><a class="dropdown-item" href="#">链接 4</a></li> </ul> </div> </div>
2.4 下拉菜单中的可用项与禁用项
.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。
如果要禁用下拉菜单的选项，可以使用.disabled 类。
<div class="container mt-3"> <h2>下拉菜单</h2> <p>.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。</p> <p>如果要禁用下拉菜单的选项，可以使用.disabled 类。</p> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> 下拉菜单 </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">常规项</a></li> <li><a class="dropdown-item active" href="#">激活项</a></li> <li><a class="dropdown-item disabled" href="#">禁用项</a></li> </ul> </div> </div>
2.5 下拉菜单的定位
如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown 类后添加 .dropend 或 .dropstart 类。
.dropend 是右对齐， .dropstart 是左对齐。
<div class="container mt-3"> <h2>下拉菜单</h2> <p>如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown 类后添加 .dropend 类。</p> <div class="dropdown dropend"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> 右边显示菜单 </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">常规项</a></li> <li><a class="dropdown-item active" href="#">激活项</a></li> <li><a class="dropdown-item disabled" href="#">禁用项</a></li> </ul> </div> <p>如果我们想让下拉菜单左边对齐，可以在元素上的 .dropdown 类后添加 .dropstart 类，同时我们将整个下拉菜单向右浮动。</p> <div class="dropdown dropstart text-end"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> 左边显示菜单 </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">常规项</a></li> <li><a class="dropdown-item active" href="#">激活项</a></li> <li><a class="dropdown-item disabled" href="#">禁用项</a></li> </ul> </div> </div>
2.6 下拉菜单弹出方向设置
下拉菜单弹出方向默认为向下，当然我们也可以设置不同的方向。
2.6.1 指定向右弹出的下拉菜单
如果你希望下拉菜单向右下方弹出，可以在 div 元素上添加 .dropdown-menu-end 类:
<div class="container mt-3"> <h2>下拉菜单</h2> <p>在 .dropdown-menu 类后面添加 .dropdown-menu-end 类，让下拉菜单向右下方弹出：</p> <div class="dropdown dropdown-menu-end"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> 下拉菜单右下方弹出 </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">链接 1</a></li> <li><a class="dropdown-item" href="#">链接 2</a></li> <li><a class="dropdown-item" href="#">链接 3</a></li> </ul> </div> </div>
2.6.2 指定向上弹出的上拉菜单
如果你希望上拉菜单向上弹出，可以在 div 元素上添加 "dropup" 类:
<div class="container mt-3"> <h2>下拉菜单</h2> <p> .dropup 类让下拉菜单向上弹出</p> <p>添加一些内容，用于测试向上弹出效果。</p> <p>添加一些内容，用于测试向上弹出效果。</p> <div class="dropup"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"> 下拉菜单 </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">链接 1</a></li> <li><a class="dropdown-item" href="#">链接 2</a></li> <li><a class="dropdown-item" href="#">链接 3</a></li> </ul> </div> </div>
2.7 按钮组中设置下拉菜单
我们可以在按钮中添加下拉菜单：
<div class="container mt-3"> <h2>内嵌按钮组</h2> <p>内嵌按钮组创建下拉菜单:</p> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Tablet</a></li> <li><a class="dropdown-item" href="#">Smartphone</a></li> </ul> </div> </div> </div>
垂直按钮组带下拉菜单：
<div class="container mt-3"> <h2>垂直方向内嵌按钮组</h2> <p>垂直方向内嵌按钮组创建下拉菜单:</p> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Tablet</a></li> <li><a class="dropdown-item" href="#">Smartphone</a></li> </ul> </div> </div> </div>
