实现的效果如图,使用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. Oracle记录学习

    --基本函数--select name,count(id) from work_test group by name having count(id)>1--select upper(name) ...

  2. （转）Unity笔记之编辑器（CurveField、DoubleField、EnumMaskField、EnumPopup） ... ...

    1. CurveField创建的是一个类型为AnimationCurve的曲线变量,看代码: [code]csharpcode: using UnityEngine; using System.Col ...

  3. Amazon Virtual Private Cloud（虚拟专有网络）官方文档通读

    一.什么是Amazon VPC? 参考资料: 官网文档 https://docs.aws.amazon.com/zh_cn/AmazonVPC/latest/UserGuide/VPC_Introdu ...

  4. cocos3.x 实现android沉浸式模式(全屏,隐藏导航栏即虚拟键)

    只有在Android 4.4及以上系统才支持沉浸式模式,修改 AppActivity代码如下: @Override public Cocos2dxGLSurfaceView onCreateView( ...

  5. 面试之Java持久层(十)

    91,什么是ORM?         对象关系映射(Object-Relational Mapping,简称ORM)是一种为了解决程序的面向对象模型与数据库的关系模型互不匹配问题的技术: 简单的说,O ...

  6. 160622、详解JavaScript变量提升

    变量在程序中随处可见.它们是一些始终在相互影响,相互作用的的数据和逻辑.正是这些互动使应用程序活了起来. 在JavaScript中使用变量很重要的一方面就是变量的提升 —— 它决定了一个变量何时可以被 ...

  7. sqlserver----记录转载（行转列）、列转行、pivot、unpivot

    CREATE TABLE [StudentScores] ( ), --学生姓名 ), --科目 [Score] FLOAT, --成绩 ) 如果我想知道每位学生的每科成绩,而且每个学生的全部成绩排成 ...

  8. 巨蟒python全栈开发-第11天 第一类对象 闭包 迭代器

    一.今日主要内容总览(重点) 1.第一类对象->函数名=>变量名 (1)函数对象可以像变量一样进行赋值 (2)还可以作为列表的元素进行使用 (3)还可以作为返回值返回 (4)还可以作为参数 ...

  9. php自定义函数: 下载本地服务器的大文件

    // 使用方法 $file_path = './a.zip'; // 只能是本地服务器文件, 多大的文件都支持!! down_file($file_path); // 函数参数: 服务器文件路径,下载 ...

  10. Centos 软链接命令（十）

    链接命令:ln  (link) ln -s [源文件] [目标文件] 功能描述:生成链接文件 选项: -s 创建软链接 硬链接特征: 1,拥有相同的i节点和存储block块,可以看作是同一个文件: 2 ...