Bulma 수식어 문법

Bulma 수식어 문법 (Bulma's Modifiers Syntax)

Bulma의 강력함은 수식어(modifier) 클래스에서 나와요. 기본 클래스에 is-나 has-로 시작하는 수식어를 덧붙이기만 하면 색상·크기·스타일을 자유롭게 조합할 수 있지요. 버튼을 예로 들어 그 문법을 살펴볼게요.

출처: 문서

본문

Bulma에서는 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>

더 알아보기 (Learn more)