Bootstrap实现下拉菜单效果_javascript技巧

1、案例

将下拉菜单触发器和下拉菜单都包裹在.dropdown里，然后添加组成菜单的HTML代码。

 
 
 Dropdown
 
 
 
 
Action
 
Another action
 
Something else here
 

 
Separated link
 
 

可以通过上面的代码发现，里面可能有很多陌生的样式类或者属性。

一个Dropdown按钮和右侧有个小图标caret，当然这个小图标和按钮的文本是平级的。

首先看button按钮中有个dropdown-toggle，还有一个data-toggle属性，根据这个属性来弹出下来列表。

紧接着ul标签的dropdown-menu应该是和上面button按钮的样式类dropdown-toggle联合使用，在通过aria-labelledby绑定上面的button按钮。

下来第四个li标签中有个divider其实是一个分割线的样式类。

大概我理解的就这个样子，理解的肯定不到位。

2、对齐选项

给下拉菜单.dropdown-menu加上.text-right 使文字右对齐。

 
 
 Dropdown
 
 
 
 
Action
 
Another action
 
Something else here
 

 
Separated link
 
 

只是在上面的代码中的ul标签上添加了一个text-right的样式类。

3、标题

在任何下拉菜单中均可通过添加标题来标明一组动作。

 
下拉菜单
 
 
 Dropdown
 
 
 
 
Dropdown header
 
Action
 
Another action
 
Something else here
 

 
Dropdown header
 
Separated link
 
 

主要是添加了

4、禁用的菜单项

给下拉菜单中的

你运行之后可以查看效果，其实效果和上面的标题样式差不多，当你点击的时候会有一个禁用的图标显示。

5、基本案例

1）、按钮式下拉菜单
把任何按钮放入.btn-group然后加入正确的菜单标记，就可以做成下拉菜单触发器。

单按钮下拉菜单

只要改变一些基本的标记，就能把按钮变成下拉菜单开关。

 
 Action 
 
 
 
Action
 
Another action
 
Something else here
 

 
Separated link
 

分裂式按钮下拉菜单

相似地，分裂式按钮下拉菜单也需要同样的改变标记，但只要多一个分开的按钮。

 Action
 
 
 
 Toggle Dropdown
 
 
 
Action
 
Another action
 
Something else here
 

 
Separated link
 
 
 

只能点击小图标才能出现下来菜单额。

2）、尺寸

下拉菜单按钮适用所有尺寸的按钮。

 
 Large button 
 
 
 ...
 




 
 Small button 
 
 
 ...
 




 
 Extra small button 
 
 
 ...
 

通过样式类.btn-lg、 .btn-sm、.btn-xs来控制按钮的大小。

3）、向上弹出式菜单

给父元素添加.dropup就能使触发的下拉菜单在元素上方。

 Dropup
 
 
 Toggle Dropdown
 
 
 
 

更多内容请参考：Bootstrap学习教程

总结：

本文主要介绍了下拉菜单的相关内容，然后介绍了按钮和下拉菜单的组合，变化还是蛮多的，样式也不错，希望大家喜欢。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com