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

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

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

■折りたたみ表示

アラートは、必要に応じてぱっと表示され、クローズすると消えます。が、「必要に応じて表示したり消したりできる」というインターフェイスとしては、もっと別のものが使われます。それが「折りたたみ表示（Collapse）」というものです。これは、以下のような形で作成されます。
<div class="collapse">
    ……表示内容……
</div>

このように、class="colapse"を指定した<div>タグを用意しておくと、折りたたみ表示できるタグとして扱えるようになります。このタグの表示を折りたたんだり展開したりするには、そのための<a>タグを用意しておきます。
<a data-toggle="collapse" href="折りたたむ項目の指定">……</a>

hrefには、class="collapse"を指定したタグをIDなどで指定しておきます。これで、リンクをクリックする度に、折りたたみ表示のタグが表示されたり非表示になったりします。

下に利用例を挙げておきましょう。ボタンをクリックすると、メッセージが表示したり消えたりします。簡単に折りたたみ表示を作成できるコンポーネントとして覚えておきたいですね！

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

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>
    
    <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 >Collapse</h2>
        </div>
        
        <div>
            <a role="button" class="btn btn-default" data-toggle="collapse" 
                href="#panel">Show Collapse</a>
        </div>
        <div>　</div>
        <div id="panel" class="collapse">
            <div class="panel panel-default">
                <div class="panel-body">
                    表示するパネルです。
                </div>
            </div>
        </div>
            
    </div>
</div>
    
</div>

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

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