Bootstrap导航条、分页导航

【导航条navbar】

在bootstrap中导航与导航条在外观方面差不多，但在实际应用时，导航条却要复杂的多。

导航条制作方法：

第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”

1、“.navbar”样式的主要功能就是设置左右padding和圆角等效果

2、“.navbar-default”样式是用来控制导航条的颜色
3、navbar-nav样式是在导航.nav的基础上重新调整了菜单项的浮动与内外边距

<div class="navbar navbar-default" role="navigation">
	<ul class="nav navbar-nav">
		<li><a href="#">首页</a></li>
		<li class="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown" type="button">
				教程<span class="caret"></span>
			</a>
			<ul class="dropdown-menu">
				<li><a href="#">HTML</a></li>
				<li><a href="#">CSS</a></li>
				<li><a href="#">JavaScript</a></li>
			</ul>
		</li>
		<li><a href="#">工具</a></li>
		<li><a href="#">关于我们</a></li>
	</ul>
</div>

为导航条添加标题、二级菜单及状态

添加标题：“navbar-header”和“navbar-brand”

<div class="navbar-header">
	<a href="#" class="navbar-brand">慕课网</a>
</div>

带表单的导航条

“navbar-form”“navbar-left”“navbar-right”

<form action="##" class="navbar-form navbar-left">
	<div class="form-group">
		<input type="text" class="form-control" placeholder="请搜索内容">
		<button type="submit" class="btn btn-default">搜索</button>
	</div>
</form>

示例：

<div class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
		<a href="#" class="navbar-brand">慕课网</a>
	</div>
	<ul class="nav navbar-nav">
		<li class="active"><a href="