<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap的js组件大图轮播</title>
<!-- 环境搭建 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style>
*{
margin: 0px;
padding: 0px;
}
.conts{
/*width: 90%;*/
}
.carousel-inner>.item>img{
max-height: 450px;
width: 100%;
}
.articles{
margin-top: 50px;
border-top: 1px solid #ccc;
}
.lists img{
width: 100%;
height: 90%;
}
.showsGod {
border-top: 1px solid #ccc;
}
body{
padding-bottom: 10px;
}
.lists div p{
height: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
background: #ccffff;
}
.codeG img{
width: 100%;
height: 300px;
}
.codeA {
margin-top: 50px;
}
.footer{
margin-top: 100px;
background: black;
height: 400px;
}
.fir{
padding: 10px 30px;
text-align: center;
}
.friLink ul{
overflow: hidden;
}
.friLink ul li{
list-style: none;
float: left;
width: 25%;
}
pre{
width: 100%;
}
.friLink ul li a{
color: white;
}
.contact {
margin-top: 50px;
color: white;
}
</style>
</head>
<body>
<div class="box">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#example-lists">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Merry Christmas!!</a>
</div>
<div class="navShow collapse navbar-collapse" id="example-lists">
<ul class="nav nav-pills nav-justified">
<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 class="container">
<div id="myCarousel" class="carousel slide conts">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="back.jpeg" alt="First slide">
</div>
<div class="item">
<img src="back.jpeg" alt="Second slide">
</div>
<div class="item">
<img src="back.jpeg" alt="Third slide">
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="carousel-control left" href="#myCarousel" role="button" title="上一个" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">prev</span>
</a>
<a class="carousel-control right" href="#myCarousel" role="button" title="下一个" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">next</span>
</a>
</div>
</div>
<div class="articles container">
<h1>最新美文:</h1>
<div class="panel panel-default">
<div class="panel-heading">
兰亭序
</div>
<div class="panel-body">
永和九年。。。。
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
我的滑板鞋
</h3>
</div>
<div class="panel-body">
我的滑板鞋我的滑板鞋我的滑板鞋我的滑板鞋我的滑板鞋我的滑板鞋我的滑板鞋我的滑板鞋我的滑板鞋我的滑板鞋
</div>
</div>
</div>
<!-- 第三部分:女神展示 -->
<div class="container showsGod">
<div class="row">
<h1>女神展示:</h1>
</div>
<div class="row lists">
<div class="col-md-3 col-sm-6 col-xs-12">
<img src="imgs/gao1.jpg" alt="">
<p>女神高圆圆</p>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img src="imgs/gao1.jpg" alt="">
<p>女神高圆圆</p>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img src="imgs/gao1.jpg" alt="">
<p>女神高圆圆</p>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img src="imgs/gao1.jpg" alt="">
<p>女神高圆圆</p>
</div>
</div>
</div>
<!-- 第四部分:女神教你写代码 -->
<div class="container codeA">
<div class="row">
<h1>女神带你搬砖</h1>
</div>
<div class="row codeG">
<img src="back.jpeg" alt="">
</div>
<div class="row">
<h1>这是一个boot导航条的代码例子</h1>
<div class="desc">
code部分pre是块
</div>
<pre>
<ul class="nav nav-pills nav-justified">
<li>
<a href="#">张三</a>
</li>
<li>
<a href="#">李四</a>
</li>
</ul>
</pre>
</div>
</div>
<!-- 网站的脚步 -->
<div class="footer">
<div class="fir">
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
<div class="friLink">
<ul>
<li><a href="#">友情链接一</a></li>
<li><a href="#">友情链接一</a></li>
<li><a href="#">友情链接一</a></li>
<li><a href="#">友情链接一</a></li>
<li><a href="#">友情链接一</a></li>
</ul>
</div>ink
<div class="contact">
<p>
公司:北京xxxxxxbk1631集团;
</p>
<p>
电话:010-66666666;
</p>
<p>
地址:北京昌平区老牛湾科技园xxx号
</p>
</div>
</div>
</div>
</body>
<!-- 三。js调用功能初始化 -->
<script>
$(function(){
$(".show ul li").click(function(){
// 导航切换效果
$(this).addClass("active").siblings().removeClass("active");
})
})
</script>
</html>