کلاسهای اصلاح کننده

بیشتر عناصر Bulma استایل های جایگزینی دارند.
برای اعمال آنها، فقط باید یکی از کلاسهای اصلاح کننده را ضمیمه کنید.
همه آنها با is- یا has- شروع می شوند.

بیایید با یک button ساده شروع کنیم که از کلاس "button" استفاده می کند:

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

با افزودن کلاس "is-primary" می توانید رنگ را اصلاح کنید:

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

می توانید از یکی از 6 رنگ اصلی استفاده کنید:

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

همچنین می توانید اندازه را تغییر دهید:

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

یا استایل یا حالت:

  • is-outlined
  • is-loading
  • [disabled]
                                
<a class="button is-primary is-outlined">
  Button
</a>
<a class="button is-loading">
  Button
</a>
<a class="button" disabled>
  Button
</a>
                    
                  
در نتیجه ترکیب اصلاح کننده ها بسیار آسان است:

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