Home>Article>Web Front-end> How to trigger drop-down menu in bootstrap
Drop-down menu (basic usage)
Friends, please note that the drop-down menu component in the Bootstrap framework is An independent component, according to different versions, its corresponding file:
☑ LESS version: the corresponding source code file is dropdowns.less
☑ Sass version: the corresponding source code file is _dropdowns .sass
☑ Compiled Bootstrap version: Check lines 3004 to 3130 of the bootstrap.css file
When using the drop-down menu of the Bootstrap framework, you must call the bootstrap provided by the Bootstrap framework. js file. Of course, if you are using the uncompiled version, you can find a file named "dropdown.js" in the js folder. You can also call this js file. However, in our tutorial, we uniformly call the compressed "bootstrap.min.js" file:
The code is as follows:
Special statement:
Because Bootstrap's component interaction effects all rely on plug-ins written in the jQuery library, jquery.min.js must be loaded before using bootstrap.min.js to achieve the effect.
Let’s first look at a simple example on the official website:
Related recommendations: "bootstrap Getting Started Tutorial"
How to use:
When using the drop-down menu component in the Bootstrap framework, it is very important to use the correct structure. If the structure and class name are not used correctly, it will directly affect whether the component can be used normally. Let’s take a brief look:
1. Use a container named “dropdown” to wrap the entire drop-down menu element. In the example:
2. Use a
data-toggle="dropdown"
3. Drop-down The menu item uses a ul list and defines a class named "dropdown-menu". This example is:
下拉菜单
The above is the detailed content of How to trigger drop-down menu in bootstrap. For more information, please follow other related articles on the PHP Chinese website!