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
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:
5. Practical Five- Tags
In some web pages, a tag is often added to tell users some additional information, such as:
This effect is extracted in Bootstrap into a label component and highlighted in the ".label" style. Similar to button element button, the label style also provides a variety of colors, mainly through these class names to modify the background color and text color:
The renderings are as follows:
6. Practical combat six - badge
Badges are mostly used to remind you of how many unread messages are needed. In Bootstrap, the "badge" style is used to achieve the badge effect.
<!--navbar-default Navigation Bar Medal--><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<span>10</span></a></li> <li><a href="##">Feedback</a></li> </ul></div>
The renderings are as follows:
7. Practical Seven - Pop-up box that drives animation transition
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>Animated transition pop-up box</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><button type="button">Click me</button><div id="mymodal"> <div> <div> <div> <button type="button" data-dismiss="modal"> <span aria-hidden="true">×</span><span>Close</span> </button> <h4>Popt-up title</h4> </div> <div> <p>Popt-up body content</p> </div> <div> <button type="button" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal --><!-- 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> <script> $(function(){ $(".btn").click(function(){ $("#mymodal").modal("toggle"); }); });</script></body></html>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.
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial