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去除右边逗号的简单方法
Jul 03 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 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中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
php array的学习笔记
2012/05/10 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
详解Vue中的watch和computed
2020/11/09 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
基于Python实现文件大小输出
2016/01/11 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
医务工作者先进事迹材料
2014/01/26 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
安全负责人任命书
2014/06/06 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
老兵退伍标语
2014/10/07 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
绿里奇迹观后感
2015/06/15 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL