2018-07-14
2018-07-22
Bootstrapでアラートメッセージを表示する|コピペで動くサンプル付き

Bootstrapでは警告文章やインフォメーション用の要素が用意されており、今回はこちらを紹介します。 今回もコピペで動くサンプルコード付きです。
サンプル画像は以下です
サンプルコード
以下内容をメモ帳などに、保存しhtml形式で展開すれば 実際に内容を確認できます
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>アラートメッセージの内容</title> <!--CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <!--JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style> .m-30 { margin-top: 30px; } </style> </head> <div class="m-30"> <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> </div> <!--以下で要素を閉じる事も可能--> <div class="alert alert-info alert-dismissible fade in" role="alert"> <!--閉じるボタンの設定--> <button type="button" data-dismiss="alert" class="close">×</button> <p><strong>要素を閉じる場合のサンプル</strong></p> <p>右側の×ボタンを選択すればこの要素を閉じる事が可能です</p> </div> </body> </html>
サンプルコード解説
要素のデザインは設定したいクラスにalertとalert-〇〇と設定 すれば自動でデザインが設定されます。
<div class="alert alert-success" role="alert">
以下は要素の閉じるボタンを押したら、その要素を閉じる事ができます。
<!--以下で要素を閉じる事も可能--> <div class="alert alert-info alert-dismissible fade in" role="alert"> <!--閉じるボタンの設定--> <button type="button" data-dismiss="alert" class="close">×</button> <p><strong>要素を閉じる場合のサンプル</strong></p> <p>右側の×ボタンを選択すればこの要素を閉じる事が可能です</p> </div>
その他関連記事 Bootstrapでドロップダウンボタンを設定する|コピペで動くサンプル付き
Bootstrapでボタンの色や大きさを変更する|コピペで動くサンプル付き
Bootstrapでモーダルウインドウをカスタマイズする|コピペで動くサンプル付き
Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き
あなたにお勧めの記事
前の記事
2018/07/10
次の記事