卡片组件
<div class="card" style="width: 18rem;">
<div class="card-header">
卡片页眉
</div>
<img src="../pic/5.jpg" class="card-img-top" alt="卡片的图片宽度会自动设置">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">卡片的内容可以使用文本、列表、表格、表单、图片等各种html元素
<img src="../pic/7.jpg" class="card-img-top" alt="卡片主体内的图片">
</p>
<a href="#" class="btn btn-primary">这是一个按钮</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 text-muted">
卡片页脚
</div>
</div>
完整的卡片组件包括五部分页眉、页脚、图片（此处指的是页眉下面的图片，与卡片同宽度）、主体、列表群组
图片为背景的卡片组件
<div class="container">
<br><br><br>
<div class="card card bg-dark text-white">
<img src="../public/b0ea5ef480909ec0273885cc0a966c0.jpg" class="card-img" alt="...">
<div class="card-body card-img-overlay">
<h5 class="card-title">微软发布 Win11 </h5>
<p class="card-text">
微软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
图片在左边的卡片组件
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="../public/b0ea5ef480909ec0273885cc0a966c0.jpg" alt="..." class="w-100">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">春夏秋冬皆自然</h5>
<p class="card-text">
春夏秋冬皆自然,明月清风共我闲,有春风拂面的温柔,也有美好故事的发生,又一个春天如约而至,温柔的朝阳里布谷鸟声声呼唤,愿普天同安康,迎接春天到来的简...
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
带选项卡的卡片组件
<div class="container">
<br><br><br>
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link" aria-current="true" href="#" data-bs-toggle="tab" data-bs-target="#nav-hot">热门新闻</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#" data-bs-toggle="tab" data-bs-target="#nav-home">国内新闻</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#" tabindex="-1" aria-disabled="true" data-bs-toggle="tab"
data-bs-target="#nav-home1">国外新闻</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="card-body tab-pane fade" id="nav-hot">
<h5 class="card-title">热点新闻</h5>
<p class="card-text">热点新闻</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-body tab-pane fade show active" id="nav-home">
<h5 class="card-title">国内新闻</h5>
<p class="card-text">国内热点新闻</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-body tab-pane fade show active" id="nav-home1">
<h5 class="card-title">国内新闻</h5>
<p class="card-text">国内热点新闻</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
需要胶囊样式 改tabs为pill
#轮播图组件
<div id="carouselExampleCaptions" class="carousel slide w-50" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../public/1024x1024.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>第一个幻灯片</h5>
<p>一枝红艳露凝香，云雨巫山枉断肠。<br>——唐代李白的《清平调·其二》</p>
</div>
</div>
<div class="carousel-item">
<img src="../public/111111111.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>第二个幻灯片</h5>
<p>南国有佳人，容华若桃李。<br>——汉曹植的《杂诗七首·其四》</p>
</div>
</div>
<div class="carousel-item">
<img src="../public/b0ea5ef480909ec0273885cc0a966c0.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>第三个幻灯片</h5>
<p>云想衣裳花想容，春风拂槛露华浓。<br>
——唐代李白的《清平调·其一》</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
淡入淡出 carousel-fade 在容器上写
时间间隔 data-bs-interval="10000" 在每一个item上写
carousel-dark黑字
下拉菜单组件
<div class="container">
<br><br><br>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown"
aria-expanded="false">
button下拉菜单
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<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>
<br><br><br>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown"
aria-expanded="false">
a 链接下拉菜单
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<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
分页组件
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">上一页</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">下一页</a></li>
</ul>
</nav>
列表组的组件
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">文章标题</h5>
<small>发布日期</small>
</div>
<p class="mb-1">文章内容摘要</p>
<small>小字，可用于文章来源、作者等信息</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">阿里会接盘苏宁吗？</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">在苏宁对网络传闻辟谣之后，海豚社独家得到消息，阿里方面已经派人入驻苏宁在某些省份的分公司。</p>
<small class="text-muted">来源：搜狐科技</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">苹果「革命性」神秘新品确定了！</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">和造车一样，苹果正在研发的VR眼镜早就变成了公开的秘密。虽然一直活在传言中，每年都没看见成品出现，不过好歹进展一直都在缓慢曝光中。</p>
<small class="text-muted">来源：搜狐科技</small>
</a>
</div>
