📜  布尔玛 |介绍

📅  最后修改于: 2021-10-29 06:21:17             🧑  作者: Mango

Bulma 是由 Jeremy Thomas 开发的开源 CSS 框架。该框架基于 CSS Flexbox 属性。它具有高度响应性,最大限度地减少了对响应行为的媒体查询的使用。
Bulma 的另一个优点是您只需了解 HTML 和 CSS 即可实现此框架(尽管了解 JavaScript 可以根据您的需要帮助现有功能)。
Bulma 还允许我们添加自己的 CSS 样式,但建议使用外部样式表而不是内联样式。

使用 Bulma:如果您是 Web 开发初学者,最简单的方法是使用链接标签在 HTML 文件的头部部分使用 jsDelivr CDN 链接。



     


      

Hello world!!

输出:

Hello world!!

Bulma 的另一个很酷的功能是,它可以简单地导入您想要应用 Bulma 样式的特定元素所需的 SASS 文件。例如,如果您想要表单元素的 Bulma 样式,则只能导入该 sass 文件。否则,您可以使用 npm 安装 Bulma 包。

示例: Bulma 语法极其简单,有预定义的类名可以帮助我们根据名称创建元素。



  
    
    
    Hello Bulma!
    
  
  
Hello

它创建了一个带有 Hello 字样的程式化按钮。

创建的按钮与通用 HTML 按钮不同。

每个 Bulma 元素都有多种可用的替代样式,并且可以通过使用is-has-类修饰符来应用这些样式。

例子:



  

    
    
    Hello Bulma!
    

  

    Hello
    Hello
    Hello

  

这些修改器构成了在 Bulma 中操作对象的基础。 Bulma 提供的一些颜色修饰符是:

  • 是主要的
  • 信息
  • 是成功
  • 是危险
  • 警告

大小修饰符范围从is-size-1is-size-6 。这些有助于改变字体大小。尝试在 Bulma 中使用 h1h6标签,但您会注意到可见字体大小没有变化。这是因为 Bulma 仅使用修饰符来更改文本的大小,而不是以标准的 HTML 方式。尝试运行此代码以了解 h1 到 h6 标签如何不影响文本大小:



   

    
    
    Hello Bulma!
    
 
   

    

hello world

    

hello world

    

hello world

  

输出:

hello world
hello world
hello world

在元素类属性中添加多个变体。试试这个代码并观察我们使用了两个修饰符,一个用于颜色,第二个用于大小。




    
    
    Hello Bulma!
    

  

    Hello
    Hello
    Hello

  

输出:

好处:

  • 适用于所有设备(台式机、平板电脑和手机)的响应式设计。
  • 易于阅读和编写代码。
  • 它可以与任何 JavaScript 框架(AngularJS、ReactJS)结合使用。

缺点:

  • 处于开发阶段。
  • 需要小的改进。
  • 新框架