2023学年完整公开课版Bootstrap下拉菜单

Bootstrap下拉菜单北京电子科技职业学院目录Contents下拉菜单组件一下拉菜单对齐二禁用菜单选项三下拉菜单插件四下拉菜单组件1下拉菜单组件bootstrap框架提供了下拉菜单组件（dropdown），即点击一个元素或按钮，触发隐藏的列表显示出来。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。下拉菜单的触发器和整个下拉菜单都需要包裹在类为dropdown中，或者声明为position:relative;的其它页面元素中。下拉菜单组件HTML标记如下：<divclass="dropdown"><ulclass="dropdown-menu"role="menu"><li><atabindex="-1"href="#">Action</a></li><li><atabindex="-1"href="#">Anotheraction</a></li><li><atabindex="-1"href="#">Somethingelsehere</a></li><liclass="divider"></li><li><atabindex="-1"href="#">Separatedlink</a></li></ul></div>下拉菜单组件上述标记并不能实现下拉菜单，需要添加一个被点击的元素。设置要求如下：按钮和菜单需要包裹在.dropdown的容器里，而作为被点击的元素按钮需要设置data-toggle="dropdown"才能有效。对于菜单部分，设置class="dropdown-menu"才能自动隐藏并添加固定样式。设置class="caret"表示箭头，可上可下。下拉菜单组件完整下拉菜单HTML代码：<divclass="dropdown"><buttonclass="btnbtn-default"data-toggle="dropdown">下拉菜单

<spanclass="caret"></span></button><ulclass="dropdown-menu"role="menu"><li><atabindex="-1"href="#">Action</a></li><li><atabindex="-1"href="#">Anotheraction</a></li><li><atabindex="-1"href="#">Somethingelsehere</a></li><liclass="divider"></li><li><atabindex="-1"href="#">Separatedlink</a></li></ul></div>下拉菜单对齐2下拉菜单对齐通过向.dropdown-menu添加class.pull-right来向右对齐下拉菜单。HTML代码如下：<ulclass="dropdown-menupull-right"role="menu">...</ul>禁用菜单选项3禁用菜单选项向<li>添加.disabled即可禁用菜单中的某个链接。HTML代码如下：<ulclass="dropdown-menu"role="menu"><li><atabindex="-1"href="#">Regularlink</a></li><liclass="disabled"><atabindex="-1"href="#">Disabledlink</a></li><li><atabindex="-1"href="#">Anotherlink</a></li></ul>下拉菜单插件4下拉菜单插件使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。Bootstrap中下拉菜单的切换有以下两种方法：1、通过data属性，向链接或按钮添加data-toggle=”dropdown”来切换下拉菜单。2、通过JavaScript调用下拉菜单切换下拉菜单插件方法1：通过data属性：向链接或按钮添加data-toggle=“dropdown”来切换下拉菜单。<divclass="dropdown"><adata-toggle="dropdown"href="#">Dropdown触发器</a><ulclass="dropdown-menu"role="menu">...</ul></div>下拉菜单插件方法2：通过JavaScript调用下拉菜单切换，请使用下面的方法：$('.dropdown-to