LoginSignup
9
6

More than 5 years have passed since last update.

Rails kaminariを使用したページネーションにBootstrapデザインを適用させる

Last updated at Posted at 2017-07-12

前提環境

  • RoRプロジェクト
  • プロジェクトにBootstrapの環境が整っている
  • プロジェクトにkaminariでページネーションが生成できる環境が整っている

kaminariを用いたページネーションのソースはとてもシンプル

<%= paginate @pagination %>

このどこにBootstrapを適用させる余地があるんだ...と頭を2秒ほど抱えた。

kaminariにBootstrapを適用させる

Bootstrap用のViewテンプレートをジェネレートする

rails g kaminari:views bootstrap3
Running via Spring preloader in process 68165
      downloading app/views/kaminari/_first_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_first_page.html.erb
      downloading app/views/kaminari/_gap.html.erb from kaminari_themes...
      create  app/views/kaminari/_gap.html.erb
      downloading app/views/kaminari/_last_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_last_page.html.erb
      downloading app/views/kaminari/_next_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_next_page.html.erb
      downloading app/views/kaminari/_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_page.html.erb
      downloading app/views/kaminari/_paginator.html.erb from kaminari_themes...
      create  app/views/kaminari/_paginator.html.erb
      downloading app/views/kaminari/_prev_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_prev_page.html.erb

テンプレートが作成される。

スクリーンショット 2017-07-12 16.16.47.png

これだけ

スクリーンショット 2017-07-12 16.18.24.png

一瞬で適用できた。

懸念点

逆にこのページだけBootstrapのデザイン使いたくないとなった時の対処方法が今の所わからない...

#参考サイト
http://morizyun.github.io/blog/kaminari-gem-paginator-rails/

9
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
6