Bootstrap的下拉菜单dropdown

.dropdown 类用来指定一个下拉菜单。

我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。


 

下拉菜单


 

.dropdown 类用来指定一个下拉菜单。


 

.dropdown-menu 类来设置实际下拉菜单。


 

我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。

                                          
 

Bootstrap的下拉菜单dropdown_第1张图片

结合按钮使用请参考http://blog.csdn.net/qq_41328247/article/details/79648998




.dropdown 类用来指定一个下拉菜单。

我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。

class to a 

 元素上添加 .dropdown-menu 类来设置实际下拉菜单,然后在下拉菜单的选项中添加 .dropdown-item类。

下拉菜单中的分割线


.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线:

下拉菜单中的标题

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



 

下拉菜单中


 

.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线:


 

Bootstrap的下拉菜单dropdown_第2张图片

下拉菜单增加标题

 

下拉菜单中


 

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


 

Bootstrap的下拉菜单dropdown_第3张图片


下拉菜单中的可用项与禁用项

.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。

如果要禁用下拉菜单的选项,可以使用.disabled 类。



 

下拉菜单


 

.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。


 

如果要禁用下拉菜单的选项,可以使用.disabled 类。


 

Bootstrap的下拉菜单dropdown_第4张图片


下拉菜单的定位

如果我们想让下拉菜单右对齐,可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类。



 

下拉菜单


 

如果我们想让下拉菜单右对齐,可以在元素上的 .dropdown-menu 类后添加 .dropdown-menu-right 类。


 


上拉菜单只需要在div定义class时将dropdown改成" 替换为 "dropup":


dropdown-toggle-split是将下拉菜单中的边框设置




 

按钮中的下拉菜单


 

   
   
   
 

  
 

   
   
   
 



 

   
   
   
 



 

   
   
   
 



 

   
   
   
 



 

   
   
   

 

Bootstrap的下拉菜单dropdown_第5张图片

你可能感兴趣的:(Bootstrap的下拉菜单dropdown)