- 浏览: 24310 次
最新评论
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:bootstrap教程(二) —— 导航条
导航(标签形tab导航)
标签形导航,也称为选项卡导航。特别是在很多内容分块显示的时,使用这种选项卡来分组十分适合。
标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名,如:
<ul class="nav nav-tabs">
<li><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
实现原理非常的简单,将菜单项(li)按块显示,并且让他们在同一水平上排列,然后定义非高亮菜单的样式和鼠标悬浮效果。代码如下:
/*源码请查阅bootstrap.css文件第3494行~第3509行*/
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li >a:hover {
border-color: #eee #eee #ddd;
}
其实上例的效果和我们平时看到的选项卡效果并不一致。一般情况之下,选项卡教会有一个当前选中项。其实在Bootstrap框架也相应提供了。假设我们想让“Home”项为当前选中项,只需要在其标签上添加类名“class="active"”即可:
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li>
…
</ul>
对应样式代码如下:
/*源码请查阅bootstrap.css文件第3510行~第3518行*/
.nav-tabs >li.active> a,
.nav-tabs >li.active>a:hover,
.nav-tabs >li.active>a:focus {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
除了当前项之外,有的选项卡还带有禁用状态,实现这样的效果,只需要在标签项上添加“class="disabled"”即可:
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li>
…
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
实现这个效果的样式,在默认样式“.nav”中就带有:
/*源码请查看bootstrap.css文件第3469行~第3478行*/
.nav>li.disabled> a {
color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
color: #999;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
注意:我们看到的选项卡效果,点击菜单项就可以切换内容,如果要实现这样的效果需要配合js插件,这部分将在后面的教程中会介绍。
bootstrap教程(二)——导航条
导航(标签形tab导航)
标签形导航,也称为选项卡导航。特别是在很多内容分块显示的时,使用这种选项卡来分组十分适合。
标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名,如:
<ul class="nav nav-tabs">
<li><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
实现原理非常的简单,将菜单项(li)按块显示,并且让他们在同一水平上排列,然后定义非高亮菜单的样式和鼠标悬浮效果。代码如下:
/*源码请查阅bootstrap.css文件第3494行~第3509行*/
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li >a:hover {
border-color: #eee #eee #ddd;
}
其实上例的效果和我们平时看到的选项卡效果并不一致。一般情况之下,选项卡教会有一个当前选中项。其实在Bootstrap框架也相应提供了。假设我们想让“Home”项为当前选中项,只需要在其标签上添加类名“class="active"”即可:
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li>
…
</ul>
对应样式代码如下:
/*源码请查阅bootstrap.css文件第3510行~第3518行*/
.nav-tabs >li.active> a,
.nav-tabs >li.active>a:hover,
.nav-tabs >li.active>a:focus {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
除了当前项之外,有的选项卡还带有禁用状态,实现这样的效果,只需要在标签项上添加“class="disabled"”即可:
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li>
…
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
实现这个效果的样式,在默认样式“.nav”中就带有:
/*源码请查看bootstrap.css文件第3469行~第3478行*/
.nav>li.disabled> a {
color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
color: #999;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
注意:我们看到的选项卡效果,点击菜单项就可以切换内容,如果要实现这样的效果需要配合js插件,这部分将在后面的教程中会介绍。
bootstrap教程(二)——导航条
发表评论
-
JavaScript强化教程 —— 对象创建模式
2016-10-09 17:12 615本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 依赖注入
2016-09-28 17:10 555本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— Select(选择框)
2016-09-23 17:14 741本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 控制器
2016-09-21 17:22 503本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 简介(10)
2016-09-14 17:41 452本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— 与php服务器
2016-09-12 17:49 1206本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS自动JSB绑定规则修改
2016-09-09 18:08 1101本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 —— 资源打包工具的使用及资源的异步加载处理
2016-09-08 17:45 672本文为 HTML5培训 机构官方 HTML5培训 教程,主要介 ... -
JavaScript强化教程 —— Cocos2d-JS极速调试技巧
2016-09-05 16:18 672本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS游戏快速接入微信JS-SDK
2016-09-02 16:07 953本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程—— 内置粒子系统
2016-08-29 16:00 682本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——JavaScript Math(算数) 对象
2016-08-26 16:33 472本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
2016-08-25 16:25 1122本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 -- cocosjs场景切换
2016-08-24 16:11 1293本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
CSS基础教程 -- 媒体查询屏幕适配
2016-08-22 15:15 1023本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JQuery强化教程 —— jQuery Easing
2016-08-18 14:54 743本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
fullPage教程 -- 整屏滚动效果插件 fullpage详解
2016-08-17 15:21 783本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——获取内容和属性
2016-08-15 15:35 411本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——jQuery 动画2
2016-08-12 14:12 571本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二) —— 列表组listgroup
2016-08-11 14:46 564本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ...
相关推荐
拥Bootstrap入怀 导航栏篇,和大家一起走进Bootstrap,了解Bootstrap的导航栏,感兴趣的小伙伴们可以参考一下
使用bootstrap实现云阅读导航条
《bootstrap基础教程》对应源码,内容包括 13个章节对应的源码
该套bootstrap视频教程是从网上扒下来的 非当前的最新版本教程,但是对于新手还是挺不错的。视频时间很短,每节只有几分钟。
用bootstrap4实现侧边导航栏并且带隐藏按钮。效果就是,点击按钮侧边导航栏出现,再点击消失。不用bootstrap也可以实现
tutorials point 原版bootstrap教程,带有笔记
Bootstrap左侧下拉三级菜单导航
这是一个 bootstrap3 的侧边导航栏,东西大家应该都很熟习。希望对大家有所帮助
bootstrap首页导航条及广告轮转效果,实现的一个疯狂动物城的动漫网站前端
Bootstrap教程.zip
bootstrap教程,里面有丰富的CSS样式,可以快速开发网站
一款简洁实用基于HTML5 Bootstrap实现的响应式手机导航下拉菜单代码,Bootstrap自适应电脑手机端导航下拉菜单网页特效。
一整套的BootStrap视频教程,引领你走上前端之路,还等什么,赶紧来下载吧!!
这是一个网站前端,在同一页面,导航切换道不同分页面。用到bootstrap框架,不需要CSS、JS文件。将文档复制即可使用。
自己制作的Bootstrap教程.CHM
响应式布局-BootStrap从基础到项目实战-第一季(基础篇)
前端框架利器——bootstrap
Bootstrap Studio是一款功能非常强大的网页设计软件,该软件最大的作用就是帮助用户设计和原型化网站,能够快速的建立一个响应式的网站,内置了大量的功能组件,用户通过拖放即可使用,大大提高了编写网站的便捷性,...