mirror of
https://github.com/jgthms/bulma.git
synced 2024-12-12 13:28:30 +00:00
186 lines
4.5 KiB
HTML
186 lines
4.5 KiB
HTML
---
|
|
layout: documentation
|
|
doc-tab: modifiers
|
|
doc-subtab: syntax
|
|
---
|
|
|
|
{% include subnav-modifiers.html %}
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">Modifiers syntax</h1>
|
|
<h2 class="subtitle">Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>.
|
|
<br>
|
|
They all start with <code>is-</code> or <code>has-</code>.</h2>
|
|
<hr>
|
|
<div class="columns">
|
|
<div class="column">
|
|
<p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
|
|
</div>
|
|
{% capture button_example %}
|
|
<a class="button">
|
|
Button
|
|
</a>
|
|
{% endcapture %}
|
|
<div class="column">
|
|
<p>
|
|
{{button_example}}
|
|
</p>
|
|
</div>
|
|
<div class="column is-half">
|
|
{% highlight html %}
|
|
{{button_example}}
|
|
{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column">
|
|
<p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
|
|
</div>
|
|
{% capture button_primary_example %}
|
|
<a class="button is-primary">
|
|
Button
|
|
</a>
|
|
{% endcapture %}
|
|
<div class="column">
|
|
<p>
|
|
{{button_primary_example}}
|
|
</p>
|
|
</div>
|
|
<div class="column is-half">
|
|
{% highlight html %}
|
|
{{button_primary_example}}
|
|
{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="content">
|
|
<p>You can use one of the <strong>5 main colors</strong>:</p>
|
|
<ul>
|
|
<li><code>is-primary</code></li>
|
|
<li><code>is-info</code></li>
|
|
<li><code>is-success</code></li>
|
|
<li><code>is-warning</code></li>
|
|
<li><code>is-danger</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<p class="field">
|
|
<a class="button is-primary">Button</a>
|
|
</p>
|
|
<p class="field">
|
|
<a class="button is-info">Button</a>
|
|
</p>
|
|
<p class="field">
|
|
<a class="button is-success">Button</a>
|
|
</p>
|
|
<p class="field">
|
|
<a class="button is-warning">Button</a>
|
|
</p>
|
|
<p class="field">
|
|
<a class="button is-danger">Button</a>
|
|
</p>
|
|
</div>
|
|
<div class="column is-half">
|
|
{% highlight html %}
|
|
<a class="button is-primary">
|
|
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>
|
|
{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="content">
|
|
<p>You can also alter the <strong>size</strong>:</p>
|
|
<ul>
|
|
<li><code>is-small</code></li>
|
|
<li><code>is-medium</code></li>
|
|
<li><code>is-large</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<p class="field">
|
|
<a class="button is-small">Button</a>
|
|
</p>
|
|
<p class="field">
|
|
<a class="button">Button</a>
|
|
</p>
|
|
<p class="field">
|
|
<a class="button is-medium">Button</a>
|
|
</p>
|
|
<p class="field">
|
|
<a class="button is-large">Button</a>
|
|
</p>
|
|
</div>
|
|
<div class="column is-half">
|
|
{% highlight html %}
|
|
<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>
|
|
{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="content">
|
|
<p>Or the <strong>style</strong> or <strong>state</strong>:</p>
|
|
<ul>
|
|
<li><code>is-outlined</code></li>
|
|
<li><code>is-loading</code></li>
|
|
<li><code>is-disabled</code></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<p class="field">
|
|
<a class="button is-primary is-outlined">Button</a>
|
|
</p>
|
|
<p class="field">
|
|
<a class="button is-primary is-loading">Button</a>
|
|
</p>
|
|
<p class="field">
|
|
<a class="button is-primary is-disabled">Button</a>
|
|
</p>
|
|
</div>
|
|
<div class="column is-half">
|
|
{% highlight html %}
|
|
<a class="button is-primary is-outlined">
|
|
Button
|
|
</a>
|
|
<a class="button is-primary is-loading">
|
|
Button
|
|
</a>
|
|
<a class="button is-primary is-disabled">
|
|
Button
|
|
</a>
|
|
{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|