bootstrap实现的自适应页面简单应用示例


Posted in Javascript onMarch 09, 2017

本文实例讲述了bootstrap实现的自适应页面简单应用。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' href='http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css'>
  <style>
    .tNav{
      margin-top: 10px;
      border-bottom-style: none;
    }
    .bNav{
      text-align: center;
      height: 50px;
      line-height: 50px;
      font-size: 20px;
    }
    #btnNavList{
      font-size: 20px;
      position: absolute;
      top: 15px;
      right: 20px;
    }
    #btnNavList:hover{
      cursor: pointer;
    }
    .bNav:hover{
      background: #EED2EE;
      cursor: pointer;
    }
    #btnNavList,
    #normalTNav,
    #btnNavList-nav,
    #btnMess-nav,
    #btnMore-nav{
      display: none;
    }
    #btnNavList-nav,
    #btnMess-nav,
    #btnMore-nav{
      text-align: center;
      background: #FFF0F5;
      position: fixed;
      right: 0;
      width: 100%;
      filter:alpha(opacity=80);
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      opacity: 0.8;
    }
    #btnNavList-nav{
      top: 50px;
    }
    #btnMess-nav,
    #btnMore-nav{
      bottom: 50px;
    }
    #btnNavList-nav a,
    #btnMess-nav a,
    #btnMore-nav a{
      display: block;
      text-decoration: none;
      height: 50px;
      line-height: 50px;
    }
    #btnNavList-nav a{
      border-bottom: 1px solid #EED2EE;
    }
    #btnMess-nav a,
    #btnMore-nav a{
      border-top: 1px solid #EED2EE;
    }
    #btnNavList-nav a:hover,
    #btnMess-nav a:hover,
    #btnMore-nav a:hover{
      background: #EED2EE;
      cursor: pointer;
    }
    .content{
      margin: 70px 0;
    }
  </style>
</head>
<body>
  <nav class='navbar navbar-default navbar-fixed-top'>
    <div class='container-fluid'>
      <div class='navbar-header tNavLogo'>
        <span class='glyphicon glyphicon-th-list' aria-hidden='true' id='btnNavList'></span>
        <a class='navbar-brand' href='#'>Logo</a>
      </div>
      <ul class='nav nav-tabs tNav' id='normalTNav'>
        <li role='presentation'><a href='#'>基础信息</a></li>
        <li role='presentation'><a href='#'>基地订单</a></li>
        <li role='presentation'><a href='#'>总部订单</a></li>
        <li role='presentation'><a href='#'>发货结算</a></li>
        <li role='presentation'><a href='#'>生产物流</a></li>
        <li role='presentation'><a href='#'>库存查询</a></li>
      </ul>
    </div>
  </nav>
  <div class='content'></div>
  <nav class='navbar navbar-default navbar-fixed-bottom'>
    <div class='container-fluid'>
      <div class='row'>
        <div class='col-xs-3 bNav' id='btnHome'>
          <span class='glyphicon glyphicon-home' aria-hidden='true'></span>
        </div>
        <div class='col-xs-3 bNav' id='btnUser'>
          <span class='glyphicon glyphicon-user' aria-hidden='true'></span>
        </div>
        <div class='col-xs-3 bNav' id='btnMess'>
          <span class='glyphicon glyphicon-comment' aria-hidden='true'></span>
        </div>
        <div class='col-xs-3 bNav' id='btnMore'>
          <span class='glyphicon glyphicon-option-horizontal' aria-hidden='true'></span>
        </div>
      </div>
    </div>
  </nav>
  <div id='btnNavList-nav'>
    <div><a href='#'>基础信息</a></div>
    <div><a href='#'>基地订单</a></div>
    <div><a href='#'>总部订单</a></div>
    <div><a href='#'>发货结算</a></div>
    <div><a href='#'>生产物流</a></div>
    <div><a href='#'>库存查询</a></div>
  </div>
  <div id='btnMess-nav'>
    <div><a href='#'>我的消息1</a></div>
    <div><a href='#'>我的消息2</a></div>
    <div><a href='#'>我的消息3</a></div>
  </div>
  <div id='btnMore-nav'>
    <div><a href='#'>当前版本</a></div>
    <div><a href='#'>意见反馈</a></div>
    <div><a href='#'>联系方式</a></div>
    <div><a href='#'>关于</a></div>
  </div>
  <script src='http://cdn.bootcss.com/zepto/1.1.4/zepto.min.js'></script>
  <script>
    (function(){
      function SHOW(obj){
        obj.css('display','block');
      }
      function HIDE(obj){
        obj.css('display','none');
      }
      function TOGGLE(e){
        var obj = $(e);
        if(obj.css('display') === 'none'){
          obj.css('display', 'block');
        }
        else if(obj.css('display') === 'block'){
          obj.css('display', 'none');
        }
      }
      function tNavControl(){
        var w = window.document.body.offsetWidth;
        var objBtn = $('#btnNavList');
        var objNor = $('#normalTNav');
        var objUnNor = $('#btnNavList-nav');
        if(w <= 768){//小屏幕
          SHOW(objBtn);
          //SHOW(objUnNor);
          HIDE(objNor)
        }
        else{
          HIDE(objBtn);
          HIDE(objUnNor);
          SHOW(objNor);
        }
      }
      $('#btnNavList').on('click', function(){
        HIDE($('#btnMess-nav'));
        HIDE($('#btnMore-nav'));
        TOGGLE('#btnNavList-nav');
        return false;
      })
      $('#btnMess').on('click', function(){
        HIDE($('#btnNavList-nav'));
        HIDE($('#btnMore-nav'));
        TOGGLE('#btnMess-nav');
        return false;
      })
      $('#btnMore').on('click', function(){
        HIDE($('#btnNavList-nav'));
        HIDE($('#btnMess-nav'));
        TOGGLE('#btnMore-nav');
        return false;
      })
      $('body').on('click', function(){
        HIDE($('#btnNavList-nav'));
        HIDE($('#btnMess-nav'));
        HIDE($('#btnMore-nav'));
      })
      window.onload = function(){
        tNavControl();
        var str = '<div class="list-group">';
        for(var i=0; i<=100; i++){
          str +=
             '<a class="list-group-item" href="#" rel="external nofollow" >'
            + '<span class="badge">' + i + '</span>'
            + '<h4 class="list-group-item-heading">' + '大标题' + i + '</h4><br/>'
            + '<p class="list-group-item-text">' + '备注' + i + '<br/>...' + '</p>'
            + '<span class="glyphicon glyphicon-hand-up" aria-hidden="true" style="float:right;"></span>'
            + '<br/>'
            + '</a>';
        }
        str += '</div>';
        $('.content').html(str);
      }
      window.onresize = tNavControl;
    })();
  </script>
</body>
</html>

运行效果图:

bootstrap实现的自适应页面简单应用示例

Javascript 相关文章推荐
jquery制作多功能轮播图插件
Apr 02 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
JQuery在循环中绑定事件的问题详解
Jun 02 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
4 种滚动吸顶实现方式的比较
Apr 09 Javascript
简单了解JavaScript弹窗实现代码
May 07 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 Javascript
js实现3D图片环展示效果
Mar 09 #Javascript
Vue监听数组变化源码解析
Mar 09 #Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 #Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 #Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 #Javascript
js实现显示手机号码效果
Mar 09 #Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 #Javascript
You might like
构建简单的Webmail系统
2006/10/09 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
大学活动策划书范文
2014/01/10 职场文书
公司企业表扬信
2014/01/11 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
户外活动策划方案
2014/03/12 职场文书
海飞丝的广告词
2014/03/20 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书