libro
www.tuyano.com
初心者のためのBootstrap入門

アラート・ダイアログ・折りたたみ表示 (1/5)

作成:2017-03-18 08:41
更新:2017-03-18 08:41

■アラートの表示

アプリケーションでは、各種の情報を表示したり、ユーザーに確認や入力などを促すためのインターフェイスというのが用意されています。「アラート」と「ダイアログ」です。Bootstrapにも、これらのインターフェイスを実現するための機能が用意されています。

まずは、もっともシンプルな「アラート」からです。Bootstrapでは、ちょっとしたメッセージなどを表示するのに、以下のようなアラート表示を用意できます。
<div class="alert アラートのクラス">
    ……アラートの内容……
</div>

classに「alert」を指定するだけで、アラートの表示になります。ただし、それだけでは輪郭線だけの表示になるので、実際の利用の際には、あわせて以下のクラスからいずれかを追加します。

alert-info――ちょっとした情報などを表示するものです。
alert-success――なんらかの操作が成功したことを表示するのに使います。
alert-warning――警告の表示です。
alert-danger――危険を伝えるための表示です。

これらを利用することで、アラートの表示を作れます。下にその利用例を挙げておきましょう。４つのアラートが表示されます。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap</title>

    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/script.js"></script>
    
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">

</head>
<body >
    
<div class="container">
            
<div class="row">
    <div class="col-md-12">
        
        <div class="page-header">
            <h1>アラート・ダイアログ</h1>
            <h2 >Alert</h2>
        </div>
        
        <div>

        <div class="alert alert-info">
            <h4>Alert!</h4>
            これは、アラートの表示です。
        </div>

         <div class="alert alert-success">
            <h4>Alert!</h4>
            これは、アラートの表示です。
        </div>

        <div class="alert alert-warning">
            <h4>Alert!</h4>
            これは、アラートの表示です。
        </div>

        <div class="alert alert-danger">
            <h4>Alert!</h4>
            これは、アラートの表示です。
        </div>

   </div>
</div>
    
</div>

</body>
</html>
※関連コンテンツ

「初心者のためのBootstrap入門」に戻る