Bootstrap must learn drop-down menu every day_javascript skills-JS Tutorial-php.cn

Bootstrap must learn drop-down menu every day_javascript skills

WBOY

Release： 2016-05-16 15:30:03

Original

1101 people have browsed it

1. 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: View lines 3004 to 3130 of the bootstrap.css file

When using the drop-down menu of the Bootstrap framework, you must call the bootstrap.js file provided by the Bootstrap framework. 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:

Copy code The code is as follows:

Special statement: Because Bootstrap’s component interaction effects all rely on plug-ins written by the jQuery library, jquery.min must be loaded before using bootstrap.min.js .js will produce the effect.

Let’s first look at a simple example on the official website:

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
 …
 <li role="presentation" class="divider"></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>

Copy after login

Usage:

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 quick look:

1. Use a container named "dropdown" to wrap the entire drop-down menu element. In the example:

2. Use a

Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名，如下所示：

上面代码中的“pull-right”类可以用“dropdown-menu-right”代替，两个类的作用是一样的，可从下面的源代码中看出。

/源码请查看bootstrap.css文件第3030行～第3033行和3082行～第3085行/

与此同时，还有一个类名刚好与“dropdown-menu-right”相反的类名“dropdown-menu-left”，其效果就是让下拉菜单与父容器左边对齐，其实就是默认效果。

下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）：

下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名：

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> …. <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>

/请查看bootstrap.css文件第3055行～第3075行/ .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #fff; text-decoration: none; background-color: #428bca; outline: 0; } .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { color: #999; } .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { text-decoration: none; cursor: not-allowed; background-color: transparent; background-image: none; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); }