1. Base navigation bar NavBar Navbar-default Navbar-header Navbar-brand nav navbar-nav
2. Forms in the navigation bar NavBar Navbar-default Navbar-header Navbar-brand navbar-form
3. Buttons, text, links navbar-btn, Bavbar-text, Navbar-link
4 in the navigation bar. Items in the navigation bar are floating navbar-left, Navbar-right
5. Top fixed or bottom fixed nacbar-fixed-top, Navbar-fixed-bottom
6. Responsive navigation bar
<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "X-UA-Compatible" content = "IE = edge"> <!-Bootstrap fully supports mobile platforms from version 3.0 and implements mobile-first principles-> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <title> Bootstrap 101 Template </ title> <!-Bootstrap-> <link href = "bootstrap-3.3.7-dist / css / bootstrap.min.css" rel = "stylesheet"> </ head> <body> <!-Basic navigation bar navbar navbar-default navbar-header navbar-brand nav navbar-nav To create a default navigation bar: 1.Add class .navbar, .navbar-default to the <nav> tag 2. Add role = "navigation" to the above elements to help increase accessibility. 3. Add a header class .navbar-header to the <div> element, which contains a <a> element with a class navbar-brand. This makes the text look bigger. 4. To add a link to the navigation bar, simply add an unordered list with class .nav, .navbar-nav-> <nav class = "navbar navbar-default" role = "navigation"> <div class = "navbar-header"> <a href="#" class="navbar-brand"> Front end </a> </ div> <div> <ul class = "nav navbar-nav"> <li class = "active"> <a href="#"> HTML </a> </ li> <li> <a href="#"> CSS </a> </ li> <li class = "dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> JS <span class = "caret"> </ span> </a> <ul class = "dropdown-menu"> <li> <a href=""> js advanced programming </a> </ li> <li> <a href=""> js design pattern </a> </ li> <li> <a href=""> js DOM </a> </ li> </ ul> </ li> </ ul> </ div> </ nav> <!-Navbar navbar-default navbar-header navbar-brand navbar-form Proceed as follows: 1.Add class .navbar, .navbar-default to the <nav> tag 2. Add role = "navigation" to the above elements to help increase accessibility. 3. Add a header class .navbar-header to the <div> element, which contains a <a> element with a class navbar-brand. This makes the text look bigger. 4. Place the form element in the navbar container, and apply the navbar-form style on the form element. Colleagues navbar-left and navbar-right are available-> <nav class = "navbar navbar-default" role = "navigation"> <div class = "navbar-header"> <a href="#" class="navbar-brand"> Brand </a> </ div> <form role = "search" class = "navbar-form navbar-left"> <div class = "form-group"> <input type = "text" class = "form-control"> </ div> <button class = "btn btn-default" type = "button"> Left button </ button> </ form> <form role = "search" class = "navbar-form navbar-right"> <div class = "form-group"> <input type = "text" class = "form-control"> </ div> <button class = "btn btn-default" type = "button"> Right Button </ button> </ form> </ nav> <!-Buttons, text, links in the navigation bar: Navbar-brand style a element in ordinary navigation bar Also: navbar-btn, bavbar-text, navbar-link (these symbolically set margins and colors)-> <nav class = "navbar navbar-default" role = "navigation"> <div class = "navbar-header"> <a href="href-"#"" class="navbar-brand"> Brand </a> </ div> <ul class = "nav navbar-nav"> <li> <a href="#"> Home </a> </ li> <li> <a href="#"> Link </a> </ li> <li> <a href="#"> Link </a> </ li> </ ul> <button class = "btn btn-class navbar-btn"> button used with ul </ button> </ nav> <!-Text in the navigation bar: If you need to include text strings in your navigation, use class .navbar-text-> <nav class = "navbar navbar-default" role = "navigation"> <div class = "container-fluid"> <div class = "navbar-header"> <a class="navbar-brand" href="#"> Rookie tutorial </a> </ div> <div> <p class = "navbar-text"> Runoob user login </ p> </ div> </ div> </ nav> <!-Responsive navigation bar: A navigation bar is 100% full screen by default, so there are usually many menus, but it may not be displayed on a small screen. Usually need to hide or remove part of the menu content according to the size. -> <!-bootstrap is based on jQuery-> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </ script> <script src = "bootstrap-3.3.7-dist / js / bootstrap.min.js"> </ script> </ body> </ html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
