学習75日目

テーマ

ページネーションをbootstrapで良い感じに整える

前提

• ruby on railsで開発
• gem 'kaminari' 導入済
• bootstrap 導入済
• 該当部分以外の記述は省略

内容

1. gem 'bootstrap5-kaminari-views' の導入
   Gemfile

gem 'bootstrap5-kaminari-views'

terminal

bundle install

1. pagination部分へ「theme: 'bootstrap-5'」を追記
   app/views/hoges/index.html.erb
(before)

   <%= paginate @hoges %>
   

   (after)

   <%= paginate @hoges, theme: 'bootstrap-5' %>
   

2. (おまけ)ja.ymlの編集
   config/locals/ja.yml

     views:
         pagination:
             first: <i class="fas fa-angle-double-left"></i>
             last: <i class="fas fa-angle-double-right"></i>
             previous: <i class="fas fa-angle-left"></i>
             next: <i class="fas fa-angle-right"></i>
             truncate: "..."
   

コメント

bootstrapの活用により、最初よりはるかに見やすいアプリになった。
google mapと画像プレビューの部分のCSSも工夫したい。