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

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">&times;</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">&times;</button>
    <p><strong>要素を閉じる場合のサンプル</strong></p>
    <p>右側の×ボタンを選択すればこの要素を閉じる事が可能です</p>
</div>

Bootstrapでボタンの色や大きさを変更する|コピペで動くサンプル付き

Bootstrapでモーダルウインドウをカスタマイズする|コピペで動くサンプル付き

Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き

LocalStorageとBootstrapのモーダルを利用する

htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き

2018/07/10

Ruby on RailsでAPIを利用して、簡単なアプリケーションを作成する

2018/07/16

Ruby on RailsでConcernsを利用してControllerの処理を共通化する