用Bootstrap编个简单后台,带轮播图

Original 2018-11-24 16:31:52 1655
abstract:<!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>后台带轮播图</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,有需要的加到标签里,省好多功夫

需要清楚自己的需求并会查文档,才做得出漂亮的

Correcting teacher:灭绝师太Correction time:2018-11-24 16:38:13
Teacher's summary:是的,还是要多研究文档,熟练使用组件,作业完成的不错!

Release Notes

Popular Entries