通过 🎓 在线互动课程、📺 教育视频和 🧑🏻‍💻 项目构建教程学习 CSS。
下载

赞助

Route Planner and Route Optimizer

Bulma 的修饰符语法


如何使用 Bulma 组件及其替代样式

让我们从一个简单的 button 开始,它使用 "button" CSS 类

<button class="button">Button</button>

通过 添加 "is-primary" CSS 类,您可以修改 颜色

<button class="button is-primary">Button</button>

您可以使用 6 种主要颜色 之一

  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger

<button class="button is-primary">Button</button>
<button class="button is-link">Button</button>
<button class="button is-info">Button</button>
<button class="button is-success">Button</button>
<button class="button is-warning">Button</button>
<button class="button is-danger">Button</button>

您还可以更改 尺寸

  • is-small
  • is-medium
  • is-large

<button class="button is-small">Button</button>
<button class="button">Button</button>
<button class="button is-medium">Button</button>
<button class="button is-large">Button</button>

样式状态

  • is-outlined
  • is-loading
  • [disabled]

<button class="button is-primary is-outlined">Button</button>
<button class="button is-loading">Button</button>
<button class="button" disabled>Button</button>
因此,很容易 组合修饰符:

<button class="button is-primary is-small" disabled>Button</button>
<button class="button is-info is-loading">Button</button>
<button class="button is-danger is-outlined is-large">Button</button>

如何支持 Bulma

#native_company# #native_desc#
#native_cta#
免费开始使用
免费开始使用