实现的效果如图,使用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. Supervisord常见用法和介绍

    Supervisord是用Python实现的一款非常实用的进程管理工具.supervisord会帮你把管理的应用程序转成daemon程序,而且可以方便的通过命令开启.关闭.重启等操作,而且它管理的进程 ...

  2. 如何Vue-cli开始使用在Vue.js项目中启动TDD（测试驱动开发）

    通常,使用测试驱动开发(TDD)最困难的部分是开始.你必须下载带有奇怪依赖项的软件包,让测试套件与你的构建系统协同工作,然后你必须弄清楚如何编写一个测试!难怪这么多的开发者在你提起它的时候就开始跑开了 ...

  3. JVM参数MetaspaceSize的误解

    前言 昨天谢照东大神在群里提出一个问题:怎么查看Metaspace里具体包含的是什么,起因是他的某个服务设置了-XX:MetaspaceSize=512m -XX:MaxMetaspaceSize=5 ...

  4. sql server 订阅发布的配置

    网上sql server 的发布订阅功能的教程很多,但是很多东西写的不是很详细,常常给人误解,现在根据自己的情况从新整理一下: 1.服务器端  然后一路下一步, 2.订阅端(重点) 给服务器在本地取一 ...

  5. ubuntu卸载vmware player

    sudo vmware-installer -u vmware-player 转自: http://zhidao.baidu.com/link?url=lapkBNBGIUz_mo6603CQgi_2 ...

  6. combox使用要点

    <select id="node_type" name="node_type" class="easyui-combobox" req ...

  7. mybatis 处理 mysql 表中的 text类型的 字段

    在mysql 中 text类型的字段: service_detail text NULL 服务描述   . 对应java文件中 model 中的 String:  private String ser ...

  8. 如何正确使用Google搜索

    “” 双引号表示完全匹配,结果中必须出现与搜索文本完全相同的内容 A -B 搜索包含A但不包含B的结果(请注意A后面的空格不能省略) filetype 搜索对应类型的文件.例如:中国防火墙 filet ...

  9. Docker入门与应用系列（七）Docker图形界面管理之DockerUI

    1.dockeruiDockerrUI是一个基于Docker API提供图形化页面简单的容器管理系统,支持容器管理.镜像管理.1.1 下载镜像 docker pull abh1nav/dockerui ...

  10. JAVA-各种类型之间转换 parse() 与valueOf()

    类型互转 1.各种类型转String 2.String转Bytes 3.数组转List 4.进制转换 5. parse 在 SimpleDateFormat 中是转换为Date类,其它的一些包装类都是 ...