摘要：<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" &nb
<!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>后臺(tái)帶輪播圖</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">操作說(shuō)明</a>
<div id="declare">
<div class="well well-sm">
<p>可以修改用戶(hù)名稱(chēng),商品信息</p>
</div>
</div>
<hr>
<!--制作一個(gè)可折疊的菜單,常用來(lái)制作網(wǎng)站后臺(tái)左側(cè)菜單區(qū)-->
<style>
#declare1 *,#declare2 *,a[href="#declare1"],a[href="#declare2"]{border-radius: 0;}
</style>
<a href="#declare1" class="btn btn-primary" data-toggle="collapse">用戶(hù)管理</a>
<div id="declare1">
<!--制作垂直按鈕組-->
<div>
<a href="" class="btn btn-default">修改密碼</a>
<a href="" class="btn btn-default">用戶(hù)列表</a>
<a href="" class="btn btn-default">積分查詢(xún)</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">分類(lèi)管理</a>
<a href="" class="btn btn-default">促銷(xiāo)管理</a>
<a href="" class="btn btn-default">訂單管理</a>
</div>
</div>
<br>
<div id="slider" class="carousel slide" data-ride="carousel">
<!--2.設(shè)置輪播圖的播放順序-->
<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.設(shè)置輪播的圖片-->
<div>
<!--每張圖添加.item, 并設(shè)置第一張為當(dāng)前激活狀態(tài).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.設(shè)置輪播圖的播放-->
<!--data-slide="prev":點(diǎn)擊后向前播放-->
<a href="#slider" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<!--data-slide="prev":點(diǎn)擊后向后播放-->
<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>不用調(diào)css，有需要的加到標(biāo)簽里，省好多功夫
需要清楚自己的需求并會(huì)查文檔，才做得出漂亮的
批改老師：滅絕師太批改時(shí)間：2018-11-24 16:38:13
老師總結(jié)：是的，還是要多研究文檔，熟練使用組件，作業(yè)完成的不錯(cuò)！