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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
详解Vue中的Props与Data细微差别
Mar 02 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
图书管理程序(一)
2006/10/09 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
python字典DICT类型合并详解
2017/08/17 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python实现人像动漫化的示例代码
2020/05/17 Python
CSS实现半透明边框与多重边框的场景分析
2019/11/13 HTML / CSS
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
晚归检讨书
2014/02/19 职场文书
自荐信如何制作?
2014/02/21 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
应届生自荐信
2014/06/30 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
新员工入职感言范文!
2019/07/04 职场文书
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技