<!DOCTYPE html>
<html>
<head>
<title>jquery+css3幻灯片插件Bootslider - 网页模板</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<meta charset="gb2312">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="css/animate.css" rel="stylesheet" type="text/css" />
<link href="css/bootslider.css" rel="stylesheet" type="text/css" />
<link href="css/bs-theme-metro.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<style>
body, p, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
a:hover{
text-decoration: none;
}
.logo{
position:absolute;
width:100%;
text-align:center;
bottom:30px;
}
@media screen and (max-width:767px){
.logo{
bottom:10px;
}
}
.heading-center{
position:absolute;
width:100%;
top: 40%;
margin-top:-36px;
}
</style>
</head>
<body>
<div class="bootslider" id="bootslider">
<!-- Bootslider Loader -->
<div class="bs-loader">
<img src="img/loader.gif" width="31" height="31" alt="Loading.." id="loader"/>
</div>
<!-- /Bootslider Loader -->
<!-- Bootslider Container -->
<div class="bs-container">
<!-- Bootslider Slide -->
<div class="bs-slide active" data-animate-in="tada" data-animate-out="bounceOutDown">
<div class="bs-foreground">
<div class="text-center heading-center">
<h1 class="heading" data-animate-in="foolishIn" data-animate-out="bounceOutDown" data-delay="800">simply stunning<span class="text-alizarin">.</span></h1>
</div>
<div class="text-center logo" data-animate-in="fadeInUp">
<i class="fa fa-3x fa-twitter text-white hidden-xs"></i>
<h4>
<span class="text-alizarin">boot</span><span class="text-white">slider</span>
</h4>
</div>
</div>
<div class="bs-background">
<img src="img/slide-1.jpg" alt="" />
</div>
</div>
<!-- /Bootslider Slide -->
<!-- Bootslider Slide -->
<div class="bs-slide" data-animate-in="bounceInDown" data-animate-out="flipOutX">
<div class="bs-foreground">
<div class="text-center heading-center">
<h1 class="heading" data-animate-in="twisterInDown" data-animate-out="bounceOutDown" data-delay="800">it's showtime<span class="text-alizarin">.</span></h1>
</div>
<div class="text-center logo" data-animate-in="fadeInUp">
<i class="fa fa-3x fa-twitter text-white hidden-xs"></i>
<h4>
<span class="text-alizarin">boot</span><span class="text-white">slider</span>
</h4>
</div>
</div>
<div class="bs-background">
<img src="img/slide-2.jpg" alt="" />
</div>
</div>
<!-- /Bootslider Slide -->
<!-- Bootslider Slide -->
<div class="bs-slide" data-animate-in="flipInX" data-animate-out="rotateRight">
<div class="bs-foreground">
<div class="text-center heading-center">
<h1 class="heading" data-animate-in="swap" data-animate-out="bounceOutDown" data-delay="800">pure eye candy<span class="text-alizarin">.</span></h1>
</div>
<div class="text-center logo" data-animate-in="fadeInUp">
<i class="fa fa-3x fa-twitter text-white hidden-xs"></i>
<h4>
<span class="text-alizarin">boot</span><span class="text-white">slider</span>
</h4>
</div>
</div>
<div class="bs-background">
<img src="img/slide-3.jpg" alt="" />
</div>
</div>
<!-- /Bootslider Slide -->
<!-- Bootslider Slide -->
<div class="bs-slide" data-animate-in="rotateIn" data-animate-out="holeOut">
<div class="bs-foreground">
<div class="text-center heading-center">
<h1 class="heading" data-animate-in="fadeInDown" data-animate-out="bounceOutDown" data-delay="800">bootslider<span class="text-alizarin">.</span></h1>
<h3 class="text-white hidden-xs" data-animate-in="fadeInUp" data-animate-out="bounceOutDown" data-delay="800">your favorite</h3>
</div>
<div class="text-center logo" data-animate-in="fadeIn">
<i class="fa fa-3x fa-twitter text-white hidden-xs"></i>
<h4>
<span class="text-alizarin">boot</span><span class="text-white">slider</span>
</h4>
</div>
</div>
<div class="bs-background">
<img src="img/slide-6.jpg" alt="" />
</div>
</div>
<!-- /Bootslider Slide -->
<!-- Bootslider Slide -->
<div class="bs-slide" data-animate-in="openUpRightReturn" data-animate-out="slideDown">
<div class="bs-foreground">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6 col-xs-offset-3 col-xs-6 text-center">
<br/><br/><br/>
<div class="bs-video" data-animate-in="twisterInUp" data-delay="800" data-animate-out="fadeOut">
<iframe src="//player.vimeo.com/video/6857186" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="text-center logo" data-animate-in="fadeInUp">
<i class="fa fa-3x fa-twitter text-white hidden-xs"></i>
<h4>
<span class="text-alizarin">boot</span><span class="text-white">slider</span>
</h4>
</div>
</div>
<div class="bs-background">
<img src="img/slide-4.jpg" alt="" />
</div>
</div>
jquery+css3幻灯片插件Bootslider.zip （19个子文件） 
jquery+css3幻灯片插件Bootslider jiaoben1860 css 
bootstrap.min.css 100KB bootslider.css 10KB animate.css 362KB font-awesome.min.css 17KB bs-theme-metro.css 2KB img 
slide-6.jpg 519KB slide-1.jpg 425KB
loader.gif 3KB slide-3.jpg 478KB slide-4.jpg 438KB slide-2.jpg 465KB slide-5.jpg 25KB
index.html 11KB js touchSwipe.js 11KB bootstrap.min.js 27KB bootslider.js 8KB mousewheel.js 5KB fitvids.js 3KB jquery-1.10.1.min.js 91KB资源评论
