快捷導(dǎo)航

解決bootstrap導(dǎo)航欄navbar在IE8上存在缺陷的方法

更新時(shí)間：2016年07月01日 09:42:35 作者：yongh701

這篇文章主要為大家詳細(xì)介紹了解決bootstrap導(dǎo)航欄navbar在IE8上存在缺陷的方法,需要的朋友可以參考下

在Bootstrap的官網(wǎng)上，提供了一種導(dǎo)航欄的組件：
只要在站點(diǎn)文件夾放好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>

則可以得到一個(gè)可以隨窗口大小變化的導(dǎo)航欄：

還可以把<nav class="navbar navbar-default" role="navigation">中的class值改成<nav class="navbar navbar-default navbar-fixed-top" role="navigation">則導(dǎo)航條，就一直懸掛在網(wǎng)頁(yè)頂部。無(wú)論窗口怎么拖動(dòng)，如果把class值改成<nav class="navbar navbar-inverse" role="navigation">，則可以得到一條黑色的導(dǎo)航條。

看起來(lái)很好用的樣子，但是缺點(diǎn)是相當(dāng)致命的。且不論此導(dǎo)航條提供的顏色就只有白色與黑色，兩種色調(diào)，最可怕的是在IE8中直接以手機(jī)方式顯示這個(gè)導(dǎo)航條，然而是在1440x900的屏幕分辨率之下。要知道IE8并不是IE6，是WIN7系統(tǒng)默認(rèn)的瀏覽器。

這導(dǎo)致用戶的要選擇導(dǎo)航條的項(xiàng)目需要點(diǎn)擊右方的按鈕，之后下拉菜單則變成：

讓網(wǎng)頁(yè)內(nèi)容直接被下拉正整整一大截。值得注意的是，IE8是現(xiàn)在WIN7默認(rèn)的瀏覽器。姑且不論IE6在中國(guó)的絕對(duì)核心地位，即使在越來(lái)越多的用戶選用WIN7的情況的大背景下，IE8的兼容性還是一個(gè)值得考慮的問(wèn)題。

所以，僅能不選擇這種導(dǎo)航條作為網(wǎng)站的導(dǎo)航，可作為替代品的bootstrap的元素有兩種，風(fēng)格各異，一種是標(biāo)簽頁(yè)，另一種則是按鈕組，所謂的面包屑導(dǎo)航欄也并不是一種很好的解決方式，因?yàn)橄吕藛卧赽ootstrap必須以按鈕的方式呈現(xiàn)，寫成文本的話，在IE8同樣是吃力不討好，當(dāng)然，你完全可以選擇拋開(kāi)bootstrap，大神們的css都是自己手寫，看不起框架。

一、標(biāo)簽頁(yè)

標(biāo)簽的基本樣式如下，存在著下拉菜單需要bootstrap.js，bootstrap.css，jq的支持

標(biāo)簽頁(yè)不隨瀏覽器的尺寸的變化而變化

可以在一個(gè)網(wǎng)頁(yè)內(nèi)切換，也可以跳到其他頁(yè)面，強(qiáng)力建議導(dǎo)航的標(biāo)簽頁(yè)上的鏈接，都跳到其他與此頁(yè)同樣布局的網(wǎng)頁(yè)。也就是同樣存在此標(biāo)簽頁(yè)，且位置一模一樣的頁(yè)面。
代碼如下：

 <!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">
   <!--一個(gè)標(biāo)簽頁(yè)組僅能有一個(gè)標(biāo)簽是active狀態(tài)-->
 <li role="presentation" class="active">
    <!--以為跳到本頁(yè)的home圖層，不建議這樣做，因?yàn)槿绻紝懙揭豁?yè)的話，一頁(yè)會(huì)占用很多代碼-->
  <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>
    <!--蘊(yùn)含著下拉菜單的寫法-->
 <li role="presentation" class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
     <!--這是下拉菜單的那個(gè)小三角形-->
  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>
     <!--最后都跳到其他樣式都相同的頁(yè)，讓瀏覽者感到?jīng)]有跳轉(zhuǎn)就對(duì)了，這樣分開(kāi)代碼，以免一個(gè)網(wǎng)頁(yè)的代碼都集中在一個(gè)頁(yè)面-->
  <li role="presentation">
  <a href="back.html" role="tab">The other pages</a>
  </li>
 </li>
 </ul>

 <!--如果標(biāo)簽頁(yè)是跳到本頁(yè)圖層的，就在這里寫圖層的內(nèi)容。-->
 <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>

二、選擇按鈕組

這段筆者改了又改，主要是筆者對(duì)于此組件的理解不夠透徹。
一個(gè)鋪滿頁(yè)面的選擇按鈕組基本樣式如下，

會(huì)隨著瀏覽器的尺寸改變而改變，當(dāng)然，當(dāng)被壓縮到極致時(shí)，不會(huì)像bootstrap自帶的導(dǎo)航條navbar那樣收起來(lái)，靜靜地躺在一個(gè)按鈕中，

這種選擇按鈕組是可以毫無(wú)疑問(wèn)地兼容IE8的，只是沒(méi)有下拉菜單的按鈕組其實(shí)是一個(gè)超級(jí)鏈接，用<a>標(biāo)簽，而不是<button>標(biāo)簽，但對(duì)比于一般的<a>標(biāo)簽，此<a>標(biāo)簽的class上button的代碼，具體見(jiàn)代碼。此按鈕組的代碼實(shí)在是太特殊了。
具體代碼如下：

 <!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>
 <!--要求按鈕組鋪滿整個(gè)頁(yè)面-->
 <div class="btn-group btn-group-justified">
 <div class="btn-group">
 <!--不存在下拉菜單的按鈕這樣寫，為按鈕定義鏈接比較少見(jiàn)，請(qǐng)注意-->
 <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>

三、面板加表格，內(nèi)嵌普通超鏈接文字

最普通的、最簡(jiǎn)單的事情往往是最實(shí)用的事情，不過(guò)這里使用表格來(lái)布局，而不是把頁(yè)面劃分成12份的柵格系統(tǒng)。因?yàn)?2份遇到一些如5份的欄目并不好平均分配。
此面板使用了bootstrap提供的面板元素，同樣可以根據(jù)窗口大小來(lái)自動(dòng)調(diào)整。
代碼比上面的兩種解決方案簡(jiǎn)單的多，但同時(shí)也沒(méi)有這么炫。不過(guò)樸素實(shí)用確實(shí)真的。

<!--這個(gè)節(jié)點(diǎn)可以不要，放在一個(gè)容器container里面只是為了好截圖，不會(huì)充滿整個(gè)窗口-->
 <div class="container">
   <!--只有body的panel，改變樣式僅改變邊框顏色-->
 <div class="panel panel-default">
 <div class="panel-body" style="text-align: center">
  <table border="0" width="100%">
  <tr>
      <!--如果是六項(xiàng)則可以用bootstrap的柵格系統(tǒng)，每列為2格，如果是7項(xiàng)，那么一個(gè)單元格則占100/7=14%的大小。-->
  <td width="20%">
  <a href="#">項(xiàng)目一</a>
  </td>
  <td width="20%">
  <a href="#">項(xiàng)目二</a>
  </td>
  <td width="20%">
  <a href="#">項(xiàng)目三</a>
  </td>
  <td width="20%">
  <a href="#">項(xiàng)目四</a>
  </td>
  <td width="20%">
  <a href="#">項(xiàng)目五</a>
  </td>
  </tr>
  </table>
 </div>
 </div>
 </div>

以上三種為解決bootstrap導(dǎo)航欄navbar在IE8上存在缺陷的方案。個(gè)人認(rèn)為第一種有點(diǎn)少見(jiàn)與另類，第二種是筆者最推薦的，第三種覺(jué)得需要運(yùn)用到表格，能避免則盡量避免吧。可以把選擇按鈕組放到一個(gè)面板里面，取代第三種上面的文字、表格內(nèi)容也是可以。

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個(gè)精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: