开发者学堂课程【移动 Web 前端开发：导航条-组件结构分析】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8452
导航条-组件结构分析
具体内容
1、组建的名字叫 nav，打开 bootstrep 文档，点击组件，在最右边点击导航条。
2、导航条：
默认样式的导航条，导航条是在您的应用或网站中作为导航页头的响应式基础组件。
它们在移动设备上可以折叠(并且可开可关)，且在视口( viewport )宽度增加时逐渐变为水平展开模式。两端对齐的导航条导航链接已经被弃用了。
（1）导航条内所包含元素溢出
由于 Bootstrap 并不知道在导航条内放置的元素需要占据多宽的空间，可能会遇到导航条中的内容折行的情况(也就是导航条占据两行)。
解决办法如下:
a.减少导航条内所有元素所占据的宽度。
b.在某些尺寸的屏幕上(利用响应式工具类)隐藏导航条内的一些元素。
c.修改导航条在水平排列和折叠排列互相转化时，触发这个转化的最小屏幕宽度值。
可以通过修改 @grid-float-breakpoint 变量实现，或者自己重写相关的媒体查询代码，覆盖 Bootstrap 的默认值。
（2）依赖 JavaScript 插件
如果 JavaScript 被禁用，并且视口( viewport )足够窄，致使导航条折叠起来，导航条将不能被打开，.navbar-
Collapse 内所包含的内容也将不可见。
响应式导航条依赖 collapse 插件，定制 Bootstrap 的话时候必将其包含。
（3）修改视口的阈值，从而影响导航条的排列模式
当浏览器视口( viewport )的宽度小于 @grid-float-breakpoint 值时，导航条内部的元素变为折叠排列，也就是变现为移动设备展现模式;当浏览器视口( viewport )的宽度大于 @grid- float -breakpoint 值时，导航条内部的元素变为水平排列，也就是变现为非移动设备展现模式。
通过调整源码中的这个值，就可以控制导航条何时堆叠排列，何时水平排列。默认值是 768px ( 小屏幕-或者说是平板--的最小值，或者说是平板)。
（4）导航条的可访问性
务必使用 元素，或者，如果使用的是通用的
元素的话，务必为导航条设置 role="navigation" 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。
3、这个导航条不需要考虑终端怎么显示，什么样式，bootstrap 已经做好，是一个成品，使用这个导航条，可以分析一下它给的代码都是什么意思，首先明白导航条的结构是什么，从 bootstrap 组件自定义成自己产品的组件。
4、到 wjs 项目，分析一下 bootstrap 导航条，如果不进行分析，在修改的时候一定会遇到很多问题，注意要把模版导进来，如果没有模版，导航条不能生效，必须要有环境，把中间没用的删掉，
模版代码如下：
l>
l lang="zh-CN" >
<head>
container
再把 bootstrap 关于导航条的模版进行拷贝。预览一下现在的导航条能不能看的到。
对代码进行解析：
<！--导航条 默认样式的导航条-->
<nav class="navbar navbar-default"> 第一句是默认样式的导航
<！--响应式容器-->
="container-fluid" >单独的 container 是响应式容器，container-fluid 就是流式容器，这里使用的响应式容器，删掉 -fluid
<！--商标区域 和 切换按钮在移动端才会完全显示-->
商标和切换按钮组合在移动端显示的更好，brand 是商标或者logo的区域
导航的头部
<！--切换按钮-->
-navbar-collapse-1" aria-expanded="false" >button 就是切换按钮，navbar 的切换按钮，collapsed 可以在 bootstrap 里面找到它是 javascript 折叠的插件，新建一个html file
命名为 collapse ，再右键 rename，添加09，再点击 refactor，单独提出来，它是个组件，钥匙用这个组件也需要 bootstrap 环境，复制粘贴。
输入<！--需求：一个按钮能控制某一块区块的显示和隐藏-->，
<button> 按钮<button> 连接可以控制按钮显示和隐藏也可以 div 也可以控制显示和隐藏
<！--data-toggle=“collapse” 申明组件 折叠组件
data-target=“选择器“ 设置目标控制元素 通过选择器
如果是 a 元素也可以通过 href 来设置目标控制元素 选择器
-->
当加了这个属性之后 bootstrap 有自己的 js 文件，当页面加载完成，bootstrap js 文件也要进行加载，加载完成之后通过 js 去找data-toggle的属性，拿到data-toggle 的值，可以判断这个元素想初始化什么文件。
bootstrap 里面核心技术文件实现功能。data-toggle=“collapse”data-target=”#box“> 按钮 先把 button 初始化一个可以点击的切换按钮的功能，折叠组件，控制目标元素是 id 为 box 的容器。
<a href=".box"data-toggle=“collapse”>连接</a>
<div class="btn"data-toggle=“collapse”data-target= =“#box”>divBtn</div>
<!--被控制的区域- ->
<div id=“box”class=“box”>
<p>内容</p> 加入内容
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
<p>内容</p>
点击链接效果：
<a href="#">连接</a>
<div>k</div>
<！data-toggle=“collapse”申明折叠组件
data-target=“#bs-example-navbar-collapse-1”控制ID叫
一个div
屏幕阅读器辅助性的阅读设备 有一些盲人的用户也会去浏览网页，它们会借助一些设备叫做屏幕阅读器，这些设备根据网页内容分析到当前阅读到的区域是哪一块。
aria-expanded=”false”可以剪切掉，可有可无
aria- 都是给屏幕阅读器用的
span class="sr-only">Toggle navigation</span 这段也是可有可无
sr-only ==>> screen read only 屏幕阅读器，告诉盲人用户做出一个按钮，做出切换导航的按钮。
Role=“button”屏幕阅读器，作用是什么是什么的角色
-->
<button type= "button" class="navbar-toggle collapsed" data- toggle=" collapse“data-target=”#bs-example-navbar-collapse-1>
data
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar">/span>
<span class="icon-bar">/span>
<span class-"icon-bar"></span>
</button>
<！--商标区域-->
<a class-"navbar-brand" href=" #" >Brand</a>商标区域里面现在只是一个文字，如果还想加更多的logo往a里面加就可以
</div>
<！--可以切换的区域包含了 连接 表单和其他内容-->
<!-- Collect the nav links, forms, and other content for toggling -->集合了导航链接，表单和其他的一些区域，可以切换
<div class="collapse navbar-collapse" id="bs -example -navbar-collapse-1">
<ul class="nav navbar-nav" >
<li class="active"><a href="#">Link<span class="sr-only">(current)</span></a></li> active当前被选中的，Link导航连接，sr-only当前的意思，是可有可无，
<li><a href-"#">Link</a>/li>还是连接
<li class="dropdown"> 形成了下拉组件，data-toggle= " dropdown"声明下拉组件，知道下拉菜单就可以不要它
<a href="#" class=" dropdown-toggle" data-toggle= " dropdown" role="button" aria -haspopup="true"aria- expanded="false" >Dropdown <span class="caret" ></span></a>
<ul class="dropdown- menu">
<li><a href=" #">Action</a>/li>
<li><a href-"#">Another action</a></li>
<li>a href="#">Something else here</a></li>
<li role-"separator" class-"divider">/li>
<li><a href-"#">Separated link</a></li>
<li role-"separator" class="divider">/li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
这是一个 form 表单组，不要也可以
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" >
</div>
<button type-"submit" class-"btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right"> 它是右边的导航
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class=" dropdown-toggle" data-toggle=" dropdown" role="button" aria -haspopup="true"
aria- expanded="false">Dropdown <span class="caret"></span></a>
<ul class-"dropdown - menu">
<li><a href-" #">Action</a></li>
<li>a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider">/li>
<li>a href="#">Separated link</a>/li>
</ul>
</li>
</ul>
</div>!-- /.navbar-collapse -->
</div>!-- /. container-fluid -->
</nav>
