SE

alertダイアログとはいったいどういった機能でしょうか？

PM

メッセージや警告を表す画面で、改行して文字列を表示します。実際のコードを見て理解を深めていきましょう。

Bootstrapでのalertの使い方とは？

今回は、Bootstrapでのalertの使い方について説明します。

ここでは、以下について説明します。
・背景色の指定
・リンクテキストの色指定
・ヘッダの色指定
・削除できるalert

Bootstrapでのalertの使い方に興味のある方はぜひご覧ください。

背景色の指定

Bootstrapでは、alertメッセージの背景色を指定できます。

See the Pen
bootstrap_alert1 by kskumd (@kskumd)
on CodePen.

リンクテキストの色指定

Bootstrapでは、alert-linkを指定することで、アラートメッセージの背景に対応したリンクの色で表示します。

See the Pen
bootstrap_alert2 by kskumd (@kskumd)
on CodePen.

このように、Bootstrapでは、alert-linkを指定することで、alertメッセージの背景に対応したリンクの色で表示します。

ヘッダの色指定

Bootstrapでは、alert-headingを指定することで、alertメッセージの背景に対応したヘッダ色で表示します。

See the Pen
bootstrap_alert3 by kskumd (@kskumd)
on CodePen.

このように、Bootstrapではalert-headingを指定することで、alertメッセージの背景に対応したヘッダ色で表示します。

削除できるalert

Bootstrapでは、alert-dismissibleを指定することで、削除できるalertになります。

See the Pen
bootstrap_alert4 by kskumd (@kskumd)
on CodePen.

このように、Bootstrapではalert-dismissibleを指定することで、削除できるalertになります。

SE

警告のほかに色指定や削除もできるのですね。

PM

色や警告文の他に消えるタイミングを調整できます。実際にコードを書いたり微調整しながら覚えていきましょう。

Bootstrapでのalertを正しく使いこなそう！

いかがでしたでしょうか。
Bootstrapでのalertの使い方について説明しました。Bootstrapでは、alertについて背景色やリンクテキストの色指定、ヘッダの色指定ができます。また、削除できるalertを作成することもできます。

ぜひご自身でソースコードを書いて、理解を深めてください。