实现的效果如图,使用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. @override 报错问题

    Java的Eclipse工程换一台电脑后编译总是@override报错,把@override去掉就好了,但不能从根本上解决问题,因为有时候有@override的地方超级多. 这是jdk的问题,@Ove ...

  2. Nexus 5 刷机 - Android 5.0 Lollipop

    Nexus刷机 : 官方地址 刷机步骤 下载相应的安装包 连接USB 重启手机,进入BootLoader界面 : 使用命令 adb reboot bootloader 关机; 音量键下 + 电源键 ...

  3. 图像处理之优化---任意半径局部直方图类算法在PC中快速实现的框架

    在图像处理中,局部算法一般来说,在很大程度上会获得比全局算法更为好的效果,因为他考虑到了图像领域像素的信息,而很多局部算法可以借助于直方图获得加速.同时,一些常规的算法,比如中值滤波.最大值滤波.最小 ...

  4. 获取WPF的DataGrid控件中，是否存在没有通过错误验证的Cell

     /// <summary>         /// 获取DataGrid的所有行是否存在验证错误.         /// </summary>         /// &l ...

  5. MathType可以编辑带圈乘号吗

    在数学中有很多符号,可能这些符号我们用得上,也有些符号我们很少用,甚至用不上,但是我们用不上,不代表不存在这个符号,也不代表别人用不上,只是各自所涉及到的知识领域不一样而已.而对于加减乘除运算,几乎每 ...

  6. gcc/g++ 实战之编译的四个过程

    gcc和g++分别是GNU(一个开源组织)的c&c++编译器   对于.c后缀的文件,gcc把它当做是C程序,g++当做是C++程序:对于.cpp后缀的文件,gcc和g++都会当做c++程序. ...

  7. c++11小计

    [capture] (parameters) mutable -> return-type { statement } " (parameters)" 和 "-&g ...

  8. OGRE 保存纹理到文件

    Ogre::TexturePtr tex = Ogre::TextureManager::getSingleton( ).getByName( "YaHeiTexture" ); ...

  9. python bottle学习（三）动态路由配置（通配符）

    from bottle import (run, route, get, post, default_app, Bottle) @route('/', method='GET') @route('/i ...

  10. iOS-地图开发 Plist文件设置权限

    解决办法: 在.Plist文件中添加 <key>NSLocationUsageDescription</key> <string>请点击“好”以允许访问. 若不允许 ...