导航工具条Navbar
重点内容- 导航条需要使用.navbar包装，并透过.navbar-expand{-sm|-md|-lg|-xl}给予响应式的折叠以及使用color scheme class。
-
导航条预设的内容宽度是浮动的，更改containers以不同的方式来限制水平宽度。
-
使用间距及弹性盒子通用类来控制物件在导航条的间隔及对齐。
-
导航条默认是响应式的，但也可以轻易的修改这个选项。
-
使用nav元素确保亲和性，也可使用更通用的元素，如div。
-
通过设置aria-current=“page”于当前页面，或将aria-current=“true”设置于群组中的当前项目来指示目前位置。
<div class="bd-example">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="../public/b0ea5ef480909ec0273885cc0a966c0.jpg" height="30px"
alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">产品</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
我们
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">联系我们</a></li>
<li><a class="dropdown-item" href="#">关于我们</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">公司介绍</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link " href="#" tabindex="-1" aria-disabled="true">地图</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search">
<button class="btn btn-outline-success text-nowrap" type="submit">搜索</button>
</form>
</div>
</div>
</nav>
</div>
//带搜索的导航工具条 需要使用直接复制
侧边抽屉
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button"
aria-controls="offcanvasExample">
侧边抽屉链接打开
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample"
aria-controls="offcanvasExample">
侧边抽屉按钮打开
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title">个人中心</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
这里可以放内容
<ul>
<li>我的帖子</li>
<li>我的收藏</li>
<li>我赞过的</li>
</ul>
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
我的好友
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">你好</a></li>
<li><a class="dropdown-item" href="#">我好</a></li>
<li><a class="dropdown-item" href="#">大家好</a></li>
</ul>
</div>
</div>
</div>
需要直接复制 offcanvas offcanvas-start包括的是内容 start标记从那一边出来；功能关键是绑定id值offcanvasExample
data-bs-toggle="offcanvas"`表明对滑动导航起作用
href="#offcanvasExample" `或`data-bs-target="#offcanvasExample"`是关键起作用的代码，其中#offcanvasExample中的offcanvasExample就是容器的id。
aria-controls="offcanvasExample"`是设置键盘焦点的，可以不写。
data-bs-scroll="true" data-bs-backdrop="false"给内容div加可以让页面内容滚动
Bootstrap的offcanvas类公开了一些事件
show.bs.offcanvas 调用show instance方法时，此事件立即激发。
shown.bs.offcanvas 当offcanvas元素对用户可见时（将等待CSS转换完成），将触发此事件。
hide.bs.offcanvas 调用hide方法后，会立即激发他的事件。
hidden.bs.offcanvas 当对用户隐藏offcanvas元素时（将等待CSS转换完成），将触发此事件。
面包屑组件 breadcrumb
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
active表示当前的菜单
手风琴组件
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
李白
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>李白（701年－762年）</strong>
，字太白，号青莲居士，又号“谪仙人”，是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”。代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《梁甫吟》《早发白帝城》等多首。
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
杜甫
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>杜甫（712年—770年）</strong>
，字子美，原籍湖北襄阳，后徙河南巩县。唐代伟大的现实主义诗人，
与李白合称“李杜”。杜甫在中国古典诗歌中的影响非常深远，被后人称为“诗圣”，他的诗被称为“诗史”。
杜甫创作了《登高》《春望》《北征》《三吏》《三别》等名作。
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree"
aria-expanded="false" aria-controls="collapseThree">
白居易
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>白居易（772年－846年）</strong>
，字乐天，号香山居士，又号醉吟先生，祖籍山西太原。
是唐代伟大的现实主义诗人，白居易的诗歌题材广泛，形式多样，语言平易通俗，有“诗魔”和“诗王”之称。
有《白氏长庆集》传世，代表诗作有《长恨歌》、《卖炭翁》、《琵琶行》等。
</div>
</div>
</div>
</div>
关键部分是必须写在容器accordion内 容器需要id 容器里分为标题和内容 标题data-bs-targe和内容的id需要对应；同页面有多个手风琴组件时需要给组件加上唯一id值；data-bs-toggle="collapse" data-bs-target="#id"为标题的必写项；内容里写data-bs-parent="#accordionExample" 值是手风琴容器的id
警告框 alert
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>老刘!</strong> 你收到一条站内短信，<a href="#" class="link-danger">点此查看</a>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
需要时复制，比较简单
Badge徽章图标组件
<button type="button" class="btn btn-primary"> 未读消息 <span class="badge bg-secondary">4</span> </button>
主要用于提醒文字
按钮组件
<button class="btn btn-primary" type="submit">Button按钮</button>
btn-*控制按钮的颜色区分 .btn-lg设置大小
#按钮组 组件
按钮组
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
复选框按钮
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
单选框按钮
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
