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 相关文章推荐
javascript实现切换td中的值
Dec 05 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
JS创建对象的写法示例
Nov 04 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
node.js通过url读取文件
Oct 16 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
基于mysql的bbs设计(四)
2006/10/09 PHP
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
设定php简写功能的方法
2019/11/28 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
2016/09/06 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
Python绘制3D图形
2018/05/03 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
Python: glob匹配文件的操作
2020/12/11 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
详解pandas映射与数据转换
2021/01/22 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
服务承诺口号
2014/05/22 职场文书
文案策划岗位职责
2015/02/11 职场文书
研究生个人学年总结
2015/02/14 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android