A method to solve the defects of NavBar on IE8 in bootstrap navigation bar _javascript skills

On the official web of Bootstrap, a navigation bar component is provided:
As long as you put JQ and bootstrap in the site folder, enter the following code:

 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

You can get a navigation bar that can vary with the size of the window:

You can also change the class value in the <nav class= "NavBar navbar-default" role= "navigation" to <nav class= "NavBar Navbar-default Navbar-fixed-top "role=" "Navigation" > Navigation bar, has been hanging at the top of the page. Regardless of how the window is dragged, if you change the class value to <nav class= "NavBar navbar-inverse" role= "navigation", you can get a black navigation bar.

It looks good, but the downside is pretty lethal. And regardless of the color provided by this navigation bar is white and black, the most frightening thing is to display the navigation bar directly on the phone in the IE8, but under the screen resolution of 1440x900. To know that IE8 is not IE6, is the WIN7 system default browser.

This causes the user to select the navigation bar items need to click on the right button, and then the Drop-down menu becomes:

Let the content of the Web page directly under the pull is a whole big cut. It is worth noting that IE8 is now the default browser for WIN7. Regardless of IE6 in China's absolute core position, even if more and more users choose WIN7 context, IE8 compatibility is a problem worth considering.

Therefore, only can not choose this navigation as a site navigation, can be used as a substitute for the elements of the bootstrap of two kinds, different styles, one is the label page, the other is a button group, the so-called bread crumbs navigation bar is not a very good way to solve, Because the Pull-down menu in the bootstrap must be presented as a button, written text, in the IE8 is also thankless, of course, you can choose to throw away the bootstrap, the great god of the CSS are their own handwriting, look down on the frame.

One, the label page

The basic style of the tag is as follows, there is a drop down menu that requires BOOTSTRAP.JS,BOOTSTRAP.CSS,JQ support

tab pages do not change with the size of the browser

You can switch within one page, or you can jump to other pages, and strongly suggest that the links on the tabs on the navigation page jump to other pages that have the same layout as this page. This is the same page that has the same location as this tab.
The code is as follows:

 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Second, select the button group

This part of the author changed and changed, mainly the author of this component's understanding is not thorough.
A full Page selection button group basic style is as follows,

Will change as the size of the browser changes, of course, when compressed to the extreme, will not be like bootstrap with the navigation bar navbar like that, quietly lying in a button,

This group of selection buttons can be no doubt compatible with IE8, except that the button group without the Pull-down menu is actually a hyperlink, with <a> tags, not <button> tags, but compared to the general <a> tags, this <a> The code for the button on the class of the tag, see the code specifically. The code for this group of buttons is too special.
The specific code is as follows:

 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Three, the Panel plus table, embedded normal hyperlink text

The most common, simplest things are often the most practical things, but use tables instead of dividing the pages into 12 grid systems. Because 12 of them meet some of the 5 parts of the column is not good evenly distributed.
This Panel uses the panel elements provided by bootstrap and can be adjusted automatically depending on the size of the window.
The code is much simpler than the two solutions above, but it's not as flashy. But simplicity and practicality really do.

<!--This node can not be placed in a container container inside just for a good screenshot, will not fill the window-->
 <div class= "container" >
   <!-- Only the body panel, changing the style only changes the border color-->
 <div class= "Panel Panel-default" >
 <div class= "Panel-body" style= " Text-align:center ">
  <table border=" 0 "width=" 100% ">
  <tr>
      <!-- If six items, you can use bootstrap grid system, each column 2, if 7 items, then one cell occupies the size of 100/7=14%. -->
  <td width= "20%" >
  <a href= "#" > Project one </a>
  </td>
  <td width= "20%" >
  <a href= "#" > Project two </a>
  </td>
  <td width= "20%" >
  <a href= "#" > Project Three </a>
  </td>
  <td width= "20%" >
  <a href= "#" > Project four </a>
  </td>
  <td width= "20%" >
  <a href= "#" > Project five </a>
  </td>
  </tr>
  </ table>
 </div>
 </div>
 </div>

The above three kinds of solutions to solve the defects of the bootstrap navigation bar NavBar on the IE8. Personally think that the first kind of rare and alternative, the second is the author's most recommended, the third feel the need to apply to the table, to avoid it as far as possible. You can put the selection button group into a panel, instead of the third type above the text, table content is also OK.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.