📌  相关文章
📜  布尔玛 |标签

📅  最后修改于: 2021-08-29 13:16:49             🧑  作者: Mango

Bulma是一个基于 Flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度敏感的。它使用类来实现其设计。
Bulma 标签是一个小元素，对于将信息附加到块或其他组件非常有用。

示例 1：简单标签元素


  
    Bulma Tag
    
    
    
  
  
    

      

        

          

            
Tag Elements

            

          

  
          

            
              Tag1
            
            
              Tag2
            
            
              Tag3
            
            
              Tag4
            
            
              Tag5
            
            
              Tag6
            
            
              Tag7
            
            
              Tag8
            
            
              Tag9
            
            
              Tag10
            
          

        

      

    

    
  

输出：

示例 2：彩色标签元素


  
    Bulma Tag
    
    
    
  
  
    

      

        

          

            
Coloured Tag Elements

            

          

  
          

            
              Primary
            
            
              Info
            
            
              Link
            
            
              Success
            
            
              Black
            
  
            
              Dark
            
            
              Light
            
            
              White
            
            
              Warning
            
            
              Danger
            
          

        

      

    

    
  

输出：

示例 3：不同尺寸的标签元素


  
    Bulma Tag
    
    
    
  
  
    

      

        

          

            

                Different sizes Tag Elements
            

            

          

  
          

            
              Normal
            
            
              Medium
            
            
              Large
            
              
          

        

      

    

    
  

输出：

示例 4：圆形标记元素


  
    Bulma Tag
    
    
    
  
  
    

      

        

          

            
Rounded Tag Elements

            

          

  
          

            
              Primary
            
            
              Info
            
            
              Link
            
            
              Success
            
            
              Black
            
             
              Warning
            
            
              Danger
            
          

        

      

    

    
  

输出：

示例 5：带有删除标记元素的文本标记元素


  
    Bulma Tag
    
    
    
  
  
    

      

        

          

            

 Text Tag Element with Delete Tag Element 
            

            

          

  
          

            

              Javascript
              
            

  
            

              Node.Js
              
            

  
            

              Angular
              
            

  
            

              React
              
            

  
            

              Vue
              
            

  
            

              Bulma Css
              
            

  
            

              Mongo DB
              
            

              
            

              Python
              
            

              
          

        

      

    

    
  

示例 6：标签连接在一起


  
    Bulma Tag
    
    
    
  
  
    

      

        

          

            
Tags attach together

            

          

  
          

            

              Yes
              No
            

  
            

              Show
              Hide
            

  
            

              Node.Js
              NPM
            

  
            

              CSS
              Bulma
            

  
            

              Javascript
              Angular
            

  
            

              Javascript
              React
            

              
          

        

      

    

    
  

输出：