ナビゲーションのコンポーネント (1/5)
作成:2017-03-11 08:23
更新:2017-03-11 08:23
更新:2017-03-11 08:23
■リストグループ（List Group）
前回、ボタングループやツールバーなどのGUIコンポーネントについて説明をしました。が、BootstrapにはまだまだGUIコンポーネントが用意されています。今回は、それらの中から、多数のページを整理し移動する、「サイトのナビゲーションに関するもの」について説明していくことにしましょう。
まずは「リストグループ」についてです。リストグループというのは、「項目をグループ化して見やすくまとめたリスト」です。まぁ、普通のリストと同じようなものを想像すればいいでしょう。
iPhoneやAndroidのアプリなどでは、リストはページを移動するためのインターフェイスとして利用されています。リストグループも、ただ「何かのリストを表示する」というより、そこから選択した表示に移動するためのインターフェイスとして使うことが多いでしょう。
このリストグループは、以下のような形で作成されます。
リスト全体である<ul>にはclass="list-group"を指定し、そこに表示される項目である<li>にはclass="list-group-item"を指定します。この２つのクラスの指定さえきちんとしていれば、リストグループは表示できます。
実は、クラスさえ指定すれば、<ul>タグである必要もありません。ここではわかりやすくリストとしての例を挙げておきましたが、別に他のタグを使ってもまったく問題ないのです。
例えば、このようにすれば、<a>タグがリストの項目になったリストグループが作成されます。
この他、表示に関するクラスもいくつか用意されています。以下に簡単にまとめておきましょう。
active――その項目が選択された状態にします。
disabled――その項目を選択できない状態にします。
list-group-item-success――何かの処理に成功したときの表示です。淡いグリーン。
list-group-item-info――情報表示のためのものです。淡いブルー。
list-group-item-warning――警告表示のものです。淡いイエロー。
list-group-item-danger――危険な操作に関するものです。淡いレッド。
では、簡単な利用例を下に挙げておきましょう。ここでは２つのリストグループを表示してあります。<li>によるものと、<div>内に<a>タグを用意したものです。いろいろとスタイルを指定してありますので、どのように項目の表示が変化するか確認してみましょう。
まずは「リストグループ」についてです。リストグループというのは、「項目をグループ化して見やすくまとめたリスト」です。まぁ、普通のリストと同じようなものを想像すればいいでしょう。
iPhoneやAndroidのアプリなどでは、リストはページを移動するためのインターフェイスとして利用されています。リストグループも、ただ「何かのリストを表示する」というより、そこから選択した表示に移動するためのインターフェイスとして使うことが多いでしょう。
このリストグループは、以下のような形で作成されます。
<ul class="list-group">
<li class="list-group-item">項目</li>
……略……
</ul>
リスト全体である<ul>にはclass="list-group"を指定し、そこに表示される項目である<li>にはclass="list-group-item"を指定します。この２つのクラスの指定さえきちんとしていれば、リストグループは表示できます。
実は、クラスさえ指定すれば、<ul>タグである必要もありません。ここではわかりやすくリストとしての例を挙げておきましたが、別に他のタグを使ってもまったく問題ないのです。
<div class="list-group">
<a href="#" class="list-group-item">項目</a>
……略……
</div>
例えば、このようにすれば、<a>タグがリストの項目になったリストグループが作成されます。
この他、表示に関するクラスもいくつか用意されています。以下に簡単にまとめておきましょう。
active――その項目が選択された状態にします。
disabled――その項目を選択できない状態にします。
list-group-item-success――何かの処理に成功したときの表示です。淡いグリーン。
list-group-item-info――情報表示のためのものです。淡いブルー。
list-group-item-warning――警告表示のものです。淡いイエロー。
list-group-item-danger――危険な操作に関するものです。淡いレッド。
では、簡単な利用例を下に挙げておきましょう。ここでは２つのリストグループを表示してあります。<li>によるものと、<div>内に<a>タグを用意したものです。いろいろとスタイルを指定してありますので、どのように項目の表示が変化するか確認してみましょう。
(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 >List Group</h2>
</div>
<ul class="list-group">
<li class="list-group-item list-group-item-success"><a href="#">Success</a></li>
<li class="list-group-item list-group-item-info">Info</li>
<li class="list-group-item list-group-item-warning">Warning</li>
<li class="list-group-item list-group-item-danger">Danger</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item">One</a>
<a href="#" class="list-group-item active">two</a>
<a href="#" class="list-group-item disabled">Three</a>
<a href="#" class="list-group-item">Four</a>
</div>
</div>
</div>
</div>
</body>
</html>
※関連コンテンツ