PC | mobile ver.20170108.

 libro ~入門ドキュメント・サイト~

ビギナーのためのBootstrap入門:

ナビゲーションのコンポーネント (1/5)

作成: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">項目</li>
    ……略……
</ul>

リスト全体である<ul>にはclass="list-group"を指定し、そこに表示される項目である<li>にはclass="list-group-item"を指定します。この2つのクラスの指定さえきちんとしていれば、リストグループは表示できます。

実は、クラスさえ指定すれば、<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――危険な操作に関するものです。淡いレッド。

では、簡単な利用例を下に挙げておきましょう。ここでは2つのリストグループを表示してあります。<li>によるものと、<div>内に<a>タグを用意したものです。いろいろとスタイルを指定してありますので、どのように項目の表示が変化するか確認してみましょう。



 

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

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>



 


「ビギナーのためのBootstrap入門」に戻る



※その他のコンテンツ