<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Title here -->
<title>汉卓</title>
<!-- Description, Keywords and Author -->
<meta name="description" content="hanzhuo">
<meta name="keywords" content="hanzhuo">
<meta name="author" content="hanzhuo">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" />
<!-- Styles -->
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- Font awesome CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet" />
<!-- Animate CSS -->
<link href="css/animate.min.css" rel="stylesheet" />
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet" />
</head>
<body data-spy="scroll" data-target="#myScrollspy"><!-- 在 body 要声明滚动监控。 -->
<!-- 菜单开始 -->
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarMenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
<a href="#" class="navbar-brand">Logo</a>
</div>
<!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">列表页</a></li>
<li><a href="#">新闻页</a></li>
<li><a href="#">详细页</a></li>
</ul>
</div>
</div>
<!-- 菜单结束 -->
<!-- 轮播开始 -->
<div id="slidershow" class="carousel slide carousel-fade" data-ride="carousel" data-warp="true" data-interval="3000" data-pause="hover">
<!-- 设置图片轮播的顺序 -->
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0">1</li>
<li data-target="#slidershow" data-slide-to="1">1</li>
<li data-target="#slidershow" data-slide-to="2">2</li>
</ol>
<!-- 设置轮播图片 -->
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="image/index_01.png" alt=""/></a>
<div class="carousel-caption">
<h3>图片轮播一</h3>
<p>这是第一张图片。</p>
</div>
</div>
<div class="item">
<a href="#"><img src="image/index_02.png" alt=""/></a>
<div class="carousel-caption">
<h3>图片轮播二</h3>
<p>这是第二张图片。</p>
</div>
</div>
<div class="item">
<a href="#"><img src="image/index_03.png" alt=""/></a>
<div class="carousel-caption">
<h3>图片轮播三</h3>
<p>这是第三张图片。</p>
</div>
</div>
</div>
<!-- 上一页，下一页 -->
<a href="#slidershow" class="left carousel-control" data-slide="prev" role="button"> <span class="icon-prev"></span></a>
<a href="#slidershow" class="right carousel-control" data-slide="next" role="button"> <span class="icon-next"></span></a>
</div>
<!-- 轮播结束 -->
<!-- 固定定位开始 -->
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Affix</h1>
</div>
<div class="row">
<div class="col-xs-3" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
<li class="active"><a href="#section-1">第一部分</a></li>
<li><a href="#section-2">第二部分</a></li>
<li><a href="#section-3">第三部分</a></li>
<li><a href="#section-4">第四部分</a></li>
<li><a href="#section-5">第五部分</a></li>
</ul>
</div>
<div class="col-xs-9">
<h2 id="section-1">第一部分</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
<hr>
<h2 id="section-2">第二部分</h2>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem augue, hendrerit non sapien in, mollis ornare augue.</p>
<hr>
<h2 id="section-3">第三部分</h2>
<p>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris.</p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante i
bootstrap案例包括： 响应式导航菜单；banner轮播；栅格布局；固定定位
需积分: 50 75 浏览量
2017-05-19
15:19:14
上传
评论 1
收藏 616KB RAR 举报
bootstrap案例.rar （20个子文件） 
bootstrap案例 font 
fontawesome-webfont.svg 197KB
fontawesome-webfont.eot 37KB FontAwesome.otf 61KB fontawesome-webfont.ttf 79KB fontawesome-webfont.woff 43KB js custom.js 493B respond.min.js 4KB waypoints.min.js 8KB html5shiv.js 9KB jquery.arbitrary-anchor.js 3KB jquery.js 91KB bootstrap.min.js 27KB css bootstrap.min.css 95KB style.css 1KB animate.min.css 50KB font-awesome.min.css 22KB image 
index_01.png 157KB index_03.png 78KB index_02.png 82KB
index.html 15KB资源评论
