Bootstrap学习-菜单-按钮-导航
时间：2023-04-02 23:22:34
HTML
1.下拉菜单（基本用法）使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果您使用的是未编译版本，您会在js文件夹中找到一个名为dropdown.js的文件。你也可以调用这个js文件。在使用Bootstrap框架中的下拉菜单组件时，正确使用其结构非常重要。如果结构体和类名使用不当，将直接影响组件能否正常使用。下拉菜单下拉菜单项...下拉菜单项
2.下拉菜单（原理分析）Bootstrap框架中的下拉菜单组件，其下拉菜单项默认是隐藏的，因为dropdown-menu的默认样式设置为display:none，当用户点击父菜单项，下拉菜单会显示，当用户再次点击时，下拉菜单会继续隐藏。下面我们来分析一下实现原理。这很简单。通过js技术，添加或去掉对父容器div.dropdown打开的类名，控制下拉菜单的显示或隐藏。也就是说，默认情况下，div.dropdown是没有打开类名的。用户第一次点击时，div.dropdown会添加类名open；当用户再次点击时，div.dropdown容器中打开的类名将被添加删除。3.下拉菜单（下拉分隔符）Bootstrap框架中的下拉菜单也提供了下拉分隔符。假设下拉菜单有两组，可以在组之间添加一个空的
，并给这个添加类名分隔符，实现添加下拉分隔符的功能。4.下拉菜单（菜单标题）下拉菜单可以通过添加分隔符来分组。为了让这个分组更加明显，还可以在每个分组中加上一个head（标题）。下拉菜单菜单的第一部分header下拉菜单项...第二部分菜单标题...下拉菜单项下拉菜单... 6、下拉菜单（菜单项状态）下拉菜单项的默认状态（无需设置）有悬停状态（:hover）和焦点状态（:focus）。除了以上两种状态，下拉菜单项还有当前状态（.active）和禁用状态（.disabled）。
