基本形态
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>Navbar Basic</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Cynhard的博客</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">技术</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">厨艺</a></li>
</ul>
</div>
</nav>
</body>
</html>可以用 .navbar-inverse 代替 .navbar-default，成为黑色的风格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>Navbar Basic</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Cynhard的博客</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">技术</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">厨艺</a></li>
</ul>
</div>
</nav>
</body>
</html>固定位置
利用 .navbar-fixed-top 可以将导航栏固定在顶部始终可见，无视滚动条。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>Navbar Fixed</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Cynhard的博客</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">技术</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">厨艺</a></li>
</ul>
</div>
</nav>
<br><br><br>
<script>
for (var i = 0; i < 10; i++) {
document.write(
"<h1>↓往下滚动查看效果↓</h1>" +
"<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>"
);
}
</script>
</body>
</html>利用 .navbar-fixed-bottom 可以将导航栏固定在底部始终可见，无视滚动条。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>Navbar Fixed</title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Cynhard的博客</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">技术</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">厨艺</a></li>
</ul>
</div>
</nav>
<br><br><br>
<script>
for (var i = 0; i < 10; i++) {
document.write(
"<h1>↓往下滚动查看效果↓</h1>" +
"<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>"
);
}
</script>
</body>
</html>下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>Navbar Fixed</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Cynhard的博客</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">主页</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">技术
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">C++</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Python</a></li>
</ul>
</li>
<li><a href="#">生活</a></li>
<li><a href="#">厨艺</a></li>
</ul>
</div>
</nav>
</body>
</html>向右对齐
使用 .navbar-right 将导航按钮向右对齐。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>Navbar Fixed</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Cynhard的博客</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">技术</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">厨艺</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 登录 </a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 退出 </a></li>
</ul>
</div>
</nav>
</body>
</html>Collapse
- 应用
collapse可以在屏幕很小的时候将导航按钮隐藏，在右侧显示一个按钮，点击按钮之后会纵向展开导航按钮。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<title>Navbar Fixed</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Cynhard的博客</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">主页</a></li>
<li><a href="#">技术</a></li>
<li><a href="#">生活</a></li>
<li><a href="#">厨艺</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 登录 </a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 退出 </a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>