📌  相关文章
📜  Bootstrap下拉菜单

📅  最后修改于: 2020-12-19 02:49:48             🧑  作者: Mango

自举下拉菜单

下拉菜单是可切换的上下文菜单，用于以列表格式显示链接。它方便用户从预定义列表中选择一个值。可以通过下拉JavaScript插件进行交互。

您必须将下拉菜单包装在类.dropdown中，以创建Bootstrap Dropdown。

Bootstrap下拉示例

 


  
  
  





  
Dropdowns

  
The .dropdown class is used to indicate a dropdown menu.

  
Use the .dropdown-menu class to actually build the dropdown menu.

  
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".

Bootstrap下拉分隔线

.divider类用于分隔下拉菜单中的链接：

请参阅以下示例：




  
  
 





  
Dropdowns

  
The .divider class is used to separate links inside the dropdown menu:

Bootstrap下拉标题

.dropdown-header类用于在下拉菜单中添加标题。

请参阅以下示例：




  
  
 





  
Dropdowns

  
The .dropdown-header class is used to add headers inside the dropdown menu:

Bootstrap下拉菜单：禁用一项

使用类.disabled禁用下拉菜单中的项目。

请参阅以下示例：




  
  
  





  
Dropdowns

  
Here, CSS is disable.

Bootstrap 4禁用和活动项目

要使某项处于活动状态，请使用.active类突出显示特定的下拉项(活动项以蓝色背景色显示)。

要禁用下拉菜单中的项目，您必须使用.disabled类(它会显示浅灰色的文本颜色和悬停时带有“禁止停车标志”的图标)。

例：




  Bootstrap Example
  
  
  
  
  





  
Dropdowns Active and Disable Example

  

    
    

      Normal
      Active
      Disabled

下拉位置

用于放置下拉菜单项。默认情况下，下拉菜单位于左侧。您可以通过将.dropdown-menu-right类添加到具有.dropdown-menu的元素来使下拉列表右对齐。

例：




  Bootstrap Example
  
  
  
  
  





  
Right Aligned Dropdowns

  

    
    

      Link 1
      Link 2
      Link 3

Bootstrap 4 Dropup

如果您希望下拉菜单向上扩展而不是向下扩展，请更改