SE学院
Contact

Alertの使い方

Alert

Primer CSSでアラートを作成するには、flashクラスを指定します。

<div class="flash">.flash</div>
.flash

Success alert

成功を意味するアラートを作成するには、flashクラスに加えて、flash-success修飾クラスを指定します。

<div class="flash flash-success">.flash .flash-success</div>
.flash .flash-success

Warning alert

警告を意味するアラートを作成するには、flashクラスに加えて、flash-warn修飾クラスを指定します。

<div class="flash flash-warn">.flash .flash-warn</div>
.flash .flash-warn

Errot alert

エラーを意味するアラートを作成するには、flashクラスに加えて、flash-error修飾クラスを指定します。

<div class="flash flash-error">.flash .flash-error</div>
.flash .flash-error

Alert with icon

アイコンつきのアラートを作成するには、SVGを使います。

<div class="flash flash-warn">
  <svg width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-alert mr-2" aria-hidden="true">
    <path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z" />
  </svg>
  .flash .flash-warn
</div>
.flash .flash-warn