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

 更新时间:2017年01月19日 11:54:42   作者:zaichuanguanshui   我要评论
Bootstrap 中的导航组件都依赖同一个 .nav 类和ul,状态类也是共用的。改变修饰类可以改变样式。接下来通过本文给大家介绍bootstrap 导航组件使用方法,一起看看吧

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

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

1、标签页

.nav-tabs

这里写图片描述

<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

这里写图片描述

<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的New关键字

    谈谈JavaScript的New关键字

    这篇文章主要和大家聊一聊JavaScript的New关键字,一般我们通过New关键字来创建一个类的实例对象,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 微信浏览器内置JavaScript对象WeixinJSBridge使用实例

    微信浏览器内置JavaScript对象WeixinJSBridge使用实例

    这篇文章主要介绍了微信浏览器内置JavaScript对象WeixinJSBridge使用实例,本文给出了分享到朋友圈、发送给好友、分享到腾讯微博、关注指定的微信号等功能代码,需要的朋友可以参考下
    2015-05-05
  • url 特殊字符 传递参数解决方法

    url 特殊字符 传递参数解决方法

    有些符号在URL中是不能直接传递的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了。下表中列出了一些URL特殊符号及编码。
    2010-01-01
  • JavaScript程序员应该知道的45个实用技巧

    JavaScript程序员应该知道的45个实用技巧

    在这篇文章中,我将分享一组JavaScript的技巧、窍门和最佳实践,这些都是JavaScript程序员应该知晓的,不管他们是使用在浏览器/引擎上,还是服务器端(SSJS——Service Side JavaScript)JavaScript解释器上
    2014-03-03
  • JavaScript检测鼠标移动方向的方法

    JavaScript检测鼠标移动方向的方法

    这篇文章主要介绍了JavaScript检测鼠标移动方向的方法,涉及javascript鼠标操作的相关技巧,需要的朋友可以参考下
    2015-05-05
  • JS组件系列之使用HTML标签的data属性初始化JS组件

    JS组件系列之使用HTML标签的data属性初始化JS组件

    这篇文章主要介绍了JS组件系列之使用HTML标签的data属性初始化JS组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • Bootstrap栅格系统学习笔记

    Bootstrap栅格系统学习笔记

    这篇文章主要为大家详细介绍了Bootstrap栅格系统学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JavaScript中绑定事件的三种方式及去除绑定

    JavaScript中绑定事件的三种方式及去除绑定

    大家都知道要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。下面这篇文章给大家详细介绍了JavaScript中绑定事件的三种方式以及去除绑定的方法,有需要来一起看看吧。
    2016-11-11
  • bootstrap IE8 兼容性处理

    bootstrap IE8 兼容性处理

    这篇文章主要为大家详细介绍了bootstrap IE8 兼容性处理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • bootstrap提示标签、提示框实现代码

    bootstrap提示标签、提示框实现代码

    这篇文章主要为大家详细介绍了bootstrap提示标签、提示框的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论