Bootstrap导航组件
来源:互联网 发布:系统解剖学网络公开课 编辑:程序博客网 时间:2024/06/07 18:00
Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。改变修饰类可以改变样式。
标签页
注意 .nav-tabs 类依赖 .nav 基类
<ul class="nav nav-tabs"> <li class="active"><a href="">网站首页</a></li> <li><a href="">学校概况</a></li> <li><a href="">教学管理</a></li> <li><a href="">招生工作</a></li> <li><a href="">就业工作</a></li> </ul>
胶囊式标签页
HTML 标记相同,但使用 .nav-pills 类:
<ul class="nav nav-pills"> <li class="active"><a href="">网站首页</a></li> <li><a href="">学校概况</a></li> <li><a href="">教学管理</a></li> <li><a href="">招生工作</a></li> <li><a href="">就业工作</a></li> </ul>
胶囊式标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。
<div class="row"> <div class="col-md-2"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="">网站首页</a></li> <li><a href="">学校概况</a></li> <li><a href="">教学管理</a></li> <li><a href="">招生工作</a></li> <li><a href="">就业工作</a></li> </ul> </div> </div>
禁用的链接
对任何导航组件(标签页、胶囊式标签页),都可以添加 .disabled 类,从而实现链接为灰色且没有鼠标悬停效果。
<ul class="nav nav-tabs"> <li class="active"><a href="">网站首页</a></li> <li><a href="">学校概况</a></li> <li><a href="">教学管理</a></li> <li><a href="">招生工作</a></li> <li><a href="">就业工作</a></li> <li><a href="">学生入口</a></li> <li class="disabled" ><a href="">教师入口</a></li> </ul>
添加下拉菜单
用一点点额外 HTML 代码并加入下拉菜单插件的 JavaScript 插件即可。
<ul class="nav nav-tabs"> <li class="active"><a href="">网站首页</a></li> <li><a href="">学校概况</a></li> <li><a href="">教学管理</a></li> <li><a href="">招生工作</a></li> <li><a href="">就业工作</a></li> <li class="dropdown"> <a href="" data-toggle="dropdown">教学院系 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="">计算机学院</a></li> <li><a href="">外国语学院</a></li> </ul> </li> </ul>
阅读全文
0 0
- Bootstrap组件之导航
- BootStrap的导航组件
- BootStrap 导航条组件
- BootStrap 附加导航组件
- Bootstrap导航组件
- Bootstrap-导航栏组件
- bootstrap 导航条 组件排列
- Bootstrap组件之导航条
- BootStrap--CSS组件--导航(nav)
- Bootstrap组件之导航条
- bootstrap组件之导航条
- 3.5Bootstrap组件篇之导航条
- BootStrap--CSS组件--导航条(navbar)
- BootStrap--CSS组件--面包屑导航(breadcrumb)
- bootstrap——组件(五、导航)
- Bootstrap布局组件—5.导航元素
- bootstrap组件——导航条
- bootstrap常用组件之头部导航
- Fiddler死活抓不了HTTPS包解决办法
- 线程安全,有状态,无状态的对象
- 数组(API)
- MySQL高可用架构之MHA
- HDU 1011 树形 dp
- Bootstrap导航组件
- 216. Combination Sum III
- git 初学
- TP框架如何去除undefind index提示
- 分页(对全部数据进行分页)
- lisp基本语法——(一)
- ClassPath
- java:函数--返回多个值
- 大范围内高效查找回文质数(回文数猜想)