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 相关文章推荐
javascript div 弹出可拖动窗口
Feb 26 Javascript
js 数组操作代码集锦
Apr 28 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
php实现购物车功能(下)
2016/01/05 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
JQuery中form验证出错信息的查看方法
2013/10/08 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
Python下载指定页面上图片的方法
2016/05/12 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
浅谈python出错时traceback的解读
2020/07/15 Python
Django中使用Celery的方法步骤
2020/12/07 Python
卫校护理专业毕业生求职信
2013/11/26 职场文书
完美的中文自荐信
2014/05/24 职场文书
十八大标语口号
2014/10/09 职场文书
个人向公司借款协议书
2014/10/09 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
个人承诺书格式范文
2015/04/29 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers