On the official website of Bootstrap, a navigation bar component is provided:
Just put 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"><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> <nav role="navigation"> <div> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#">Brand</a> </div> <div id="bs-example-navbar-collapse-1"> <ul> <li> <a href="#">Link</a> </li> <li> <a href="#">Link</a> </li> <li> <a href="#" data-toggle="dropdown">Dropdown <span></span> </a> <ul> <a href="#" data-toggle="dropdown">Dropdown <span></span> </a> <ul role="menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li></li> <li> <a href="#">Separated link</a> </li> <li></li> <li> <a href="#">Separated link</a> </li> <li></li> <li> <a href="#">One more separated link</a> </li> </li> </ul> </form role="search"> <div> <input type="text" placeholder="Search"> </div> <button type="submit"> Submit </button> </form> <ul> <li> <a href="#">Link</a> </li> <li> <a href="#" data-toggle="dropdown">Dropdown <span></span> </a> <ul role="menu"> <li> <a href="#">Action</a> </li> <li> <a href="#">Another action</a> </li> <li> <a href="#">Something else here</a> </li> <li></li> <li> <a href="#">Separated link</a> </li> </li> </li> </li> </ul> </div> </div> </nav> asddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
You can get a navigation bar that can vary with the size of the window:
You can also change the class value in <nav role="navigation"> to <nav role="navigation">, and the navigation bar will be hung on the top of the web page. No matter how the window is dragged, if you change the class value to <nav role="navigation">, you can get a black navigation bar.
It looks very useful, but its disadvantages are quite fatal. Regardless of the colors provided by this navigation bar are only white and black, two colors. The most terrifying thing is that the navigation bar is displayed directly on the phone in IE8, but it is below the screen resolution of 1440x900. You should know that IE8 is not IE6, but the default browser for WIN7 system.
This causes the user to select the item on the navigation bar to click the button on the right, and then the drop-down menu becomes:
Let the web page content be pulled down directly to a whole piece. It is worth noting that IE8 is the default browser for WIN7 now. Regardless of IE6's absolute core position in China, even in the context of more and more users choosing WIN7, IE8's compatibility is still a question worth considering.
Therefore, if you can only choose this kind of navigation bar as the navigation of the website, there are two types of bootstrap, which can be used as a substitute, with different styles, one is the tab page, and the other is the button group. The so-called breadcrumb navigation bar is not a good solution, because the drop-down menu must be presented in the bootstrap as a button. If it is written into text, it is also thankless in IE8. Of course, you can completely choose to put aside bootstrap, and the masters' css are handwritten by themselves and look down on the frame.
1. Tag page
The basic style of the tag is as follows, and there is a drop-down menu that requires support from bootstrap.js, bootstrap.css, and jq.
Tag pages do not change with browser size
You can switch within one web page or jump to other pages. The links on the tab page that you strongly recommend to navigate will jump to other web pages with the same layout as this page. That is, this tab page also exists and has the same 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"><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> <ul role="tablist"> <!--Only one tag can have an active status in a tag--> <li role="presentation"> <!--I thought it was not recommended to skip to the home layer of this page, because if you write it to one page, one page will take up a lot of code --> <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="#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> <!--Including the way to write the drop-down menu--> <li role="presentation"> <a data-toggle="dropdown" href="#"> <!--This is the small triangle of the drop-down menu--> Dropdown <span></span> </a> <ul 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> <!--In the end, they all jump to other pages with the same style, making the viewers feel that there is no jump. This way, separate the code so that the code of a web page is not concentrated in one page--> <li role="presentation"> <a href="back.html" role="tab">The other pages</a> </li> </li> </ul> <!--If the tab page jumps to the layer on this page, write the content of the layer here. --> <div> <div role="tabpanel" id="home"> Home </div> <div role="tabpanel" id="profile"> Profile </div> <div role="tabpanel" id="messages"> Messages </div> <div role="tabpanel" id="settings"> Settings </div> </div> </div> </body></html>
2. Select the button group
This paragraph has been changed again and again, mainly because my understanding of this component is not thorough enough.
The basic style of a selection button group that covers the page is as follows:
It will change with the size of the browser. Of course, when compressed to the extreme, it will not be closed like the navigation bar navbar that comes with bootstrap, and lie quietly in a button.
This selection button group is undoubtedly compatible with IE8, but the button group without a drop-down menu is actually a hyperlink, using the <a> tag instead of the <button> tag, but compared with the general <a> tag, see the code for the button on the class of this <a> tag, see the code for details. The code for this button group is really 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"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Button Group Button Group</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> <!--Require button group to fill the entire page--> <div> <div> <!--Write buttons that do not have a drop-down menu to write this way, it is rare to define links for buttons, please note --> <a href="#"> Left </a> </div> <div> <button type="button"> Middle </button> </div> <div> <button type="button"> Right </button> </div> <!--Write this button with a drop-down menu --> <div> <button type="button" data-toggle="dropdown"> Dropdown <span></span> </button> <ul role="menu"> <li> <a href="#">Dropdown link</a> </li> <li> <a href="#">Dropdown link</a> </li> </ul> </div> </div> </body></html>
3. Add a table on the panel and embedded with ordinary hyperlink text
The most common and simplest things are often the most practical things, but tables are used here to layout instead of dividing the page into a 12-piece grid system. Because 12 copies encountered some columns such as 5 copies were not easy to distribute evenly.
This panel uses panel elements provided by bootstrap, which can also be automatically adjusted according to the window size.
The code is much simpler than the two solutions above, but it is not so dazzling at the same time. But it is really simple and practical.
<!--This node can be ignored. It is placed in a container container just for screenshots and will not fill the entire window --> <div> <!--The panel of only body, changing the style only changes the border color --> <div> <div style="text-align: center"> <table> <tr> <!--If it is six items, you can use the bootstrap raster system, each column has 2 grids. If it is seven items, then a cell will account for 100/7=14% of the size. --> <td> <a href="#">Project 1</a> </td> <td> <a href="#">Project 2</a> </td> <td> <a href="#">Project 3</a> </td> <td> <a href="#">Project 4</a> </td> <td> <a href="#">Project 5</a> </td> </table> </div> </div> </div>
The above three solutions are solutions to solve the defects of bootstrap navigation bar navbar in IE8. I personally think the first type is a bit rare and alternative, the second type is the author's most recommended, and the third type is needed to be used in the form. If you can avoid it, try to avoid it. You can place the selection button group in a panel to replace the third type of text and table content.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.