Bootstrap实现的页面

最新推荐文章于 2024-03-10 09:15:00 发布

weixin_34219944

最新推荐文章于 2024-03-10 09:15:00 发布

阅读量211

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wuqingzangyue/p/5454420.html

版权

实现的效果如图,使用bootstrap需要至少三个文件

去bootstrap网上下载，然后使用这三个文件可以了

使用方式，通过标签，class命名来引用已经定制好的html样式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>一个页面</title>
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/js/custom_index.js"></script>
<link rel="stylesheet" type="text/css" href="../static/css/custom_index.css">

</head>

<body>
    <div class="head">
        <ul class="list-group nav" >
            <li><a href="#" class="list-group-item">货架</a></li>
            <li><a href="#" class="list-group-item">商品</a></li>
            <li><a href="#" class="list-group-item">促销和新品</a></li>
            <li><a href="#" class="list-group-item">陈列图套发布</a></li>
            <li><a href="#" class="list-group-item">配置查看用户</a></li>
            <li><a href="#" class="list-group-item">发布陈列通知</a></li>
            <li><a href="#" class="list-group-item">门店平面图</a></li>
            <li><a href="#" class="list-group-item">陈列报表</a></li>
            <li><a href="#" class="list-group-item">智能补货</a></li>
            <li><a href="#" class="list-group-item">系统管理</a></li>
        </ul>
    </div>
    <div class="side hide">
        <li class="list-group-item">
              <a href="#"><button type="button" class="btn btn-danger">10待添加</button></a>
              <a href="#"><button type="button" class="btn btn-danger btn_s">9待添加</button></a>
          </li>
          <li class="list-group-item">
              <a href="#"><button type="button" class="btn btn-success">9待添加</button></a>
              <a href="#"><button type="button" class="btn btn-success btn_s">9待添加</button></a>
          </li>
          <li class="list-group-item">
              <a href="#"><button type="button" class="btn btn-primary">9待添加</button></a>
              <a href="#"><button type="button" class="btn btn-primary btn_s">9待添加</button></a>
          </li>
          <li class="list-group-item">
              <a href="#"><button type="button" class="btn btn-warning">9待添加</button></a>
              <a href="#"><button type="button" class="btn btn-warning btn_s">9待添加</button></a>
          </li>
          <li class="list-group-item">
              <a href="#"><button type="button" class="btn btn-info">8待添加</button></a>
              <a href="#"><button type="button" class="btn btn-info btn_s">8待添加</button></a>
          </li>
        </ul>
    </div>
</body>
</html>

css样式

/*这是页面自定义css属性*/
.head{
    width: 282px;
    height: 100%;
    margin-top: 98px;
    margin-left: 20px;
    border-radius: 0;
}
.list-group-item:first-child {
    border-radius: 0;
}
.side{
    position: absolute;
    left: 300px;
    top: 98px;
    height: 422px;
    width: 942px;
    background-color:#337ab7;    /*背景颜色控制*/
    border: 2px solid red;
    border-right: none;
}
.side li{
    background-color:#337ab7;
    border: none;
    line-height: 50px;
    padding-left: 200px;
}
.btn_s{
   margin-left: 200px;
}
.btn {
  width: 180px;
}

自定义js

    /*页面主要触发事件在这里执行*/
    $(document).ready(function(){
        var intervalID;
        var curLi;
        $(".nav li a").mouseover(function(){
        curLi=$(this);/*获取操作对象*/
        intervalID=setInterval(onMouseOver);
        });
        function onMouseOver(){
        $(".active").css('border','1px solid #ddd')
        curLi.css('border','2px solid red')
        curLi.css('border-right','none')
        $(".active").removeClass("active");
        curLi.addClass("active");
        $(".show").removeClass("show");
        $(".side").eq($(".nav li a").index(curLi)).addClass("show");
        }

        $(".nav li a").click(function(){
        clearInterval(intervalID);
        $(".show").removeClass("show");
        $(".side").eq($(".nav li a").index(curLi)).addClass("show");
        $(".active").removeClass("active");
        curLi.addClass("active");
        });
        $('.head li a:first').trigger('mouseover')
    });

转载于:https://www.cnblogs.com/wuqingzangyue/p/5454420.html

weixin_34219944

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap实现的页面

实现的效果如图,使用bootstrap需要至少三个文件去bootstrap网上下载，然后使用这三个文件可以了使用方式，通过标签，class命名来引用已经定制好的html样式<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; ch...
复制链接

扫一扫