菜单样式bootstrap

菜单样式bootstrap

因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使http://write.blog.csdn.net/postedit?ref=toolbar用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。
1.下拉菜单：
...dropdown 或者btn-group类名容器包裹了整个下拉菜单元素
...使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，
且值必须和最外容器类名一致为dropdown。 data-toggle="dropdown"
...caret类名：改变容器div的类名： 下三角箭头（dropdown）上三角箭头（dropup）
...下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”
2.<li>添加类名“divider”来实现添加下拉分隔线的功能
3.菜单标题："dropdown-header"
4.菜单右对齐：“pull-right”或者“dropdown-menu-right”类名（默认左对齐）
同时一定要为.dropdown添加float:leftcss样式。
5.悬浮状态 hover 和 焦点状态 focus。当前状态（.active）和禁用状态（.disabled）

1.按钮
类名为“btn-group”的容器，把多个按钮放到这个容器..btn-group”容器里的标签元素需要带有类名“.btn”
类名为"btn-toolbar"需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中
2.嵌套按钮分组
下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。
3.等分按钮也常被称为是自适应分组按钮
在按钮组“btn-group”上追加一个“btn-group-justified”类名

[html] view plain copy
<div class="btn-group" >
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="##">公司简介</a></li>
<li><a href="##">企业文化</a></li>
<li><a href="##">组织结构</a></li>
<li><a href="##">客服服务</a></li>
</ul>
</div>
4.按钮垂直分组
需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可

1.导航nav
实现方法就是为ul标签加入.nav 和（nav-tabs或nav-pills)(水平的导航)
.active和.disabled 可以使用：可以表示导航的一个li一直被选中和不能使用。
2.垂直导航
垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名
3.自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用
4.二级菜单
<ul>中的一个li。
[html] view plain copy
<li class="<span style="color:#CC0000;">dropdown</span>">
<a href="##" class="<span style="color:#990000;">dropdown-toggle</span>" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="<span style="color:#CC0000;">dropdown-menu</span>">
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
</li>
5.面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）
为ol加入breadcrumb类名

6.导航条
在制作一个基础导航条时，主要分以下几步：
第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”
第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”
7.菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，
其通过“navbar-header”和“navbar-brand”来实现
[html] view plain copy
<div class="<span style="color:#CC0000;">navbar-header</span>">
<a href="##" class="<span style="color:#CC0000;">navbar-brand</span>">慕课网</a>
</div>
8.导航条中会带有搜索表单form "navbar-form”
“navbar-left”让表单左浮动，更好实现对齐。还提供了“navbar-right”样式，让元素在导航条靠右对齐。
9.导航条中的按钮navbar-btn 导航条中的文本navbar-text 导航条中的普通链接navbar-link
10..navbar-fixed-top：导航条固定在浏览器窗口顶部
.navbar-fixed-bottom：导航条固定在浏览器窗口底部
11.响应式导航条（重点）在上篇写过了
这些文章都是基础，为了自己复习，学习！大家也可以看着学习