Bootstrap 学习 - 菜单 - 按钮

1、下拉菜单（基本用法）

在使用 Bootstrap 框架的下拉菜单时，必须调用 Bootstrap 框架提供的 bootstrap.js 文件。当然，如果你使用的是未编译版本，在 js 文件夹下你能找到一个名为 dropdown.js 的文件。你也可以调用这个 js 文件。在使用 Bootstrap 框架中的下拉菜单组件时，其结构运用的正确与否非常的重要，如果结构和类名未使用正确，直接影响组件是否能正常运用。

2、下拉菜单（原理分析）

Bootstrap 框架中的下拉菜单组件，其下拉菜单项默认是隐藏的，因为 dropdown-menu 默认样式设置了 display:none，当用户点击父菜单项时，下拉菜单将会被显示出来，当用户再次点击时，下拉菜单将继续隐藏。现在我们来分析一下实现原理，非常简单，通过 js 技术手段，给父容器 div.dropdown 添加或移除类名 open 来控制下拉菜单显示或隐藏。也就是说，默认情况，div.dropdown 没有类名 open，当用户第一次点击时，div.dropdown 会添加类名 open；当用户再次点击时，div.dropdown 容器中的类名 open 又会被移除。

3、下拉菜单（下拉分隔线）

在 Bootstrap 框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的

，并且给这个

添加类名 divider 来实现添加下拉分隔线的功能。

4、下拉菜单（菜单标题）

通过添加 divider 可以将下拉菜单分组，为了让这个分组更明显，还可以给每个组添加一个头部（标题）。


    
    
        第一部分菜单头部
        下拉菜单项
        …
        
        第二部分菜单头部
        …
        下拉菜单项


5、下拉菜单（对齐方式）
Bootstrap 框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在 dropdown-menu 上添加一个 pull-right 或者 dropdown-menu-right 类名。同时一定要为 .dropdown 添加 float:left css 样式。
.dropdown{
  float: left;
}


  
  
   …
  

6、下拉菜单（菜单项状态）
下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus），下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。

  
  
    下拉菜单项
    ….
    下拉菜单项
  

7、按钮（按钮组）
按钮组和下拉菜单组件一样，需要依赖于 button.js 插件才能正常运行。不过我们同样可以直接只调用 bootstrap.js 文件。因为这个文件已集成了 button.js 插件功能。对于结构方面，非常的简单。使用一个名为 btn-group 的容器，把多个按钮放到这个容器中。除了可以使用 
   …

12、按钮下拉菜单

Bootstrap 学习 - 菜单 - 按钮 - 导航

1、下拉菜单（基本用法）

2、下拉菜单（原理分析）

3、下拉菜单（下拉分隔线）

4、下拉菜单（菜单标题）

5、下拉菜单（对齐方式）

6、下拉菜单（菜单项状态）

7、按钮（按钮组）

8、按钮（按钮工具栏）

9、按钮（嵌套分组）

10、按钮（垂直分组）

11、按钮（等分按钮）

13、按钮的向下向上三角形

14、向上弹起的下拉菜单

15、导航（基础样式）

16、导航（标签形 tab 导航）

17、导航（胶囊形 pills 导航）

18、导航（垂直堆叠的导航）

19、自适应导航（使用）

20、自适应导航（实现原理）

21、导航加下拉菜单（二级导航）

22、面包屑式导航

附录

你可能感兴趣的:(Bootstrap 学习 - 菜单 - 按钮 - 导航)