bootstrap

再看一套bootstrap的网站模板，边看边分析：

1 头部使用了一个滑动显示下拉菜单功能



如图。不过在bootstrap中，由于考虑到移动端，所以都是点击实现下拉菜单。那怎么样才可以改成这种划过效果呢？

看一下源代码：

<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

那你只需要添加一行jq即可

$(".dropdown-toggle").hover(function  () {
$(".btn-group").toggleClass("open")
})

搞定。

2 注意这里有两个空的li ,是用来表示下划线效果的

<li role="separator" class="divider"></li>

3 导航条在页面滚动一定高度之后，固定在顶部。

bootstrap没有这种效果。

$(window).scroll(function  () {
if ($(window).scrollTop()>100) {
$("header").addclass("ficed");
} else{
$("header").removeclass("ficed");
}
})

4 很酷的banner

不是bootstrap的carousel插件。使用的是强大的revolution slide。这款插件功能齐全，图片切换、动画效果、3d效果，用过就知道啦

网址在此 http://www.loome.net/wpplugins/cnplugin/revolution/

5 百分比进度条



这个就是使用bootstrap的进度条了

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>

这个进度条蛮厉害的，还可以做出动态效果出来

6 折叠面板部分



使用bootstrap 的 Collapse.js