下拉菜单用于显示链接列表的可切换、有上下文的菜单。

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

主要是添加了

Dropdown header 里面有个.dropdown-header的样式类。

4、禁用的菜单项

给下拉菜单中的

加上.disabled禁用链接。

继续修改上面的代码将Something else here行的代码进行替换

Something else here

主要是在li标签中添加.disabled的样式类。

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

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

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

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

bootstrap菜单html,Bootstrap实现下拉菜单效果相关推荐

Bootstrap导航条鼠标悬停下拉菜单
Bootstrap导航条鼠标悬停下拉菜单 Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态,都是点击弹出下拉菜单,为了适应一般网站使用,我稍作了一些修改,鼠标hover时就弹 ...
excel下拉菜单vba_在Excel下拉菜单中删除使用过的项目
excel下拉菜单vba There is a new sample file on my Contextures web site, which lets you pick players for ...
点击下拉菜单以外区域，下拉菜单收起
点击下拉菜单以外区域,下拉菜单收起网页中下拉菜单随处可见,一般用到toggle()或slideToggle()事件:但下拉菜单出来后,一般要再次点击原来的按钮才能收起,所以做到下拉菜单以外点击收起, ...
css表格中下拉菜单怎么设置,css如何实现下拉菜单？css实现下拉菜单的方法（完整代码）...
本篇文章给大家带来的内容是关于css如何实现下拉菜单?css实现下拉菜单的方法(完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. /*盒子,相对定位*/ .dropdown{ ...
css下拉菜单样式_CSS样式下拉菜单
css下拉菜单样式 Introduction: 介绍: As we all know that the styling website or web pages are an important as ...
css3如何写下拉菜单,css如何实现下拉菜单超详细
首页 >web前端>css教程>正文 css如何实现下拉菜单?css实现下拉菜单的方法(完整代码) 原创2019-04- 本篇文章给大家带来的内容是关于css如何实现下拉菜单?css ...
微信截取下拉菜单图片时，下拉菜单总是消失，无法成功截取
问题描述: 微信截取下拉菜单图片时,下拉菜单总是消失,无法成功截取原因分析: 在下拉框弹出后按Alt键,会自动收回下拉框,而微信默认的截屏快捷键刚好是Alt+A的组合,因此无法使用默认快捷键对下拉框 ...
Bootstrap下拉菜单中禁用某个下拉菜单
禁用某个下拉菜单 Bootstrap3中,为下拉菜单中某个下拉项的 <li> 元素添加 .disabled 类,就可以禁止该选项,让该菜单项的链接变灰并失去鼠标悬停效果.如: <ul ...
Bootstrap使用 .dropdown-menu 类创建下拉菜单
下拉菜单下拉菜单是一种非常常见的效果,用于展示可切换.有关联的一组链接,它可以节省网页排版空间,使网页布局简洁有序. Bootstrap内置了一套完整的下拉菜单组件,可用于不同的元素,如导航.按钮等 ...
bootstrap 导航菜单折叠位置_下拉菜单的讲究
下拉菜单是前端的常用组件之一,几乎所有前端组件库都提供这一组件.不知道大家有没有思考过如何实现一个下拉菜单,方法要尽量简单.我曾经用纯css实现过一个下拉菜单,思路就是利用overflow的属性,非常 ...

bootstrap菜单html,Bootstrap实现下拉菜单效果

下拉菜单

bootstrap菜单html,Bootstrap实现下拉菜单效果相关推荐

最新文章

热门文章