您的位置:首页 > Web前端 > BootStrap

bootstrap16---导航(标签页,胶囊,导航条)

2017-05-27 16:35 246 查看
Bootstrap 中的导航组件都依赖同一个 
.nav
 类,状态类也是共用的。改变修饰类可以改变样式。

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。

viewport 相关 @grid-float-breakpoint   

 

修改视口的阈值,从而影响导航条的排列模式

当浏览器视口(viewport)的宽度小于 
@grid-float-breakpoint
 值时,导航条内部的元素变为折叠排列,也就是变现为移动设备展现模式;当浏览器视口(viewport)的宽度大于 
@grid-float-breakpoint
 值时,导航条内部的元素变为水平排列,也就是变现为非移动设备展现模式。通过调整源码中的这个值,就可以控制导航条何时堆叠排列,何时水平排列。默认值是 
768px
 (小屏幕
-- 或者说是平板 --的最小值,或者说是平板)。

导航条的可访问性

务必使用 
<nav>
 元素,或者,如果使用的是通用的 
<div>
 元素的话,务必为导航条设置
role="navigation"
 属性,这样能够让使用辅助设备的用户明确知道这是一个导航区域。

<ul> 如果要实现导航标签页 导航条效果 须得先引用 .nav基类 并且,<li>中添加<a>标签

并且标签页 .nav 相关类别 .nav-tab .nav-pills 不具有折叠效果

导航条 .navbar 控制下的导航条 具有折叠功能

胶囊式标签页

.nav-pills 胶囊式标签页可以引用.nav-stacked类,

导航条

navbar-nav
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: