ページネーション の導入
ページネーション（pagination）とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。
BootStrap CDN ver3.3.6
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>ページネーションの実装</title> <style> html,body,h1,p,ul,li { margin:0; padding:0; } ul { list-style:none; } img { vertical-align:bottom; } .container { width:500px!important; margin:100px auto 0; } .list-group { } .list-group-item { overflow:hidden; margin-bottom:40px; } .list-group-item img { float:left; margin-right:40px; } .list-group-item p { line-height:2; } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="js/paginathing.js"></script> <script> jQuery(document).ready(function($){ $('.list-group').paginathing({ perPage: 4, containerClass: 'panel-footer' }) }); </script> </head> <body> <div class="container"> <ul class="list-group"> <li class="list-group-item"> <p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p> </li> <li class="list-group-item"> <p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p> </li> <li class="list-group-item"> <p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p> </li> <li class="list-group-item"> <p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p> </li> <li class="list-group-item"> <p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p> </li> <li class="list-group-item"> <p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p> </li> <li class="list-group-item"> <p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p> </li> <li class="list-group-item"> <p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p> </li> <li class="list-group-item"> <p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p> </li> <li class="list-group-item"> <p><img src="https://placehold.jp/3d4070/ffffff/200x200.png" alt="">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい</p> </li> </ul> </div> </body> </html>
