文章目录
一、导航栏
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>