bootstrap开启下拉列表的方式
时间:2021-03-31

bootstrap开启下拉列表的方式?这个问题可能是大家日常学习培训或工作中常常看到的。期待根据这个问题能使你获得颇丰。下边是我给大伙儿产生的参照內容,让我们一起看来一下吧!

下拉列表(基本上使用方法)

朋友们留意,在Bootstrap架构中的下拉列表部件是一个单独的部件,依据不一样的版本号,它相匹配的文档:

☑ LESS版本号:相匹配的源代码文档为 dropdowns.less

☑ Sass版本号:相匹配的源代码文档为 _dropdowns.sass

☑ 编译程序后的Bootstrap版本号:查询bootstrap.css文件第3004行~第三130行

在应用Bootstrap架构的下拉列表时,务必启用Bootstrap架构出示的bootstrap.js文件。自然,假如你应用的是未编译程序版本号,在js文件夹下你可以寻找一个名叫“dropdown.js”的文档。你也能够启用这一js文件。但是在大家的实例教程中,大家统一启用缩小好的“bootstrap.min.js”文档:

编码以下:

尤其申明:

由于Bootstrap的部件互动实际效果全是取决于jQuery库写的软件,因此在应用bootstrap.min.js以前一定要先载入jquery.min.js才会生实际效果。

大家先看来官在网上一个简易的实例:

操作方法:

在应用Bootstrap架构中的下拉列表部件时,其构造应用的恰当是否十分的关键,假如构造和类名未应用恰当,立即危害部件是不是能一切正常应用。大家来简易的看一下:

1、应用一个名叫“dropdown”的器皿包囊了全部下拉列表原素,实例中为:

2、应用了一个button按键作为父莱单,而且界定类名“dropdown-toggle”和自定“data-toggle”特性,且值务必和外层容器类名一致,此实例为:

3、下拉列表项应用一个ul目录,而且界定一个类名叫“dropdown-menu”,此实例为:

实例

bootstrap开启下拉列表的方式

谢谢诸位的阅读文章!看了以上內容,大家对bootstrap开启下拉列表的方式大约掌握了没有?期待文章对大伙儿有一定的协助。假如想掌握大量有关文章,热烈欢迎关心程序猿领域文化频道。