ナビゲーションのコンポーネント (2/5)
作成:2017-03-11 08:25
更新:2017-03-11 08:25
更新:2017-03-11 08:25
■パンくずリスト（Breadcrumbs）
階層化されているページの移動には、俗に「パンくずリスト」と呼ばれるものが多用されます。改装を進むに連れてリンクが追加されていくタイプのナビゲーションインターフェイスですね。
これもBootstrapで作成することができます。パンくずリストは単に<a>タグによるリンクを並べただけのものですが、それに独自のクラスを設定することで見やすくまとめることができます。
パンくずリストは、<ul>あるいは<ol>によるリストとして作成します。<ul>または<ol>タグに、class="breadcrumb"というようにクラスを指定します。各リンクは、<li>タグ内に用意します。これで、パンくずリストとしてリンクが表示されます。
リンクを区切るセパレータなどはデフォルトで設定されており、変更などのオプションは用意されていません。また背景などのスタイルも特に専用のものはありません。この種のナビゲーション関係のコンポーネントの中ではもっともシンプルなものといってよいでしょう。
では、これも利用例を挙げておきましょう。ここでは「One」「Two」「Three」という３つのリンクと、現在の表示を示す「Four」の４項目からなるパンくずリストを作成しています。
これもBootstrapで作成することができます。パンくずリストは単に<a>タグによるリンクを並べただけのものですが、それに独自のクラスを設定することで見やすくまとめることができます。
<ul class="breadcrumb">
<li><a href="#">リンク</a></li>
……略……
</ul>
パンくずリストは、<ul>あるいは<ol>によるリストとして作成します。<ul>または<ol>タグに、class="breadcrumb"というようにクラスを指定します。各リンクは、<li>タグ内に用意します。これで、パンくずリストとしてリンクが表示されます。
リンクを区切るセパレータなどはデフォルトで設定されており、変更などのオプションは用意されていません。また背景などのスタイルも特に専用のものはありません。この種のナビゲーション関係のコンポーネントの中ではもっともシンプルなものといってよいでしょう。
では、これも利用例を挙げておきましょう。ここでは「One」「Two」「Three」という３つのリンクと、現在の表示を示す「Four」の４項目からなるパンくずリストを作成しています。
(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 >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>
※関連コンテンツ