console
<p class="text-danger">
nav nav-tabs
</p>
<div class="container">
<ul class="nav nav-tabs">
<li>
<a href="#">
网页
</a>
</li>
<li>
<a href="#">
music
</a>
</li>
<li>
<a href="#">
video
</a>
</li>
<li>
<a href="#">
photo
</a>
</li>
</ul>
</div>
<p class="text-danger">
nav
</p>
<div class="container">
<ul class="nav">
<li>
<a href="#">
网页
</a>
</li>
<li>
<a href="#">
music
</a>
</li>
<li>
<a href="#">
video
</a>
</li>
<li>
<a href="#">
photo
</a>
</li>
</ul>
</div>
<p class="text-danger">
nav nav-pills
</p>
<div class="container">
<ul class="nav nav-pills">
<li>
<a href="#">
网页
</a>
</li>
<li>
<a href="#">
music
</a>
</li>
<li>
<a href="#">
video
</a>
</li>
<li>
<a href="#">
photo
</a>
</li>
</ul>
</div>
<p class="text-danger">
nac nav-pills nav-justified
</p>
<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="active">
<a href="#"><i class="glyphicon glyphicon-home"></i>
首页
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-music"></i>
music<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">轻音乐</a></li>
<li><a href="#">Rock</a></li>
<li class="active"><a href="#">Pop</a></li>
</ul>
</li>
<li>
<a href="#"><i class="glyphicon glyphicon-facetime-video"></i>
video
</a>
</li>
<li>
<a href="#"><i class="glyphicon glyphicon-picture"></i>
photo
</a>
</li>
</ul>
</div>
<p class="text-danger">
nav nav-stacked
</p>
<div class="container">
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#">
网页
</a>
</li>
<li>
<a href="#">
music
</a>
</li>
<li>
<a href="#">
video
</a>
</li>
<li>
<a href="#">
photo
</a>
</li>
</ul>
</div>
<div class="container">
<ul class="nav nav-tabs">
<li class="active">
<a href="#">
网页
</a>
</li>
<li>
<a href="#">
music
</a>
</li>
<li>
<a href="#">
video
</a>
</li>
<li>
<a href="#">
photo
</a>
</li>
</ul>
</div>
<p class="text-danger">面包屑导航</p>
<div class="container">
<ol class="breadcrumb breadcrumb-justified">
<i class="glyphicon glyphicon-home"></i><li><a href="#">首页</a></li>
<li><a href="#">music</a></li>
<li>
<a href="#">
video
</a>
</li>
<li>
<a href="#">
photo
</a>
</li>
</ol>
</div>
<div style="margin-bottom:200px" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand brand-img" href="#">
<img alt="Brand" src="http://wenda.bootcss.com/static/css/default/ico/favicon.ico?v=20140912">
</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li class="droupdown">
<a ref="#" data-toggle="dropdown" class="dropdown-toggle">music
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-header">风格</li>
<li><a href="#">Rock</a></li>
<li><a href="#">Pop</a></li>
<li class="divider"></li>
<li class="dropdown-header">种类</li>
<li><a href="#">钢琴</a></li>
<li><a href="#">吉他</a></li>
</ul>
</li>
<li><a href="#">video</a></li>
<li><a href="#">photo</a></li>
</ul>
</div>
<div class="navbar navbar-default navbar-static-top">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
网页
</a>
</li>
<li>
<a href="#">
music
</a>
</li>
<li>
<a href="#">
video
</a>
</li>
<li>
<a href="#">
photo
</a>
</li>
</ul>
</div>
<p class="text-danger">响应式效果导航</p>
<div class="container">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="##" class="navbar-brand">导航条</a>
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">music</a></li>
<li><a href="#">video</a></li>
</ul>
</div>
</div>
</div>
<p class="text-danger">反色导航条</p>
<div class="container">
<div class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="##" class="navbar-brand">导航条</a>
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li><a href="#">music</a></li>
<li><a href="#">video</a></li>
</ul>
</div>
</div>
</div>