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 给汉字排序实例代码
Jun 28 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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分页函数
2006/10/09 PHP
PHP速成大法
2015/01/30 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
jquery遍历input取得input的name
2009/04/27 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
javascript打印输出json实例
2013/11/11 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
用python代码做configure文件
2014/07/20 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python生成随机数组的方法小结
2017/04/15 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
Linux下多个Python版本安装教程
2018/08/15 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
降低python版本的操作方法
2020/09/11 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
华为慧通面试题
2012/09/11 面试题
经销商培训邀请函
2014/01/21 职场文书
市场部经理岗位职责
2014/04/10 职场文书
青年文明号口号
2014/06/17 职场文书
法语专业求职信
2014/07/20 职场文书
综合素质评价自我评价
2015/03/06 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书