实现的效果如图,使用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')

    });

Bootstrap实现的页面的更多相关文章

  1. bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 20分钟成功编写bootstrap响应式页面 就这么简单

    最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用 ...

  3. bootstrap validate 实现页面动态验证（formvalidate）

    关于基本的bootstrap validate 验证方法外面有许多博客上都有讲解,我就不在过多叙述了.大家也可以去看官网api:http://bv.doc.javake.cn/api/ 今天要说的是动 ...

  4. Bootstrap模板代码+页面自适应页面的案例代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  5. Bootstrap 4/3 页面基础模板 与 兼容旧版本浏览器

    Bootstrap 3 与 4 差别很大,目录文件结构.所引入的内容也不同,这里说说一下 Bootstrap 引入的文件.网页模板和兼容性问题.本网站刚刚搭建好,正好发一下文章原来测试网站. Boot ...

  6. bootstrap+css进行页面布局

    效果 用到了bootstrap中的表格css.圆形css.以及上一页下一页css. 布局页面,填充数据,实现js动态效果(比如点击下一页,上一页),逐步完善. 不仅仅要会使用bootstrap中的样式 ...

  7. 利用Bootstrap搭建网站页面

    先来看下页面效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  8. Bootstrap 搭建基础页面

    基于Bootstrap实现下图所示效果的页面,一个居中的标题和一个大按钮: <!DOCTYPE html> <html lang="zh-cn"> < ...

  9. bootstrap在 刷新页面，tab选择页面不会改变。

    您可以直接复制代码 注意在同级别文件夹中引用 相应js 和 css. 实现tab影响 关键看bootstrap的 data-toggle= tab <html lang="en&quo ...

随机推荐

  1. "/usr/local/openresty/nginx/html/index.html" is forbidden (13: Permission denied), client: 10.0.4.118, server: localhost, request: "GET / HTTP/1.1"

    openrestry 安装之后 报"/usr/local/openresty/nginx/html/index.html" is forbidden (13: Permission ...

  2. java删除递归文件夹及文件夹下文件

    public static void delUrlLocalFile(String urlPath) { File file = new File(urlPath); if(file.isDirect ...

  3. Linux----文件I/O

    1.文件描写叙述符:每次我们打开一个文件,就会得到一个相应于该文件的较小的整数,这个整数就是这个文件的文件描写叙述符. 在shell操作中,0,1,2这三个文件描写叙述附总是打开的.一般是指向shel ...

  4. MySql—修改权限

    MySQL 赋予用户权限命令的简单格式可概括为: grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删除 数据库中所有表数据的权利. grant sele ...

  5. 同学帮帮移动 H5 弹出层类组件：txbb-pop

    Txbb.Pop 同学帮帮弹出层类组件,简洁.无依赖,使用 CSS3 实现动画效果. 为什么要再造一遍轮子 弹出层是常见的业务场景,而且弹出层的业务场景很简单,没必要使用大而全的库,并且,我们经常会有 ...

  6. 微信抢红包微信 PHP代码实现

    header("Content-Type: text/html;charset=utf-8");//输出不乱码,你懂的 $total=10;//红包总额 $num=8;// 分成8 ...

  7. datagrid带查询带分页

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  8. 性能测试：压测中TPS上不去的几种原因分析（就是思路要说清楚）

    转https://www.cnblogs.com/imyalost/p/8309468.html 先来解释下什么叫TPS: TPS(Transaction Per Second):每秒事务数,指服务器 ...

  9. django用户认证系统——重置密码7

    当用户不小心忘记了密码时,网站需要提供让用户找回账户密码的功能.在示例项目中,我们将发送一封含有重置用户密码链接的邮件到用户注册时的邮箱,用户点击收到的链接就可以重置他的密码,下面是具体做法. 发送邮 ...

  10. python 的时间复杂度

    Python内置方法的时间复杂度 本文翻译自Python Wiki 本文基于GPL v2协议,转载请保留此协议. 本页面涵盖了Python中若干方法的时间复杂度(或者叫“大欧”,“Big O”).该时 ...