Bootstrap

导航框

class 为

• nav nav-tabs 标签式的导航菜单
• nav nav-pills基本的胶囊式导航菜单
• pagination分页导航
• pager翻页导航
• breadcrumb面包屑导航

导航中如果有默认选中的多一个这个属性class="active"

 <ul class="nav nav-tabs">
   <li> <a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li class="active"><a href="#">Java</a></li>
   <li><a href="#">PHP</a></li>
 </ul>

下拉菜单

使用一个类名为dropdown 或btn-group的div 包裹整个下拉框:

   <div class="dropdown"></div>

默认向下dropdown，向上弹起加入 . dropup 即可
使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性

<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>

在button中 使用font 制作下拉箭头

下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu
分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能、分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
对齐方式:
dropdown-menu-left 左对齐 默认样式
dropdown-menu-right 右对齐
激活状态（.active）和禁用状态（.disabled）

示例

<div class="dropdown">
 <!-- 按钮 -->
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
	喜欢的频道  
	<!-- 下拉箭头的图标 -->
	<span class="caret"></span>
</button>
<!-- 下拉菜单列表 -->
<ul class="dropdown-menu">
	<li class="dropdown-header">——综艺——</li>
	<li><a href="#">乘风破浪的姐姐们</a></li>
	<li><a href="#">奇葩说</a></li>
	<li><a href="#">中国有嘻哈</a></li>
	<li class="divider"></li>
	<li class="dropdown-header">——电影——</li>
	<li><a href="#">姜子牙</a></li>
	<li><a href="#">肖生克的救赎</a></li>
	<li><a href="#">杀手不太冷</a></li>
</ul>
</div>