脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap 面包屑 导航 标签

Bootstrap组件学习之导航、标签、面包屑导航(精品)

 更新时间：2016年05月17日 16:55:08   作者：雨钝风轻  
这篇文章主要介绍了Bootstrap组件学习之导航、标签、面包屑导航(精品)的相关资料,需要的朋友可以参考下

导航

Bootstrap中可用的导航有相似的标记，用基类.nav开头，这是相似的部分。改变修饰类可以改变样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <link rel="stylesheet" >-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
.container {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-3">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>-->
<!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->
</body>
</html>

1、标签页

注意.nav-tabs类需要.nav基类。只要加上.nav-stacked,可以竖直堆叠。

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

2、胶囊式标签页

nav-tabs用.nav-pills代替。

禁用的链接:

<li ><a >Profile</a></li>

没有鼠标悬停效果,链接功能没有受到影响

3、使用下拉菜单

<ul class="nav nav-pills">
<li class="dropdown active">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 
<span class="caret"> 
</span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>

4、可用的变体

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

5、面包屑导航

<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>

以上所述是小编给大家介绍的Bootstrap组件学习之导航、标签、面包屑导航(精品)的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • JS实现禁止鼠标右键的功能

    JS实现禁止鼠标右键的功能

    遇到网页上有精美图片或者精彩文字想保存时，通常大家都是选中目标后按鼠标右键，在弹出菜单中选择“图片另存为”或“复制”来达到我们的目的。但是，目前有许多网页都屏蔽了鼠标右键，那么用js如何实现禁止鼠标右键的功能呢？下面小编给大家介绍下
    2016-10-10
  • js通过八个点 拖动改变div大小的实现方法

    js通过八个点 拖动改变div大小的实现方法

    本篇文章主要是对js通过八个点 拖动改变div大小的实现方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • js实现七夕表白弹幕效果 jQuery实现弹幕技术

    js实现七夕表白弹幕效果 jQuery实现弹幕技术

    这篇文章主要介绍了js实现七夕表白弹幕效果，jQuery实现弹幕技术，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 微信小程序工具函数封装

    微信小程序工具函数封装

    这篇文章主要为大家详细介绍了微信小程序工具函数封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • Webpack中loader打包各种文件的方法实例

    Webpack中loader打包各种文件的方法实例

    这篇文章主要给大家介绍了关于Webpack中loader打包各种文件的相关资料，其中包括处理css文件、less文件、scss文件、url地址以及ES6高级语法的方法，需要的朋友可以参考下
    2019-09-09
  • javascript实现一个网页加载进度loading

    javascript实现一个网页加载进度loading

    本篇文章主要介绍了javascript实现一个页面加载进度loading的具体步骤以及示例代码，具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • Echarts利用多X轴实现七天天气预报效果的示例代码

    Echarts利用多X轴实现七天天气预报效果的示例代码

    本文主要介绍了Echarts利用多X轴实现七天天气预报效果的示例代码，对于UI给出的设计图，各个气象网站都有类似的效果，分享给大家
    2021-10-10
  • 分享十八个杀手级JavaScript单行代码

    分享十八个杀手级JavaScript单行代码

    这篇文章主要给大家分享了十八个杀手级JavaScript单行代码,这些单行代码可以帮助你提高工作效率并可以帮助调试代码,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友可以参考下
    2021-10-10
  • js实现进度条的方法

    js实现进度条的方法

    这篇文章主要介绍了js实现进度条的方法,实例分析了两种不同的实现方法,并说明了setTimeout和setInterval的使用区别,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • 6种javascript显示当前系统时间代码

    6种javascript显示当前系统时间代码

    这篇文章主要介绍了6种javascript显示当前系统时间代码，欢迎大家学习借鉴
    2015-12-12

最新评论