文章目录
一、导航栏
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 => mt
- margin-right => mr
- margin-bottom => mb
- margin-left => ml
- padding同理
$spacer是一个SASS变量。
- mt-0 = 0rem
- mt-1 = 0.25rem mt-n1 = -0.25rem
- mt-2 = 0.5rem mt-n2 = -0.5rem
- mt-3 = 1rem mt-n3 = -1rem
- mt-4 = 1.5rem mt-n4 = -1.5rem
- mt-5 = 3rem mt-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>
<button
class="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="http://images.nowcoder.com/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>
727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
