bootstrap上拉菜单如何使用的?
bootstrap有上拉菜单;按钮菜单不仅可以下拉,也可以上拉,需要把默认的下拉改成上拉,只需要向父元素添加“.dropup”来触发元素上方的下拉菜单即可,语法为“div class="btn-group dropup"> ”。
如何快速入门VUE3.0:进入学习
本教程操作环境:Windows10系统、bootstrap5版、DELL G3电脑
bootstrap有上拉菜单
通过向父元素添加.dropup来触发元素上方的下拉菜单。
按钮菜单不仅可以下拉,也可以上拉。要把默认的下拉改成上拉,只要为 .btn-group 容器追加一个 .dropup 类就行了。如:
!-- Default dropup button --> div class="btn-group dropup"> button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropup /button> div class="dropdown-menu"> !-- Dropdown menu links --> /div> /div> !-- Split dropup button --> div class="btn-group dropup"> button type="button" class="btn btn-secondary"> Split dropup /button> button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> span class="sr-only"> Toggle Dropdown/span> /button> div class="dropdown-menu"> !-- Dropdown menu links --> /div> /div>
输出结果:
扩展知识
首先我们应该明白:下拉菜单是由:按钮、下拉图标和无序列表组成。
下拉菜单触发器和下拉菜单都包含在 .dropdown中。
在button标签中,用到的属性有
class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
在span标签中,用到的属性值有 class = "caret"
无序列表ul> 元素
ul> 标签定义无序列表
注:若想使按钮左、右对齐可以分别用dropdown-menu-right使其右对齐,用dropdown-menu-left左对齐。
有序列表ol> 元素
ol> 标签定义有序列表
ol常用的属性有 start : 表示有序列表的起始值。
ol常用的属性有 type : 规定在列表中使用的标记类型。
li> 元素
li> 标签定义列表项目。
li> 标签可用在有序列表 (ol> ) 和无序列表 (ul> ) 中。
分列式按钮下拉菜单
分裂式按钮要改变一些标记,要将
button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
加粗的true改变为flase。
再加上
span class="sr-only"> Toggle Dropdown/span> 。
以上就是关于“bootstrap上拉菜单如何使用的?”的相关知识,感谢各位的阅读,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注网络,小编每天都会为大家更新不同的知识。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: bootstrap上拉菜单如何使用的?
本文地址: https://pptw.com/jishu/652937.html