ruby-on-rails - ブートストラップ付きカミナリ付きカスタムCSS

Question

カミナリと一緒にパギネートを使ってみます。私のプロジェクトはbootsrapcssを使用しましたが、結果はとても醜いです:)

htmlはnokogiriによって生成されます

<nav class="pagination">
    <span class="first">
  <a href="/admin/book_borrow/borrow?locale=en">« First</a>
</span>

    <span class="prev">
  <a rel="prev" href="/admin/book_borrow/borrow?locale=en">‹ Prev</a>
</span>

        <span class="page">
  <a rel="prev" href="/admin/book_borrow/borrow?locale=en">1</a>
</span>

        <span class="page current">
  2
</span>

        <span class="page">
  <a rel="next" href="/admin/book_borrow/borrow?locale=en&amp;page=3">3</a>
</span>

        <span class="page">
  <a href="/admin/book_borrow/borrow?locale=en&amp;page=4">4</a>
</span>

    <span class="next">
  <a rel="next" href="/admin/book_borrow/borrow?locale=en&amp;page=3">Next ›&lt;/a>
</span>

    <span class="last">
  <a href="/admin/book_borrow/borrow?locale=en&amp;page=4">Last »</a>
</span>

  </nav>

ブートストラップページのページ付けのようなものが欲しいのですが、どうすればよいですか？助けてください！

Answer 1

この質問を投稿した後、私は解決策を見つけました： kaminari：Rails 3用のスコープとエンジンベースの、クリーンで、強力で、カスタマイズ可能で、洗練されたページネーター。

コンソールに移動して、次のように入力します。

rails generate kaminari:views bootstrap4

いくつかのHamlファイルがアプリケーションにダウンロードされ、ビューが変更されます。また、ブートストラップ2および3もサポートします。

rails generate kaminari:views bootstrap3

カミナリビューのテーマは次のとおりです：https ：//github.com/amatsuda/kaminari_themes

Answer 2

次の css を application.css に追加するだけです。

.pagination a, .pagination span.current, .pagination span.gap {
    float: left;
    padding: 0 14px;
    line-height: 38px;
    text-decoration: none;
    background-color: white;
    border: 1px solid #DDD;
    border-left-width: 0;
}

.pagination {
    border-left: 1px solid #ddd;
    .first{
        padding : 0;
        float: none;
        border: none;
    }
    .prev {
        padding : 0;
        float: none;
        border: none;
    }
    .page{
        padding : 0;
        float: none;
        border: none;
    }
    .next{
        padding : 0;
        float: none;
        border: none;
    }
    .last{
        padding : 0;
        float: none;
        border: none;
    }
}

Answer 3

rails generate kaminari:views bootstrap4

利用可能なテーマ: bootstrap2、bootstrap3、bootstrap4、bourbon、bulma、foundation、foundation5、github、google、materialize、purecss、semantic_ui

Answer 4

「カミナリによるページネーション」を見つけるまで、ほとんど諦めていました。

つまり、rails g kaminari:defaultapp/views/kaminari の下に作成されたビューに移動し、スタイルに合わせてタグを変更します。

私は入ってを a_paginator.html.erbに変更し、すべてのタグをに置き換えました。<nav><div><span><li>

私のアプリに合ったブートストラップ スタイルを取得するために、タグを に変更し<div>、_paginator.html.erbタグ<div class="pagination pull-right">を<span class="page">simpleに変更しました<li>。

おそらく他の誰かが助けることができる落とし穴がいくつかあります：

1. _page.html.erbアクティブなときに現在のページのクラスを変更するerb があります。それは配置を台無しにするので、それを回避するには、 を に変更<%= link_to_unless page.current? ... %>し<%= link_to page ... %>ます。

2. 「_gap.html.erb…」ブロックを挿入するビューもめちゃくちゃになります。<li><%= link_to '...' %></li>適切にインラインに配置するには、 に置き換えます。

私は 8 週間前にコーディングを開始したばかりなので、これにアプローチするより良い方法と 1 と 2 をクリーンアップする方法があることは確かですが、物事を正しく表示し、意図したとおりに機能させたい場合は、後で試して微調整してください。