菜单样式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”类名

 

<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。

  <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”来实现

   <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.响应式导航条（重点）在上篇写过了

      这些文章都是基础，为了自己复习，学习！大家也可以看着学习