首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

解决bootstrap导航栏navbar在IE8上存在缺陷的方法

Posted in Javascript onJuly 01, 2016

在Bootstrap的官网上，提供了一种导航栏的组件：
只要在站点文件夹放好JQ与Bootstrap输入如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>navbar</title>
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
 </head>

 <body>
 <div class="container">
 <nav class="navbar navbar-default" role="navigation">
 <div class="container-fluid">
 <div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed"
  data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
 </div>
 <div class="collapse navbar-collapse"
  id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
  <li class="active">
  <a href="#">Link</a>
  </li>
  <li>
  <a href="#">Link</a>
  </li>
  <li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu">
  <li>
   <a href="#">Action</a>
  </li>
  <li>
   <a href="#">Another action</a>
  </li>
  <li>
   <a href="#">Something else here</a>
  </li>
  <li class="divider"></li>
  <li>
   <a href="#">Separated link</a>
  </li>
  <li class="divider"></li>
  <li>
   <a href="#">One more separated link</a>
  </li>
  </ul>
  </li>
  </ul>
  <form class="navbar-form navbar-left" role="search">
  <div class="form-group">
  <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">
  Submit
  </button>
  </form>
  <ul class="nav navbar-nav navbar-right">
  <li>
  <a href="#">Link</a>
  </li>
  <li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu">
  <li>
   <a href="#">Action</a>
  </li>
  <li>
   <a href="#">Another action</a>
  </li>
  <li>
   <a href="#">Something else here</a>
  </li>
  <li class="divider"></li>
  <li>
   <a href="#">Separated link</a>
  </li>
  </ul>
  </li>
  </ul>
 </div>
 </div>
 </nav>
 asdddddddddddddddddddddddddddddddddddddddddddddddd
 </div>
 </body>
</html>

 则可以得到一个可以随窗口大小变化的导航栏：

解决bootstrap导航栏navbar在IE8上存在缺陷的方法

还可以把<nav class="navbar navbar-default" role="navigation">中的class值改成<nav class="navbar navbar-default navbar-fixed-top" role="navigation">则导航条，就一直悬挂在网页顶部。无论窗口怎么拖动，如果把class值改成<nav class="navbar navbar-inverse" role="navigation">，则可以得到一条黑色的导航条。

看起来很好用的样子，但是缺点是相当致命的。且不论此导航条提供的颜色就只有白色与黑色，两种色调，最可怕的是在IE8中直接以手机方式显示这个导航条，然而是在1440x900的屏幕分辨率之下。要知道IE8并不是IE6，是WIN7系统默认的浏览器。 

解决bootstrap导航栏navbar在IE8上存在缺陷的方法

这导致用户的要选择导航条的项目需要点击右方的按钮，之后下拉菜单则变成： 

解决bootstrap导航栏navbar在IE8上存在缺陷的方法

让网页内容直接被下拉正整整一大截。值得注意的是，IE8是现在WIN7默认的浏览器。姑且不论IE6在中国的绝对核心地位，即使在越来越多的用户选用WIN7的情况的大背景下，IE8的兼容性还是一个值得考虑的问题。 

所以，仅能不选择这种导航条作为网站的导航，可作为替代品的bootstrap的元素有两种，风格各异，一种是标签页，另一种则是按钮组，所谓的面包屑导航栏也并不是一种很好的解决方式，因为下拉菜单在bootstrap必须以按钮的方式呈现，写成文本的话，在IE8同样是吃力不讨好，当然，你完全可以选择抛开bootstrap，大神们的css都是自己手写，看不起框架。 

一、标签页

标签的基本样式如下，存在着下拉菜单需要bootstrap.js，bootstrap.css，jq的支持

解决bootstrap导航栏navbar在IE8上存在缺陷的方法

标签页不随浏览器的尺寸的变化而变化

解决bootstrap导航栏navbar在IE8上存在缺陷的方法

可以在一个网页内切换，也可以跳到其他页面，强力建议导航的标签页上的链接，都跳到其他与此页同样布局的网页。也就是同样存在此标签页，且位置一模一样的页面。
 代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Togglabletabs</title>
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
 </head>

 <body>
 <div class="container">
 <ul class="nav nav-tabs" role="tablist">
   <!--一个标签页组仅能有一个标签是active状态-->
 <li role="presentation" class="active">
    <!--以为跳到本页的home图层，不建议这样做，因为如果都写到一页的话，一页会占用很多代码-->
  <a href="#home" role="tab" data-toggle="tab">Home</a>
 </li>
 <li role="presentation">
  <a href="#profile" role="tab" data-toggle="tab">Profile</a>
 </li>
 <li role="presentation">
  <a href="#messages" role="tab" data-toggle="tab">Messages</a>
 </li>
 <li role="presentation">
  <a href="#settings" role="tab" data-toggle="tab">Settings</a>
 </li>
    <!--蕴含着下拉菜单的写法-->
 <li role="presentation" class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
     <!--这是下拉菜单的那个小三角形-->
  Dropdown <span class="caret"></span> </a>
  <ul class="dropdown-menu" role="menu">
  <li role="presentation">
  <a href="#home" role="tab" data-toggle="tab">Home</a>
  </li>
  <li role="presentation">
  <a href="#profile" role="tab" data-toggle="tab">Profile</a>
  </li>
  <li role="presentation">
  <a href="#messages" role="tab" data-toggle="tab">Messages</a>
  </li>
  <li role="presentation">
  <a href="#settings" role="tab" data-toggle="tab">Settings</a>
  </li>
  </ul>
     <!--最后都跳到其他样式都相同的页，让浏览者感到没有跳转就对了，这样分开代码，以免一个网页的代码都集中在一个页面-->
  <li role="presentation">
  <a href="back.html" role="tab">The other pages</a>
  </li>
 </li>
 </ul>

 <!--如果标签页是跳到本页图层的，就在这里写图层的内容。-->
 <div class="tab-content">
 <div role="tabpanel" class="tab-pane active" id="home">
  Home
 </div>
 <div role="tabpanel" class="tab-pane" id="profile">
  Profile
 </div>
 <div role="tabpanel" class="tab-pane" id="messages">
  Messages
 </div>
 <div role="tabpanel" class="tab-pane" id="settings">
  Settings
 </div>
 </div>
   
 </div>
 </body>
</html>

 二、选择按钮组

这段笔者改了又改，主要是笔者对于此组件的理解不够透彻。
 一个铺满页面的选择按钮组基本样式如下， 

解决bootstrap导航栏navbar在IE8上存在缺陷的方法

会随着浏览器的尺寸改变而改变，当然，当被压缩到极致时，不会像bootstrap自带的导航条navbar那样收起来，静静地躺在一个按钮中，

解决bootstrap导航栏navbar在IE8上存在缺陷的方法

这种选择按钮组是可以毫无疑问地兼容IE8的，只是没有下拉菜单的按钮组其实是一个超级链接，用<a>标签，而不是<button>标签，但对比于一般的<a>标签，此<a>标签的class上button的代码，具体见代码。此按钮组的代码实在是太特殊了。
具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>按钮组buttongroup</title>
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/bootstrap.js"></script>
 </head>

 <body>
 <!--要求按钮组铺满整个页面-->
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 <!--不存在下拉菜单的按钮这样写，为按钮定义链接比较少见，请注意-->
 <a href="#" class="btn btn-success"> Left </a>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-success">
  Middle
 </button>
 </div>
 <div class="btn-group">
 <button type="button" class="btn btn-success">
  Right
 </button>
 </div>
 <!--存在下拉菜单的按钮这样写-->
 <div class="btn-group">
 <button type="button" class="btn btn-success dropdown-toggle"
  data-toggle="dropdown">
  Dropdown
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu">
  <li>
  <a href="#">Dropdown link</a>
  </li>
  <li>
  <a href="#">Dropdown link</a>
  </li>
 </ul>
 </div>
 </div>
 </body>
</html>

三、面板加表格，内嵌普通超链接文字 

解决bootstrap导航栏navbar在IE8上存在缺陷的方法

最普通的、最简单的事情往往是最实用的事情，不过这里使用表格来布局，而不是把页面划分成12份的栅格系统。因为12份遇到一些如5份的栏目并不好平均分配。
此面板使用了bootstrap提供的面板元素，同样可以根据窗口大小来自动调整。
代码比上面的两种解决方案简单的多，但同时也没有这么炫。不过朴素实用确实真的。

<!--这个节点可以不要，放在一个容器container里面只是为了好截图，不会充满整个窗口-->
 <div class="container">
   <!--只有body的panel，改变样式仅改变边框颜色-->
 <div class="panel panel-default">
 <div class="panel-body" style="text-align: center">
  <table border="0" width="100%">
  <tr>
      <!--如果是六项则可以用bootstrap的栅格系统，每列为2格，如果是7项，那么一个单元格则占100/7=14%的大小。-->
  <td width="20%">
  <a href="#">项目一</a>
  </td>
  <td width="20%">
  <a href="#">项目二</a>
  </td>
  <td width="20%">
  <a href="#">项目三</a>
  </td>
  <td width="20%">
  <a href="#">项目四</a>
  </td>
  <td width="20%">
  <a href="#">项目五</a>
  </td>
  </tr>
  </table>
 </div>
 </div>
 </div>

以上三种为解决bootstrap导航栏navbar在IE8上存在缺陷的方案。个人认为第一种有点少见与另类，第二种是笔者最推荐的，第三种觉得需要运用到表格，能避免则尽量避免吧。可以把选择按钮组放到一个面板里面，取代第三种上面的文字、表格内容也是可以。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

解决bootstrap导航栏navbar在IE8上存在缺陷的方法

- Author -

yongh701

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
May 28 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
JS中数据结构之栈
Jan 01 Javascript
vue请求服务器数据后绑定不上的解决方法
Oct 30 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 #Javascript
全面了解JavaScript的数据类型转换
Jul 01 #Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 #Javascript
浅谈JavaScript中的分支结构
Jul 01 #Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 #Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 #Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 #Javascript
http_stub_status_module(1) RTMP(1) TypeScript(2) keeplive_timeout(1) BufferPool(1) text-shadow(1) 缓存机制(1) 复合索引(1) zabbix(9) location(2)
You might like
PHP中动态HTML的输出技术
2006/10/09 PHP
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
python实现图片批量剪切示例
2014/03/25 Python
浅析Python多线程下的变量问题
2015/04/28 Python
用python实现对比两张图片的不同
2018/02/05 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
python连接mongodb集群方法详解
2020/02/13 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
Lookfantastic阿联酋官网：英国知名美妆护肤购物网站
2020/05/26 全球购物
党员学习十八大感想
2014/01/17 职场文书
教师党员公开承诺书
2014/03/25 职场文书
房屋委托书范本
2014/04/04 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js