Bootstrapを使用してエラーメッセージを表示する方法

エラーメッセージの表示: Bootstrapでは、.alertクラスを使用してエラーメッセージを表示することができます。以下のコード例は、エラーメッセージの表示方法を示しています。

<div class="alert alert-danger" role="alert">
 エラーメッセージの内容
</div>

.alertクラスにはさまざまなスタイルがあります。たとえば、.alert-dangerは赤色の背景色を持つエラーメッセージを表示します。他のスタイルも利用可能ですので、必要に応じて変更することができます。

エラーメッセージのカスタマイズ: Bootstrapでは、エラーメッセージの外観をカスタマイズするためのさまざまなクラスやスタイルが用意されています。たとえば、.alert-dismissibleクラスを使用すると、閉じるボタンを追加することができます。

<div class="alert alert-danger alert-dismissible" role="alert">
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
   <span aria-hidden="true">&times;</span>
 </button>
 エラーメッセージの内容
</div>

上記の例では、閉じるボタンをクリックするとエラーメッセージが非表示になります。