Home » bootstrap » will_paginateをbootstrapでデザイン rails5

will_paginateをbootstrapでデザイン rails5

環境 
Ruby2.3.3
Ruby on Rails5.1.4
OSwindows10

will_paginateはページネーションを

Railsプロジェクトに付加してくれるgemです。

 

デザインがない通常の状態では下のようになっています。

bootstrapのデザインを用いた場合は

綺麗で見やすいデザインになります。

今回will_paginateを
bootstrap-will_paginateを使ってbootstrap化
していこうとおもいます。

bootstrap-will_paginate導入

bootstrap-will_paginate使うには、
bootstrap3もしくはbootstrap4のgemを入れておく必要があります。
今回は、
bootstrap4を使用してbootstrap-will_paginateを使っていきます。

 

boostrap4が導入されている段階から進めていきます。

Gemfileにgemを追加します。

gem 'bootstrap-will_paginate', '~> 1.0'

bundleでRailsプロジェクトにインストールしていきます。

bundle install

will_paginateをbootstrap化させていきます。
通常の場合は下記の記述になっています。

<%= will_paginate @posts %>

boostrap4を使用しているユーザーは、
will_paginateをbootstrapデザインにする場合は下記のようにします。

<%= will_paginate(@posts, :renderer => WillPaginate::ActionView::Bootstrap4LinkRenderer) %>

他にもページネーションに関するgemは多くありますが、

自身の好みで選んで使っていくといいとおもいます。

参考文献

, , ,

コメントを残す

%d人のブロガーが「いいね」をつけました。