下拉菜单

一、下拉菜单
- 1.单一按钮的下拉菜单
- - 1.btn菜单
  - 2.``菜单
- 2.分离式按钮下拉菜单
- 3.菜单尺寸
- 4.方向
- 5.菜单项
- 6.非交互式下拉菜单
- 7.偏移属性
- 8.方法与事件

一、下拉菜单

1.单一按钮的下拉菜单

1.btn菜单

任何一个 .btn块都可以定义变更为下拉菜单。可以自由引用.btn-prima等颜色及样式类来定义下拉菜单的外在表现

<div class="row mt-5"><div class="col-2"><div class="dropdown">//dropdown-toggle显示变换小三角，data-toggle="dropdown"显示隐藏转换<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">button标签下拉</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a></div></div></div>
</div>

2.`<a>`菜单

<div class="row mt-5"><div class="col-2"><div class="dropdown"><a href="javascript:;" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">a标签下拉</a><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">深圳</a></div></div></div>
</div>

2.分离式按钮下拉菜单

注意添加了.dropdown-toggle-split -插入此符号为下拉选项作适当的间隔（距）处理。
这个额外的Class样式，将插入符号两边水平padding减少了25%，并移除了为默认下拉菜单添加的 margin-left 属性，这些额外的更改将插入符号集中在分裂式按钮中，并在主按钮旁边提供了适合的点击空间。

<div class="row mt-5"><div class="col-3"><div class="btn-group dropdown"><button class="btn btn-success btn-lg">分离式按钮下拉菜单</button><button class="btn btn-success btn-lg dropdown-toggle dropdown-toggle-split"data-toggle="dropdown"></button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">深圳</a></div></div></div>
</div>

3.菜单尺寸

<div class="row mt-5"><div class="col-3 d-flex"><div class="dropdown"><button class="btn btn-danger btn-lg dropdown-toggle" data-toggle="dropdown">大按钮</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a></div></div><div class="dropdown"><button class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown">小按钮</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a></div></div></div>
</div>

4.方向

增加.dropup 样式，使下拉菜单向上展开
通过将 .dropright添加到父元素来触发元素左侧的下拉菜单。
通过将 .dropleft 添加到父元素来触发元素左侧的下拉菜单。

<div class="row mt-5"><div class="col"><div class="dropup"><!-- 向上展开时，上方需要足够空间，否则会在底下显示 --><button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向上展开</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a></div></div></div><div class="col"><div class="dropright"><!-- 向右展开 --><button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向右展开</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a></div></div></div><div class="col"><div class="dropdown"><!-- 向下展开 --><button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向下展开</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a></div></div></div><div class="col"><div class="dropleft"><!-- 向左展开 --><button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向左展开</button><div class="dropdown-menu"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a></div></div></div>
</div>

5.菜单项

<div class="row mt-5"><div class="col"><div class="dropdown"><button class="btn btn-info dropdown-toggle" data-toggle="dropdown">菜单项使用了button标签</button><div class="dropdown-menu dropdown-menu-right">//dropdown-menu-right右对齐,响应式dropdown-menu{-sm|-md|-lg|-xl}-right<a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div>//割线<button class="dropdown-item">深圳</button></div></div></div>
</div>

6.非交互式下拉菜单

.dropdown-item-text. 还可以随意使用定制的CSS或文本实用程序进一步设计样式.

.active 让下拉列表中的项样式为active
.disabled 让下拉列表中的项样式为不可用

<div class="row mt-5"><div class="col"><div class="dropdown"><div class="dropdown-menu show"><span class="dropdown-item-text">非点击的项</span><h4 class="dropdown-header">下拉菜单的标题</h4><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item active">上海</a> <!-- 当前的选项 --><a href="#" class="dropdown-item disabled">广州</a> <!-- 禁用的选项 --><div class="dropdown-divider"></div><button class="dropdown-item">深圳</button></div></div></div>
</div>

7.偏移属性

<div class="row mt-5" style="margin-top: 260px!important;"><div class="col"><div class="dropdown"><button class="btn btn-info dropdown-toggle" data-toggle="dropdown" data-offset="10,20">偏移</button><div class="dropdown-menu"><!-- 右对齐 --><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><button class="dropdown-item">深圳</button></div></div></div><div class="col"><div class="dropdown"><button class="btn btn-info dropdown-toggle" data-toggle="dropdown">偏移</button><div class="dropdown-menu" data-reference="parent">//data-reference="parent"下拉时找到自己父级<!-- 右对齐 --><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><button class="dropdown-item">深圳</button></div></div></div>
</div>

8.方法与事件

无论你是采用JavaScript 或者 data-api调用下拉菜单， data-toggle=“dropdown” 总要保留在下拉列表的触发器元素中。

<div class="row mt-5"><div class="col"><div class="dropdown"><button class="btn btn-danger dropdown-toggle" id="myBtn">方法</button><div class="dropdown-menu" id="myDropdown" data-reference="parent"><!-- 右对齐 --><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><button class="dropdown-item">深圳</button></div></div></div><div class="col"><div class="dropdown" id="myDropdown1">    <!-- 注意，事件要放在这里！！！ --><button class="btn btn-info dropdown-toggle" data-toggle="dropdown">事件</button><div class="dropdown-menu" data-reference="parent"><a href="#" class="dropdown-item">北京</a><a href="#" class="dropdown-item">上海</a><a href="#" class="dropdown-item">广州</a><div class="dropdown-divider"></div><button class="dropdown-item">深圳</button></div></div></div>
</div>
<script>//方法$('#myBtn').click(function () {//$('#myDropdown').dropdown('show');//$('#myDropdown').dropdown('hide');需在dropdown-menu设置show类名，配合//$('#myDropdown').dropdown('toggle');目前无法实现动态开关//解决toggle的问题$('#myDropdown').toggle(function () {$('#myDropdown').dropdown('show');}, function () {$('#myDropdown').dropdown('hide');});});//事件$('#myDropdown1').on('show.bs.dropdown', function () {console.log('调用了show方法');});$('#myDropdown1').on('shown.bs.dropdown', function () {console.log('下拉列表完全显示了');});$('#myDropdown1').on('hide.bs.dropdown', function () {console.log('调用了hide方法');});$('#myDropdown1').on('hidden.bs.dropdown', function () {console.log('下拉列表完全隐藏了');});
</script>

Bootstrap组件——下拉菜单相关推荐

Bootstrap 按钮下拉菜单
按钮下拉菜单,就为按钮添加一个下拉菜单,当用户点击按钮时,再显示或隐藏下拉菜单.只需把按钮和下拉菜单包装在一个 .btn-group 中,并为按钮添加 .dropdown-toggle 类和 data ...
Bootstrap 多级下拉菜单
在很多时候,我们可能需要多级下拉菜单.在一个下拉菜单的某个菜单项中,再创建另一个下拉菜单,即可实现多级下拉菜单. 只需为下拉菜单的任意 <li> 元素添加 .dropdown-submen ...
Bootstrap级联下拉菜单，你肯定用得到
今天我将介绍自定义的bootstrap级联下拉菜单(你肯定用得到),主要应用场合有省市级关联菜单等等,那么就先拿这个例子来讲,当然其他场景的关联菜单也同样适用.说实话,封装好一个通用的组件还是需要花费 ...
html5三级下拉菜单,Bootstrap多级下拉菜单插件
bootstrap-submenu是一款在原生bootstrap Dropdowns组件的基础上进行扩展,可以生成多级子菜单的多级下拉菜单插件. 原生的bootstrap下拉菜单只有一层,通过boot ...
Bootstrap mouseover 下拉菜单 Enable Hover for Bootstrap Nav Dropdowns
Bootstrap v3′s navigation has menus toggle enabled by default - you have to click to have them open/ ...
解决bootstrap dropdown 下拉菜单有时候不能显示的问题
解决bootstrap dropdown 下拉菜单有时候不能显示的问题参考文章: (1)解决bootstrap dropdown 下拉菜单有时候不能显示的问题 (2)https://www.cnbl ...
WEB前端网页设计-Bootstrap 按钮下拉菜单
目录 Bootstrap 按钮下拉菜单分割的按钮下拉菜单按钮下拉菜单的大小按钮上拉菜单 Bootstrap 按钮下拉菜单本章将讲解如何使用 Bootstrap class 向按钮添加下拉菜单. ...
Bootstrap的下拉菜单
下拉菜单引入Boostrap的CSS和JS <div class="dropdown"><a data-toggle="dropdown" ...
Bootstrap按钮下拉菜单的尺寸
按钮下拉菜单的尺寸定义按钮下拉菜单时,无论是按钮下拉菜单,还是拼接式按钮下拉菜单,都可以使用按钮的尺寸类 .btn-lg.或.btn-sm或.btn-xs,来设置按钮的尺寸.如: <!-- L ...

Bootstrap组件——下拉菜单

下拉菜单

一、下拉菜单

1.单一按钮的下拉菜单

1.btn菜单

2.`<a>`菜单

2.分离式按钮下拉菜单

3.菜单尺寸

4.方向

5.菜单项

6.非交互式下拉菜单

7.偏移属性

8.方法与事件

Bootstrap组件——下拉菜单相关推荐

最新文章

热门文章

Bootstrap组件——下拉菜单

下拉菜单

一、下拉菜单

1.单一按钮的下拉菜单

1.btn菜单

2.<a>菜单

2.分离式按钮下拉菜单

3.菜单尺寸

4.方向

5.菜单项

6.非交互式下拉菜单

7.偏移属性

8.方法与事件

Bootstrap组件——下拉菜单相关推荐

最新文章

热门文章

2.`<a>`菜单