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 12 Javascript
深入理解javascript变量声明
Nov 20 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
node.js操作mysql简单实例
May 25 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
JavaScript实现复选框全选功能
Apr 11 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
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
javascript self对象使用详解
2016/10/18 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
vue 动态创建组件的两种方法
2020/12/31 Vue.js
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
如何实现删除numpy.array中的行或列
2018/05/08 Python
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python 私有化操作实例分析
2019/11/21 Python
django修改models重建数据库的操作
2020/03/31 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
刊首寄语大全
2014/04/11 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
导游词之西安骊山
2019/12/03 职场文书
pandas进行数据输入和输出的方法详解
2022/03/23 Python