back
アラート・ダイアログ・折りたたみ表示 (5/5)
■折りたたみ表示
アラートは、必要に応じてぱっと表示され、クローズすると消えます。が、「必要に応じて表示したり消したりできる」というインターフェイスとしては、もっと別のものが使われます。それが「折りたたみ表示（Collapse）」というものです。これは、以下のような形で作成されます。
このように、class="colapse"を指定した<div>タグを用意しておくと、折りたたみ表示できるタグとして扱えるようになります。このタグの表示を折りたたんだり展開したりするには、そのための<a>タグを用意しておきます。
hrefには、class="collapse"を指定したタグをIDなどで指定しておきます。これで、リンクをクリックする度に、折りたたみ表示のタグが表示されたり非表示になったりします。
下に利用例を挙げておきましょう。ボタンをクリックすると、メッセージが表示したり消えたりします。簡単に折りたたみ表示を作成できるコンポーネントとして覚えておきたいですね！
<div class="collapse">
……表示内容……
</div>
このように、class="colapse"を指定した<div>タグを用意しておくと、折りたたみ表示できるタグとして扱えるようになります。このタグの表示を折りたたんだり展開したりするには、そのための<a>タグを用意しておきます。
<a data-toggle="collapse" href="折りたたむ項目の指定">……</a>
hrefには、class="collapse"を指定したタグをIDなどで指定しておきます。これで、リンクをクリックする度に、折りたたみ表示のタグが表示されたり非表示になったりします。
下に利用例を挙げておきましょう。ボタンをクリックすると、メッセージが表示したり消えたりします。簡単に折りたたみ表示を作成できるコンポーネントとして覚えておきたいですね！
(by. SYODA-Tuyano.)
※リストが表示されない場合
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>
| << 前へ |