Bootstrap3.0学习第十三轮：导航条

接下来慢慢的放缩浏览器，也就是让浏览器的宽度小一些。

首先最外面的容器是nav标签，并添加nav-bar样式类，表示这里面属于导航条。

然后在浏览器放缩到一定程度的时候，可以看到的Header。

按钮标签里嵌套了三个span的icon。然后给与navbar-toggle样式类和属性collapse(收起)，点击的时候目标为data-target。

再接下来就比较简单，嵌套了下拉菜单、form表单、再是下拉菜单。

增强导航条的可访问性

要增强可访问性，一定要给每个导航条加上role="navigation"。

表单

将表单放置于.navbar-form之内可以呈现很好的垂直对齐，并在较窄的viewport中呈现折叠状态。使用对齐选项可以确定其在导航条上出现的位置。

通过使用.navbar-form和 .form-inline共享了很多代码。

为输入框添加label标签

如果你没有为输入框添加label标签，屏幕阅读器将会遇到问题。对于导航条内的表单，可以通过.sr-only class隐藏label标签。

按钮

对于不包含在<form>中的<button>元素，加上.navbar-btn这个class后可以让它在导航条里垂直居中。

文本

把文本包裹在.navbar-text中时，为了有正确的行距和颜色，通常使用<p>标签。

（编辑：佛山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!