alertを使ってみる

メッセージをだしてみたいと思います。

参考にしたサイト様

https://webnetamemo.com/coding/bootstrap/201702264279

学習したいかたは上記のサイト様をご覧下さい。

以下、自分のための備忘録。

アラートのデザインにするには、

divに.alert ＋ .alert-success等のクラスをつけるそうです

デフォルトがないみたいなので、

下記の種類から選ぶ必要が。

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

role（役割）がなくてもデザインには影響なさそうだけど、

一応つけておこうと思います。

閉じるボタン

divに alert-dismissibleをつけて、ボタンリンクを用意すると

閉じることもできるようです。

<div class="alert alert-warning alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="閉じる"><span aria-hidden="true">×</span></button>
    <strong>warning</strong>：　このメッセージは閉じることができます。
</div>

リンク

アラート内でのリンクにはalert-linkクラスを指定してげると、

レイアウトが統一されてよさそうです。