Bootstrap 4 是与 HTML 和 JavaScript 一起用于构建交互式网站的最广泛使用的 CSS 框架之一。 Bootstrap 4 提供了多种内置组件、类和实用方法,可用于创建用户友好的 Web 应用程序。下面的文章完成了在折叠时更改引导程序导航栏下拉菜单颜色的目的。
第一种方法:第一种方法利用 Bootstrap 类在折叠时更改导航栏下拉菜单的颜色。 Bootstrap 4 有一个内置类“.show”,当下拉菜单展开时,它被添加到导航栏项目中,当下拉菜单折叠时,该类被隐藏。可以使用 show类更改下拉菜单的颜色。
代码实现:
HTML
HTML
输出:
- 在单击下拉菜单之前:
- 单击下拉菜单后:
第二种方法:第二种方法使用带有 Bootstrap 类的 jQuery 来更改折叠时导航栏下拉菜单的颜色。单击下拉菜单时,会添加 navcolor类并且下拉菜单的颜色会发生变化。当下拉菜单被折叠或再次单击时,导航颜色类将被隐藏。每次单击下拉列表时都会切换类导航颜色。在这种方法中,我们不使用任何内置的 Bootstrap 类。
代码实现:
HTML
输出:
- 在单击下拉菜单之前:
- 单击下拉菜单后: