"Bootstrap" navigation bar navbar defect and solution on PC

Source: Internet
Author: User
Tags button type

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.