"Bootstrap" navigation bar navbar defect and solution on PC

On Bootstrap's official website, a navigation bar component is available:

Just put the JQ and bootstrap in the site folder and 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 "> the navigation bar, has been hanging at the top of the page. No matter 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 deadly. And regardless of the color provided by this navigation bar is only white and black, the two tones, the most frightening is to display the navigation bar directly in the IE8, but at 1440x900 's screen resolution.

This causes the user to select the item on the navigation bar that needs to click on the right button, and then the drop-down menu becomes:

Let the content of the Web page be pulled straight down a whole big section. It is important to note that IE8 is now the default browser for WIN7. Regardless of IE6 in China's absolute core position, even in a growing number of users to choose WIN7 situation of the background, IE8 compatibility is a question worth considering.
Therefore, only can not choose this navigation bar as a site navigation, can be used as a substitute for the bootstrap elements have two, different styles, one is the label page, the other is a button group, so-called breadcrumb navigation bar is not a good solution, Because the drop-down menu in the bootstrap must be presented in the form of buttons, written text, in the IE8 is also thankless, of course, you can choose to throw away bootstrap, the great god of CSS are their own handwriting, despise the framework.

First, 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

The tab does not change depending on the size of the browser,

You can switch between pages, or you can jump to another page,
The links on the tabs that are strongly recommended for navigation jump to other pages that are similarly laid out on this page. This is the same page with the same page and location.
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
A page-Full selection button group has the following basic styles,

Will change with the size of the browser, of course, when compressed to the extreme, will not be like Bootstrap's own navigation bar NavBar to put away, quietly lying in a button,

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 ">
This is the solution to solve the defects of the navigation bar NavBar on the PC.
"Bootstrap" navigation bar navbar defect and solution on PC