Bootstrap入门（十二）组件6：导航标签页
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<div class="container">
<ul id="mytab" class="nav nav-tabs" role='tablist'>
<li role='presentation' class='active'><a href="">HOME</a></li>
<li role='presentation'><a href="">ASD</a></li>
<li role='presentation'><a href="">SDF</a></li>
</ul>
</div>
鼠标移动到其他标签上面，会有效果
但是点击是没有反应的，这是因为是依赖于JS的一个插件的，来使用一下
（mytab是之前设置的的一个id，因为是id，所以要在前面使用#来索引，a指里面的<a>标签，“.click”式说当鼠标点击时，有一个事件，执行show）
<script>
$("#mytab a").click(function (e) {
e.preventDefault();
$(this).tab("show");
})
</script>
刷新，点击另一个标签，切换了
<div class="container">
<ul id="mytab" class="nav nav-pills" role='tablist'>
<li role='presentation' class='active'><a href="">HOME</a></li>
<li role='presentation'><a href="">ASD</a></li>
<li role='presentation'><a href="">SDF</a></li>
</ul>
</div>
执行，
点击其他标签，有同样的效果
3.垂直展示
除了水平展示，我们也可以垂直展示
只需要在class中添加一个nav-stacked属性就可以了
<div class="container">
<ul id="mytab" class="nav nav-pills nav-stacked" role='tablist'>
<li role='presentation' class='active'><a href="">HOME</a></li>
<li role='presentation'><a href="">ASD</a></li>
<li role='presentation'><a href="">SDF</a></li>
</ul>
</div>
效果：
<div class="container">
<ul id="mytab" class="nav nav-pills nav-justified" role='tablist'>
<li role='presentation' class='active'><a href="">HOME</a></li>
<li role='presentation'><a href="">ASD</a></li>
<li role='presentation'><a href="">SDF</a></li>
</ul>
</div>
效果：
<div class="container">
<ul id="mytab" class="nav nav-pills nav-justified" role='tablist'>
<li role='presentation' class='active'><a href="">HOME</a></li>
<li role='presentation'><a href="">ASD</a></li>
<li role='presentation' class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">
SDF
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a href="" role="menuitem" tabindex="-1">1</a></li>
<li role="presentation"><a href="" role="menuitem" tabindex="-1">2</a></li>
<li role="presentation"><a href="" role="menuitem" tabindex="-1">3</a></li>
<li role="presentation"><a href="" role="menuitem" tabindex="-1">4</a></li>
<li role="presentation"><a href="" role="menuitem" tabindex="-1">5</a></li>
</ul>
</li>
</ul>
</div>
效果:
同样也可以运用到胶囊式当中，修改一些class即可
.png)
Bootstrap入门（十二）组件6：导航标签页的更多相关文章
- Bootstrap入门（二十二）组件16：列表组
Bootstrap入门(二十二)组件16:列表组 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容. 1.默认样式列表组 2.加入徽章 3.链接 4.禁用的列表组 5. ...
- Bootstrap入门（二十）组件14：警告框
Bootstrap入门(二十)组件14:警告框 警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息,提示.通知或者警示,可以迅速吸引注意力. 1.情景警告框 2.可关闭的警告框 3. ...
- Bootstrap入门（二十八）JS插件5：工具提醒
Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文 ...
- Bootstrap入门（二十九）JS插件6：弹出框
Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...
- Bootstrap入门（二十七）JS插件4：标签页
Bootstrap入门(二十七)JS插件4:标签页 标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" re ...
- Bootstrap入门（二十五）JS插件2：过渡效果
Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js ...
- Bootstrap入门（二十四）data属性
Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...
- Bootstrap入门（二十一）组件15：警告框
Bootstrap入门(二十一)组件15:警告框 通过这些简单.灵活的进度条,为当前工作流程或动作提供实时反馈. 进度条组件使用了 CSS3 的 transition 和 animation 属性来完 ...
- Bootstrap <基础十八>面包屑导航（Breadcrumbs）
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...
随机推荐
- git分支综述
对git不是很熟悉,有个问题要弄清楚一下. 假如远程仓库有 dev 和 master 两个分支,master 作为一个稳定版分支,可用于直接发布产品,日常的开发则 push 到 dev 分支,那我本地 ...
- 如何删除要素类 IFeatureWorkspace 接口介绍(1)
如何删除要素类 要想删除一个要素类,那么必须先得到这个,在得到这个要素类的时候,我们要学习一个新的接口IFeatureWorkspace. IFeatureWorkspace 接口介绍 这个接口主要 ...
- 汇总博客常见的api接口地址（windows live write）
汇总博客常见的api接口地址(windows live write) 1. cnblogs 日志地址,直接输入 http://www.cnblogs.com/xxxxx/ api接口 http://w ...
- 利用css3特性写出三角形（兼容IE浏览器）
利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
- The 2014 ACMICPC Asia Regional Xian Online
[A]签到题 [B]后缀数组 [C]染色,DP(感觉可出) [D]BFS搜索,有点麻烦 [E]博弈论,Nim博弈 [F]BFS状态搜索 [G]概率DP+状态压缩 [H]异或+构造 [I]矩阵快速幂(队 ...
- 加载window事件
$(document).ready()和window.onload的区别 发表于 2012-08-29 由 admin 以浏览器装载文档为例,在页面加载完毕后,浏览器会通过JavaScript为DOM ...
- Spring自学教程-IOC、DI、AOP(二)
一.spring的IOC-就是怎样使用spring来创建对象 二.springDI(依赖注入)-就是怎样给属性赋值 通过set方式赋值 以下我们只需要记住两点的赋值,基本类型和引用类型的赋值 基本类型 ...
- Android SQLITE数据类型
2011-6-24 15:14:00来源:Sql SQLITE数据类型 SQLite与其他常见的DBMS的最大不同是它对数据类型的支持.其他常见的DBMS通常支持强类型的数据,也就是每一列的类型都 ...
- (简单) HDU 1698 Just a Hook , 线段树+区间更新。
Description: In the game of DotA, Pudge’s meat hook is actually the most horrible thing for most of ...
- lpc1768的PWM使用
//p2.0 pwm1.1 void ALS_Init(void) //初始化 { LPC_SC->PCONP |= (1<<1)|(1<<2)|(1<&l ...