解决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个精彩的专题:

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

Javascript 相关文章推荐
利用js对象弹出一个层
Mar 26 Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
js 巧妙去除数组中的重复项
Jan 25 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 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
You might like
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
php无限遍历目录示例
2014/02/21 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
AngularJS入门教程之学习环境搭建
2014/12/06 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
4 种滚动吸顶实现方式的比较
2019/04/09 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
python动态加载变量示例分享
2014/02/17 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python读取properties配置文件操作示例
2018/03/29 Python
python库matplotlib绘制坐标图
2019/10/18 Python
python 动态调用函数实例解析
2019/10/21 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
《掌声》教学反思
2014/02/23 职场文书
民生工程实施方案
2014/03/22 职场文书
单位委托书范本
2014/04/04 职场文书
房展策划方案
2014/06/07 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
环境保护建议书
2014/08/26 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
2014年副班长工作总结
2014/12/10 职场文书
预备党员个人总结
2015/02/14 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle