bootstrap组件之导航组件使用方法


Posted in Javascript onJanuary 19, 2017

在上篇文章给大家介绍了bootstrap组件之按钮式下拉菜单小结,下面通过本文给大家介绍bootstrap导航组件的使用方法,一起看看吧!

Bootstrap 中的导航组件都依赖同一个 .nav 类和ul,状态类也是共用的。改变修饰类可以改变样式。

1、标签页

.nav-tabs

bootstrap组件之导航组件使用方法

<ul class="nav nav-tabs" role="tablist">
 <li role="presentation" class="active"><a href="#">Home</a></li>
 <li role="presentation"><a href="#">Profile</a></li>
 <li role="presentation"><a href="#">Messages</a></li>
</ul>

2、胶囊式标签页

.nav-pills

bootstrap组件之导航组件使用方法

<ul class="nav nav-pills" role="tablist">
 <li role="presentation" class="active"><a href="#">Home</a></li>
 <li role="presentation"><a href="#">Profile</a></li>
 <li role="presentation"><a href="#">Messages</a></li>
</ul>

3、垂直的导航

只需要添加.nav-stacked就可以实现竖直方向上的导航

<ul class="nav nav-pills nav-stacked" role="tablist">
 ...
</ul>

4、禁用的链接

如果需要禁用某个导航选项,只需要在对应的li上添加.disabled就可以了

<ul class="nav nav-pills" role="tablist">
 ...
 <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
 ...
</ul>

5、给导航选项添加下拉菜单

如果需要导航的某个选项是下拉菜单可以修改对应的li

1)给li添加.dropdown

2)a标签当做下拉菜单的触发器,添加.dropdown-toggle 和 data-toggle=”dropdown”

3)a标签里面添加文字和span

4)li里面还要添加ul,也就是dropdown-menu

<ul class="nav nav-tabs">
 ...
 <li class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
   Dropdown 
   <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
   ...
  </ul>
 </li>
 ...
</ul>

以上所述是小编给大家介绍的bootstrap组件之导航组件使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
网页防止tab键的使用快速解决方法
Nov 07 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
jQuery表格插件datatables用法总结
Sep 05 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
浅析vue component 组件使用
Mar 06 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
js逆向解密之网络爬虫
May 30 Javascript
vue实现在线翻译功能
Sep 27 Javascript
js实现页面图片消除效果
Mar 24 Javascript
bootstrap输入框组件使用方法详解
Jan 19 #Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 #Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 #Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 #Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 #Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 #Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 #Javascript
You might like
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
python字符串中的单双引
2017/02/16 Python
Python 字符串换行的多种方式
2018/09/06 Python
Django Celery异步任务队列的实现
2019/07/24 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
python实现处理mysql结果输出方式
2020/04/09 Python
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
毕业生个人投资创业计划书
2014/01/04 职场文书
国企干部对照检查材料
2014/08/22 职场文书
介绍信样本
2015/01/31 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
学校百日安全活动总结
2015/05/07 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
仰望星空观后感
2015/06/10 职场文书
2015年暑期见闻
2015/07/14 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android