• Bootstrap实现的页面


    实现的效果如图,使用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{
         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;
         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 {
       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')
        });
    
  • 相关阅读:
    python—内置函数-filter,map,reduce
    python—模块-练习
    python—模块-re正则表达式
    python—模块-logging
    python—模块-subprocess
    python—模块-hashlib加密
    python—模块-configparser
    SpringBoot结合设计模式(观察者模式、策略模式)- 个人记录
    Spring事务-随笔
    Servlet、Tomcat、SpringMVC-整理-随笔
  • 原文地址:https://www.cnblogs.com/wuqingzangyue/p/5454420.html
Copyright © 2020-2023  润新知