Navigation bar (navbar) is an independent component in Bootstrap, and there is a clear difference between navigation bar (navbar) and navigation (nav) in Bootstrap. There is a background color in the navigation bar (navbar), and the navigation bar can be in various forms such as pure links, forms, forms and navigation.
1. Practical combat one-navigation bar with level 2 menu and form
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>Navigation bar</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!--css style--> <style > body{margin:30px;padding:30px;} </style></head><body><div role="navigation"> <!--Title is implemented through "navbar-header" and "navbar-brand"--> <div> <a href="##">Title</a> </div> <ul> <li><a href="##">Home</a></li> <li> <a href="##" data-toggle="dropdown">Blog<span></span></a> <!--Second Menu--> <ul> <li><a href="##">Second Menu</a></li> </li> </li> <li><a href="##">Forum</a></li> </ul> <!--Form--> <form action="##" rol="search"> <div> <input type="text" placeholder="Please enter keywords" /> </div> <button type="submit">Search</button> </form></div><!-- Place it at the end of the document to make the page load faster--><!-- If you want to use the js plugin of Bootstrap, you must first call jQuery --><script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script><!-- Including all js plugins for bootstrap or js plugins that can be used as needed --><script src="http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>The renderings are as follows:
In addition to using the a element in navbar-brand and the ul and navbar-form of navbar-nav, other elements can be used in the navigation bar of Bootstrap:
1) Button in navigation bar navbar-btn
2) Text in navigation bar navbar
3) Normal link in navigation bar navbar-link
2. Practical combat 2-fixed navigation bar
<!--Top navigation bar--><div role="navigation"> <div> <a href="##">Title</a> </div> <ul> <li><a href="##">Home</a></li> <li><a href="##">Blog</a></li> <li><a href="##">Forum</a></li> </ul></div><!--Bottom navigation bar--><div role="navigation"> <div> <a href="##">Title</a> </div> <ul> <li><a href="##">Home</a></li> <li><a href="##">Blog</a></li> <li><a href="##">Forum</a></li> </ul></div><!--Text content--><div>Web page text content</div>
The renderings are as follows:
3. Practical three-responsive navigation bar
<div role="navigation"> <div> <!-- .navbar-toggle style is used to content that shrinks toggle, that is, the element where the nav-collapse collapse style is located --> <button type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span></span> <span></span> <span></span> <span></span> <!-- Make sure that navbar-brand is displayed in both wide and narrow screens --> <a href="##">Title</a> </div> <!-- When the screen width is less than 768px, the contents in the div.navbar-responsive-collapse container will be hidden, and the icon-bar icon is displayed. When the icon-bar icon is clicked, expand it again. When the screen is larger than 768px, it will be displayed by default. --> <div> <ul> <li><a href="##">Home</a></li> <li><a href="##">Blog</a></li> <li><a href="##">Forum</a></li> </ul> </div></div>
The renderings are as follows:
Sometimes there is a need to invert the color. Bootstrap provides an inverted navigation bar for this, but just replaces the navbar-deafult class name with navbar-inverse, and then the background color of the navigation bar and the text color will be modified.
4. Practical four-pagination navigation
1) Pagination navigation with page numbers
<!-- pagination: Normal size pagination-lg: Make pagination navigation bigger pagination pagination-sm: Make pagination smaller --><ul> <li><a href="#">«Home</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <!--Current status--> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <!--Disable status--> <li><a href="#">Last page»</a></li></ul>
The renderings are as follows:
2) Page turn and pagination navigation
<ul> <li><a href="#">«Previous page</a></li> <!--Disabled status--> <li><a href="#">Next page»</a></li></ul> <!--Align left and right-><ul> <li><a href="#">«Previous page</a></li> <li><a href="#">Next page»</a></li></ul>
The renderings are as follows:
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.