PC | mobile ver.20170108.

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

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

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

作成:2017-03-11 08:25
更新:2017-03-11 08:25
■パンくずリスト(Breadcrumbs)
階層化されているページの移動には、俗に「パンくずリスト」と呼ばれるものが多用されます。改装を進むに連れてリンクが追加されていくタイプのナビゲーションインターフェイスですね。

これもBootstrapで作成することができます。パンくずリストは単に<a>タグによるリンクを並べただけのものですが、それに独自のクラスを設定することで見やすくまとめることができます。
<ul class="breadcrumb">
    <li><a href="#">リンク</a></li>
    ……略……
</ul>

パンくずリストは、<ul>あるいは<ol>によるリストとして作成します。<ul>または<ol>タグに、class="breadcrumb"というようにクラスを指定します。各リンクは、<li>タグ内に用意します。これで、パンくずリストとしてリンクが表示されます。

リンクを区切るセパレータなどはデフォルトで設定されており、変更などのオプションは用意されていません。また背景などのスタイルも特に専用のものはありません。この種のナビゲーション関係のコンポーネントの中ではもっともシンプルなものといってよいでしょう。

では、これも利用例を挙げておきましょう。ここでは「One」「Two」「Three」という3つのリンクと、現在の表示を示す「Four」の4項目からなるパンくずリストを作成しています。



 

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

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 >Breadcrumbs</h2>
        </div>
        
        <ol class="breadcrumb">
            <li ><a href="#">One</a></li>
            <li ><a href="#">Two</a></li>
            <li ><a href="#">Three</a></li>
            <li>Four</li>
        </ol>

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

</body>
</html>



   


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



※その他のコンテンツ