.net column
.NET開発者のためのブログメディア

写真

Bootstrapでのalertの使い方を紹介|alertを正しく使いこなそう!

2020年12月02日
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を作成することもできます。

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags