syntax.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. ---
  2. title: Modifiers syntax
  3. layout: documentation
  4. doc-tab: modifiers
  5. doc-subtab: syntax
  6. breadcrumb:
  7. - home
  8. - documentation
  9. - modifiers
  10. - modifiers-syntax
  11. ---
  12. {% capture button_example %}
  13. <a class="button">
  14. Button
  15. </a>
  16. {% endcapture %}
  17. {% capture button_primary_example %}
  18. <a class="button is-primary">
  19. Button
  20. </a>
  21. {% endcapture %}
  22. <div class="columns">
  23. <div class="column">
  24. <p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
  25. </div>
  26. <div class="column">
  27. <p>
  28. {{button_example}}
  29. </p>
  30. </div>
  31. <div class="column is-half">
  32. {% highlight html %}{{button_example}}{% endhighlight %}
  33. </div>
  34. </div>
  35. <div class="columns">
  36. <div class="column">
  37. <p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
  38. </div>
  39. <div class="column">
  40. <p>
  41. {{button_primary_example}}
  42. </p>
  43. </div>
  44. <div class="column is-half">
  45. {% highlight html %}{{button_primary_example}}{% endhighlight %}
  46. </div>
  47. </div>
  48. <div class="columns">
  49. <div class="column">
  50. <div class="content">
  51. <p>You can use one of the <strong>6 main colors</strong>:</p>
  52. <ul>
  53. <li><code>is-primary</code></li>
  54. <li><code>is-link</code></li>
  55. <li><code>is-info</code></li>
  56. <li><code>is-success</code></li>
  57. <li><code>is-warning</code></li>
  58. <li><code>is-danger</code></li>
  59. </ul>
  60. </div>
  61. </div>
  62. <div class="column">
  63. <p class="field">
  64. <a class="button is-primary">Button</a>
  65. </p>
  66. <p class="field">
  67. <a class="button is-link">Button</a>
  68. </p>
  69. <p class="field">
  70. <a class="button is-info">Button</a>
  71. </p>
  72. <p class="field">
  73. <a class="button is-success">Button</a>
  74. </p>
  75. <p class="field">
  76. <a class="button is-warning">Button</a>
  77. </p>
  78. <p class="field">
  79. <a class="button is-danger">Button</a>
  80. </p>
  81. </div>
  82. <div class="column is-half">
  83. <div class="highlight-full">
  84. {% highlight html %}
  85. <a class="button is-primary">
  86. Button
  87. </a>
  88. <a class="button is-link">
  89. Button
  90. </a>
  91. <a class="button is-info">
  92. Button
  93. </a>
  94. <a class="button is-success">
  95. Button
  96. </a>
  97. <a class="button is-warning">
  98. Button
  99. </a>
  100. <a class="button is-danger">
  101. Button
  102. </a>
  103. {% endhighlight %}
  104. </div>
  105. </div>
  106. </div>
  107. <div class="columns">
  108. <div class="column">
  109. <div class="content">
  110. <p>You can also alter the <strong>size</strong>:</p>
  111. <ul>
  112. <li><code>is-small</code></li>
  113. <li><code>is-medium</code></li>
  114. <li><code>is-large</code></li>
  115. </ul>
  116. </div>
  117. </div>
  118. <div class="column">
  119. <p class="field">
  120. <a class="button is-small">Button</a>
  121. </p>
  122. <p class="field">
  123. <a class="button">Button</a>
  124. </p>
  125. <p class="field">
  126. <a class="button is-medium">Button</a>
  127. </p>
  128. <p class="field">
  129. <a class="button is-large">Button</a>
  130. </p>
  131. </div>
  132. <div class="column is-half">
  133. {% highlight html %}
  134. <a class="button is-small">
  135. Button
  136. </a>
  137. <a class="button">
  138. Button
  139. </a>
  140. <a class="button is-medium">
  141. Button
  142. </a>
  143. <a class="button is-large">
  144. Button
  145. </a>
  146. {% endhighlight %}
  147. </div>
  148. </div>
  149. <div class="columns">
  150. <div class="column">
  151. <div class="content">
  152. <p>Or the <strong>style</strong> or <strong>state</strong>:</p>
  153. <ul>
  154. <li><code>is-outlined</code></li>
  155. <li><code>is-loading</code></li>
  156. <li><code>[disabled]</code></li>
  157. </ul>
  158. </div>
  159. </div>
  160. <div class="column">
  161. <p class="field">
  162. <a class="button is-primary is-outlined">Button</a>
  163. </p>
  164. <p class="field">
  165. <a class="button is-primary is-loading">Button</a>
  166. </p>
  167. <p class="field">
  168. <a class="button is-primary" disabled>Button</a>
  169. </p>
  170. </div>
  171. <div class="column is-half">
  172. {% highlight html %}
  173. <a class="button is-primary is-outlined">
  174. Button
  175. </a>
  176. <a class="button is-primary is-loading">
  177. Button
  178. </a>
  179. <a class="button is-primary" disabled>
  180. Button
  181. </a>
  182. {% endhighlight %}
  183. </div>
  184. </div>