<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="lib/dist/css/bootstrap.css">
<title>后台带轮播图</title>
<style type="text/css">
.btn{background: pink;}
.btn-primary{background: pink;}
</style>
</head>
<body>
<a href="#declare" class="btn btn-primary" data-toggle="collapse">操作说明</a>
<div id="declare">
<div class="well well-sm">
<p>可以修改用户名称,商品信息</p>
</div>
</div>
<hr>
<!--制作一个可折叠的菜单,常用来制作网站后台左侧菜单区-->
<style>
#declare1 *,#declare2 *,a[href="#declare1"],a[href="#declare2"]{border-radius: 0;}
</style>
<a href="#declare1" class="btn btn-primary" data-toggle="collapse">用户管理</a>
<div id="declare1">
<!--制作垂直按钮组-->
<div>
<a href="" class="btn btn-default">修改密码</a>
<a href="" class="btn btn-default">用户列表</a>
<a href="" class="btn btn-default">积分查询</a>
</div>
</div>
<br>
<a href="#declare2" class="btn btn-primary" data-toggle="collapse">商品管理</a>
<div id="declare2">
<!--制作垂直按钮组-->
<div>
<a href="" class="btn btn-default">分类管理</a>
<a href="" class="btn btn-default">促销管理</a>
<a href="" class="btn btn-default">订单管理</a>
</div>
</div>
<br>
<div id="slider" class="carousel slide" data-ride="carousel">
<!--2.设置轮播图的播放顺序-->
<ol >
<li data-target="#slider" data-slide-to="0"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<!--3.设置轮播的图片-->
<div>
<!--每张图添加.item, 并设置第一张为当前激活状态.active-->
<div class="item active">
<img src="1.jpg" alt="">
<div></div>
</div>
<div>
<img src="2.jpg" alt="">
<div></div>
</div>
<div>
<img src="3.jpg" alt="">
<div></div>
</div>
</div>
<!--4.设置轮播图的播放-->
<!--data-slide="prev":点击后向前播放-->
<a href="#slider" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<!--data-slide="prev":点击后向后播放-->
<a href="#slider" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="lib/jquery.js"></script>
<script src="lib/dist/js/bootstrap.js"></script>
</body>
</html>不用调css，有需要的加到标签里，省好多功夫
需要清楚自己的需求并会查文档，才做得出漂亮的
