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


Posted in Javascript onMay 17, 2016

导航

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,可以竖直堆叠。

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

<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、胶囊式标签页

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

nav-tabs用.nav-pills代替。

禁用的链接:

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

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

3、使用下拉菜单

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

<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、可用的变体

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

<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、面包屑导航

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

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

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

Javascript 相关文章推荐
JS array 数组详解
Mar 22 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
js自定义事件代码说明
Jan 31 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
js面向对象编程总结
Feb 16 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 #Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 #Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 #Javascript
jquery获取img的src值的简单实例
May 17 #Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 #Javascript
浅谈Javascript数组(推荐)
May 17 #Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 #Javascript
You might like
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php 魔术函数使用说明
2010/02/21 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
python 读取竖线分隔符的文本方法
2018/12/20 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
大学四年规划书范文
2013/12/27 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
法学专业求职信范文
2015/03/19 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
酒店员工手册范本
2015/05/14 职场文书
教师远程研修感悟
2015/11/18 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫