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>