学习Bootstrap组件之下拉菜单_javascript技巧
程序员文章站
2022-04-16 16:47:55
...
Bootstrap 是由Twitter 工程师推出的基于HTML,CSS,JAVASCRIPT的简洁灵活的流行前端框架,我们可以把它想象成一个定义了很多效果的CSS与JS的库,库里面已经定义好了各种组件的显示效果与动画。
.dropdown——设置父元素为下拉菜单组件,向下弹出子菜单;
.dropup——设置父元素为下拉菜单组件,向上弹出子菜单;
.dropdown-toggle——设置按钮为下拉菜单切换按钮;
.dropdown-menu——设置ul元素为下拉菜单;
.dropdown-menu-right——将菜单右对齐;
.pull-right——将菜单组件的父元素右对齐;
.dropdown-header——为菜单项添加标题;
.divider——为菜单项添加分割线;
.disabled——禁用相应菜单项;
实现代码如下:
CSS全局样式_下拉菜单
实现效果:
以上就是本文的全部内容,希望对于大家使用Bootstrap组件制作下拉菜单有所帮助。
上一篇: Web渗透:PHP字符编码绕过漏洞总结
下一篇: PHP 和 JavaSript 区别
推荐阅读
-
Bootstrap CSS组件之按钮下拉菜单
-
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
-
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
-
带领大家学习javascript基础篇(一)之基本概念_javascript技巧
-
学习JavaScript设计模式之享元模式_javascript技巧
-
JavaScript学习笔记整理之引用类型_javascript技巧
-
zTree插件之单选下拉菜单实例代码_javascript技巧
-
Bootstrap每天必学之简单入门_javascript技巧
-
JavaScript学习笔记之数组去重_javascript技巧
-
Bootstrap每天必学之导航_javascript技巧