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