📜  布尔玛按钮列表

📅  最后修改于: 2022-05-13 01:56:21.525000             🧑  作者: Mango

布尔玛按钮列表

Bulma Button List用于对列表中的按钮进行分组。可以通过使用类按钮将按钮包装在 HTML div 中来创建按钮列表。如果列表长于当前视口宽度,则按钮将被包裹在多行上,同时保持按钮之间的间距不变。

按钮列表类:

  • 按钮:该类用于所有按钮的容器以制作按钮列表。
  • is-centered:该类用于将按钮列表居中对齐。
  • is-right:该类用于将按钮列表向右对齐。
  • has-addons:该类用于按钮容器上,用于将其中的按钮附加在一起。

句法:

简单按钮列表:在本例中,我们创建了一个带有类按钮的简单 HTML div,并在按钮容器内创建了三个按钮。这将创建一个按钮列表。

示例 1:这是一个简单按钮列表的示例。

HTML


  

    Bulma Simple Button Lists
    

  

    

GeeksforGeeks

    Bulma Simple Button Lists     
        
                                               
       
  


HTML


  

    Bulma Wrapped Button Lists
    

  

    

GeeksforGeeks

    Bulma Wrapped Button Lists     
        
                                                                                                                                                                                                                                                                            
       
  


HTML


  

    Bulma Button Lists Alignment
    

  

    

GeeksforGeeks

    Bulma Button Lists Alignment     
        
                                                            
        
                                                            
        
                                                            
       
  


HTML


  

    Bulma Button Lists
    

  

    

GeeksforGeeks

    Bulma Button Lists     
        
                                                            
        
                                                            
    
  


输出:

布尔玛按钮列表

Wrapped Button List:当按钮列表超出视口的宽度时,按钮将被包裹在下一行。下面的示例显示相同。

示例 2:这是一个包装按钮列表的示例。

HTML



  

    Bulma Wrapped Button Lists
    

  

    

GeeksforGeeks

    Bulma Wrapped Button Lists     
        
                                                                                                                                                                                                                                                                            
       
  

输出:

布尔玛按钮列表

按钮列表对齐:按钮列表默认为左对齐。 is-centeredis-right修饰符可用于分别将内容居中或右对齐。

句法:

示例 3:这是一个按钮列表对齐的示例。顶部按钮列表默认左对齐,中间按钮列表使用is-centered修饰符将按钮对齐到页面中间,而底部按钮列表使用is-right修饰符将按钮对齐到右侧。

HTML



  

    Bulma Button Lists Alignment
    

  

    

GeeksforGeeks

    Bulma Button Lists Alignment     
        
                                                            
        
                                                            
        
                                                            
       
  

输出:

类=

列表中的按钮作为插件:列表中的按钮可以使用按钮容器上的has-addon修饰符附加。为了将按钮与其他按钮区分开来,可以使用任何自定义类来修改样式,但是应该将is-selected修饰符与修饰符类一起使用,以确保所选按钮位于其兄弟姐妹之上。

Syntax:

例子:

HTML



  

    Bulma Button Lists
    

  

    

GeeksforGeeks

    Bulma Button Lists     
        
                                                            
        
                                                            
    
  

输出:

类=

参考:https://bulma.io/documentation/elements/button/#list-of-buttons