libro
www.tuyano.com
初心者のためのBootstrap入門

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

作成:2017-03-11 08:26
更新:2017-03-11 08:26

■ページネーション（Nagination）

複数のページを順に表示していくとき、ページ番号を並べたリンクなどを用意しておくことが多いでしょう。これが「ページネーション」です。

ページネーションも、基本的には<a>タグを並べただけのものです。これもクラスを設定するだけでデザインを適用します。基本的な形は以下のようになるでしょう。
<ul class="pagination">
    <li><a href="#">番号</a></li>
    ……略……
>/ul>

ページネーションも、<ul>あるいは<ol>タグをベースにして作成します。これにclass="pagination"という形でクラスを設定しておきます。表示するリンクは、<li>タグ内に<a>タグで用意します。これで複数のリンクを横一列に並べた、ページ表示のリンクが作成できます。

実際のページネーションでは、この他に「使われないリンク」や「現在表示しているページ」なおを表すのに以下のようなクラスも併用されます。

disabled――使用不可の状態を示します。例えば１ページめを表示しているときは、それより前のページに移動するPrevリンクなどはdisableになるでしょう。
artive――これは、現在開いているページを示すものです。

これらを利用したサンプルを下に掲載しておきます。ここでは１ページ目を表示している状態で作ってあります。ページ番号の「１」がactiveになり、それより前に戻るリンクはdisabledにしてあります。

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

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>
※関連コンテンツ

「初心者のためのBootstrap入門」に戻る