实现的效果如图,使用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. springboot查找配置文件路径的过程

    spring加载配置文件是通过listener监视器实现的,在springboot启动时: 在容器启动完成后会广播一个SpringApplicationEvent事件,而SpringApplicati ...

  2. "回车"（carriage return）和"换行"（line feed）

    “回车”(carriage return)和“换行”(line feed)这两个概念的来历: 在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33)的玩意,每秒钟可以打10 ...

  3. backbone Model调用save方法的时候提交方式

    horizon使用的是backbone框架,但是我们的后台api都是只接收post请求,请求的路径为/api/,根据backbone的官档解释: backbone的model.save方法会判断当前的 ...

  4. jquery监听事件on写法以及简单的拖拽效果

    引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...

  5. db2 设置表 not null

    db2将原表列notnull属性修改为null属性的方法   今天把自己遇到的一个小问题跟大家分享一下如何修改db2数据库表中列的属性--将列的非空属性改为允许空的属性,修改数据表的某一列属性其实很简 ...

  6. 图像jpeg压缩

    图像分割 8X8 颜色空间转换RGB->YCbCr 3个8X8的矩阵 离散余弦变换:(Discrete cosine transform),简称DCT. DCT转换后的数组中第一个是一个直线数据 ...

  7. spring-redis SortedSet类型成员的过期时间处理

    redis默认是只支持简单key的过期处理的,像SortedSet类型,也是针对整个set的过期处理,不支持对set的某个成员的过期处理: 为了解决这个问题,做法如下: 1.存储key及值信息到red ...

  8. Handler用Bundle传值

    package com.handler.cn; import android.app.Activity; import android.os.Bundle; import android.os.Han ...

  9. 分布式服务框架dubbo入门实例

    dubbo是一个分布式的服务架构,可直接用于生产环境作为SOA服务框架. 官网首页:http://dubbo.io/ ,官方用户指南 http://dubbo.io/User+Guide-zh.htm ...

  10. md5 算法类 java

    package com.sunyard.p2p.util; import java.security.MessageDigest; import java.security.NoSuchAlgorit ...