Bulma是一个纯粹的CSS框架,没有任何JavaScript代码,最终生成的只是一个简单的.css文件:
Bulma的原则是不直接对标签设置样式,而是通过css类,让开发人员选择是否应用Bulma样式。例如 ,如果不设置css类,是没有Bulma的样式效果的,只有当设置.input css类后才有:。
Bulma只在2种特殊情况下,直接对标签设置样式:
文本内容的样式(如所见即所得):.contentcss类包含的内容
主要的CSS类
Bulma中主要包含了以下几大类的css定义
修饰符
分列
布局
表单
元素
组件
修饰符
可以方便地设置元素的颜色、大小等。
如下面定义了一个按钮,is-primary就是修饰符
Button
分列
水平分列相关的css类。
示例:
First column
Second column
Third column
Fourth column
布局
布局相关的CSS
布局css类 container示例:
This container is centered on desktop.
表单
表单相关css
input 示例:
元素
html元素相关css
Button
组件
组件是指由多个元素组成的常用UI单元,如面包屑
面包屑示例: