文章目录
一、导航栏
1、container
2、navbar
3、navbar-expand-xx
4、navbar-xxxx
5、bg-xxxx
6、navbar-brand
7、navbar-toggler
8、navbar-toggler-icon
9、定位
10、margin和padding间隙的定义
二、导航栏之切换触发器
1、data-toggle="xxx"
2、data-target="#id"
3、aria-controls="id"
4、aria-label
5、aria-expanded="boolean"
三、导航栏之列表
1、显示与隐藏
2、navbar-collapse
3、btn-group-vertical
四、导航栏之下拉菜单
1、dropdown
2、dropdown-divider
3、data-toggle="dropdown"
4、aria-haspopup="bollean"
5、aria-labelledby="id"
五、导航栏之徽章
1、badge
2、徽章的颜色
3、badge-pill
六、导航栏之搜索表单
1、form-inline
2、form-control
七、导航栏之按钮
1、btn
2、btn-xxx
3、btn-outline-xxx
4、尺寸
5、启用状态
6、禁用状态
7、切换状态
一、导航栏
1、container
导航栏默认内容是流式的，使用container容器来限制它们的水平宽度。把导航条包裹在一个.container容器中，从而使之在网页中呈现居中效果（或在导航栏内部居中）
2、navbar
导航栏需要使用.navbar来定义
3、navbar-expand-xx
用于响应式布局
navbar-expand-sm：屏幕>576px时水平铺开，否则垂直堆叠navbar-expand-md：屏幕>768px时水平铺开，否则垂直堆叠navbar-expand-lg：屏幕>992px时水平铺开，否则垂直堆叠navbar-expand-xl：屏幕>1200px时水平铺开，否则垂直堆叠
4、navbar-xxxx
导航栏文字的配色
navbar-dark：白字navbar-light：黑字
5、bg-xxxx
导航栏的配色
bg-primary：蓝色bg-success：绿色bg-info：浅蓝色bg-warning：黄色bg-danger：红色bg-dark：黑色bg-light：白色bg-secondary：灰色
6、navbar-brand
设置logo自适应导航栏，对链接最有效
7、navbar-toggler
用于折叠插件及其他切换触发器行为。Navbar下的Toggler是切换触发器（即手机模式下的MENU下拉项），它们默认是左对齐的。如果在它们中间定义一个同级的兄弟元素.navbar-brand，它们会自动对齐到窗口右边，反转你的品牌（LOGO或主标题）元素的位置
8、navbar-toggler-icon
切换触发器按钮的图标
9、定位
固定在顶部：fixed-top固定在底部：fixed-bottom随屏滚动于浏览器窗口顶部：stick-top<nav class="navbar fixed-top navbar-light bg-light"><a class="navbar-brand" href="#">固定在顶部</a></nav>
10、margin和padding间隙的定义
基于1rem值默认$spacer变量,选择所有视口（例如，值.mr-3对应于margin-right: 1rem），或挑响应变种，以针对特定的视口（例如，.mr-md-3对于margin-right: 1rem处于起步md断点）。
margin-top => mtmargin-right => mrmargin-bottom => mbmargin-left => mlpadding同理
$spacer是一个SASS变量。
mt-0 = 0remmt-1 = 0.25rem mt-n1 = -0.25remmt-2 = 0.5rem mt-n2 = -0.5remmt-3 = 1remmt-n3 = -1remmt-4 = 1.5rem mt-n4 = -1.5remmt-5 = 3remmt-n5 = -3rem
二、导航栏之切换触发器
1、data-toggle="xxx"
将元素原本的属性转换为data-toggle属性值，告诉脚本当按钮被点击时以什么事件触发，与data-target一起用代表data-target所指的元素以data-toggle指定的形式显示
data-toggle="collapse"：控制隐藏无序列表，将页面区域折叠起来data-toggle="modal"：模态框data-toggle="popover"：弹出框......
2、data-target="#id"
保存一个部分的id，告诉脚本点击时切换哪个部分
3、aria-controls="id"
指示一个元素控制另一个元素（按钮控制着该id的部分）
4、aria-label
用不可视的方式给当前元素加上标签描述。当其获得焦点时，屏幕阅读器会读出 aria-label 属性的值，但不会在视觉上呈现效果。
5、aria-expanded="boolean"
展开状态
aria-expanded="true"：元素是展开的aria-expanded="false"：元素不是展开的
三、导航栏之列表
包裹在折叠面板中形成响应式，通过navbat-nav表明是导航栏，其中的元素嵌套nav-item(子选项)与nav-link(链接元素)
1、显示与隐藏
collapse：一开始是隐藏的（即button没有被点击）
collapse show：一开始是展开的
2、navbar-collapse
与navbar-expand-xxxx配合，让ul的父级div在不同屏幕的显示与隐藏
3、btn-group-vertical
纵向按钮组，包裹在其中的内容纵向排列
四、导航栏之下拉菜单
1、dropdown
将下拉列表的切换（按钮或链接）和下拉菜单包含在dropdown中
2、dropdown-divider
分割线，分割相关菜单子项
3、data-toggle="dropdown"
添加data-toggle="dropdown"在A链接或按钮上，以启用下拉菜单组件
4、aria-haspopup="bollean"
aria-haspopup="true"：点击时会出现菜单或浮动元素aria-haspopup="false"：没有pop-up弹窗效果5、aria-labelledby="id"
如果想要屏幕阅读器读的标签文本在其他元素中存在时，可以将其值为该元素的 id。设置 aria-labelledby 的值为某个元素的 id 。那么屏幕阅读器就可以读取该id内的数据如果一个元素同时有aria-labelledby和aria-label，读屏软件会优先读取aria-labelledby的内容五、导航栏之徽章
1、badge
表明是徽章
2、徽章的颜色
也可以在<a>元素上使用，并实现悬停、焦点、状态等效果。
badge-primary
badge-secondary
badge-success
badge-danger
badge-warning
badge-info
badge-light
badge-dark
3、badge-pill
椭圆形胶囊标签
六、导航栏之搜索表单
1、form-inline
在其中放置各种表单元件及组件
2、form-control
文本控件（如<input>、<select>、<textarea>）统一采用form-control样式进行处理优化，包括常规外观、focus选（点）中状态、尺寸大小等。
七、导航栏之按钮
1、btn
表明具有按钮效果
2、btn-xxx
按钮标签的颜色
3、btn-outline-xxx
轮廓按钮的颜色
4、尺寸
btn-lg：大按钮
btn-sm：小按钮
btn-block：百分百充满空间的全屏按钮
5、启用状态
默认就是启用状态（背景较深、边框较暗、带内阴影），如果你一定要使按钮固定为启用状态、不需要点击反馈，可以增加active样式，并包括aria-pressed="true"属性，则状态显示为启用状态
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true"></a>
6、禁用状态
直接将disabled布尔属性添加到任何<button>元素通过增加disabled属性，并包括aria-disabled="true"属性，让<a>禁用<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true"></a>
7、切换状态
添加data-toggle="button"属性，可以切换按钮的active状态，如果你预先需要切换按钮，必须将.active样式、aria-pressed="true"属性到<button>标签中
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"></button>
button上加 autocomplete="off" 是因为在 Firefox 浏览器下，按钮通过 JS 禁用后，刷新仍然会是禁用状态，可以设置 autocomplete="off" 关闭这个“功能”。input的autocomplete属性是规范表单是否启用自动完成功能。自动完成允许浏览器对字段的输入，是基于之前输入过的值。（默认开启）
总结
<header class="bg-dark sticky-top" th:fragment="header"><div class="container"><!-- 导航 --><nav class="navbar navbar-expand-lg navbar-dark"><!-- logo --><a class="navbar-brand" href="#"></a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-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 mr-auto"><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" th:href="@{/index}">首页</a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link position-relative" href="site/letter.html">消息<span class="badge badge-danger">12</span></a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" th:href="@{/register}">注册</a></li><li class="nav-item ml-3 btn-group-vertical"><a class="nav-link" href="site/login.html">登录</a></li><li class="nav-item ml-3 btn-group-vertical dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="/head/1t.png" class="rounded-circle" style="width:30px;"/></a><div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item text-center" href="site/profile.html">个人主页</a><a class="dropdown-item text-center" href="site/setting.html">账号设置</a><a class="dropdown-item text-center" href="site/login.html">退出登录</a><div class="dropdown-divider"></div><span class="dropdown-item text-center text-secondary">nowcoder</span></div></li></ul><!-- 搜索 --><form class="form-inline my-2 my-lg-0" action="site/search.html"><input class="form-control mr-sm-2" type="search" aria-label="Search" /><button class="btn btn-outline-light my-2 my-sm-0" type="submit">搜索</button></form></div></nav></div></header>
