back
ナビゲーションのコンポーネント (3/5)
■ページネーション（Nagination）
複数のページを順に表示していくとき、ページ番号を並べたリンクなどを用意しておくことが多いでしょう。これが「ページネーション」です。
ページネーションも、基本的には<a>タグを並べただけのものです。これもクラスを設定するだけでデザインを適用します。基本的な形は以下のようになるでしょう。
ページネーションも、<ul>あるいは<ol>タグをベースにして作成します。これにclass="pagination"という形でクラスを設定しておきます。表示するリンクは、<li>タグ内に<a>タグで用意します。これで複数のリンクを横一列に並べた、ページ表示のリンクが作成できます。
実際のページネーションでは、この他に「使われないリンク」や「現在表示しているページ」なおを表すのに以下のようなクラスも併用されます。
disabled――使用不可の状態を示します。例えば１ページめを表示しているときは、それより前のページに移動するPrevリンクなどはdisableになるでしょう。
artive――これは、現在開いているページを示すものです。
これらを利用したサンプルを下に掲載しておきます。ここでは１ページ目を表示している状態で作ってあります。ページ番号の「１」がactiveになり、それより前に戻るリンクはdisabledにしてあります。
ページネーションも、基本的には<a>タグを並べただけのものです。これもクラスを設定するだけでデザインを適用します。基本的な形は以下のようになるでしょう。
<ul class="pagination">
<li><a href="#">番号</a></li>
……略……
>/ul>
ページネーションも、<ul>あるいは<ol>タグをベースにして作成します。これにclass="pagination"という形でクラスを設定しておきます。表示するリンクは、<li>タグ内に<a>タグで用意します。これで複数のリンクを横一列に並べた、ページ表示のリンクが作成できます。
実際のページネーションでは、この他に「使われないリンク」や「現在表示しているページ」なおを表すのに以下のようなクラスも併用されます。
disabled――使用不可の状態を示します。例えば１ページめを表示しているときは、それより前のページに移動するPrevリンクなどはdisableになるでしょう。
artive――これは、現在開いているページを示すものです。
これらを利用したサンプルを下に掲載しておきます。ここでは１ページ目を表示している状態で作ってあります。ページ番号の「１」がactiveになり、それより前に戻るリンクはdisabledにしてあります。
(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 >Pagenation</h2>
</div>
<h3>Page 1</h3>
<p>これは１ページめのコンテンツです。</p>
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous">
<span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1</a></li>
<li ><a href="#">2</a></li>
<li ><a href="#">3</a></li>
<li><a href="#" aria-label="Next">
<span aria-hidden="true">»</span></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
| << 前へ | 次へ >> |