Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8669

【Rails】kaminari + Bootstrapで見た目を整え、ページネーションを中央にする

$
0
0

kaminariとは

  • ページネーションを簡単に実装できるrailsのgemです

GitHub/kaminari

導入方法

gemfile
gem'kaminari'

gemを追加し

terminal
$bundle install

インストール

導入はこれで完了

表示されたページネーションを中央に

やり方非常に簡単です

まずはテンプレートファイルを作成

terminal
$rails g kaminari:views default

もしもBootstrapを導入しているなら

terminarl
$rails g kaminari:views bootstrap

defaultではなくbootstrapを選択する事で勝手に綺麗に整えてくれます

  • Bootstrap4を導入しているならbootstrap4にしてください

作成されたファイルをみてみると

views/kaminari/_pagenator.html.erb
<%=paginator.renderdo%><nav><ulclass="pagination"><%=first_page_tagunlesscurrent_page.first?%><%=prev_page_tagunlesscurrent_page.first?%><%each_pagedo|page|%><%ifpage.left_outer?||page.right_outer?||page.inside_window?%><%=page_tagpage%><%elsif!page.was_truncated?-%><%=gap_tag%><%end%><%end%><%=next_page_tagunlesscurrent_page.last?%><%=last_page_tagunlesscurrent_page.last?%></ul></nav><%end%>

ulclass="pagination"が当てられているので

application.scss
.pagination{justify-content:center;}

これでページネーションが中央に表示されました!


Viewing all articles
Browse latest Browse all 8669

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>