web-dev-qa-db-ja.com

bootstrapを使用したkaminariを使用したカスタムcss

私はカミナリでパジネートを使用しようとします。私のプロジェクトはbootsrap cssを使用しましたが、結果はとても醜いです:) enter image description here

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 ›</a>
</span>

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

  </nav>

bootstrapページにページネーションのようなものが欲しいのですが、どうすればいいですか？助けてください！

ruby-on-railsrubytwitter-bootstrapnokogiri
26
duykhoa

この質問を投稿した後、私は解決策を見つけました： kaminari：スコープ＆エンジンベースの、クリーンでパワフル、カスタマイズ可能な、洗練されたページネーションRails 。

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

Rails generate kaminari:views bootstrap

アプリケーションにいくつかのHamlファイルをダウンロードし、ビューが変更されます。

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

70
duykhoa

次の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;
    }
}
16
Rohit Siddha

「 カミナリとのページネーション 」が見つかるまでほぼ諦めました。

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

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

アプリに合うbootstrapスタイリングを取得するために、<div>の_paginator.html.erbタグを<div class="pagination pull-right">に変更し、<span class="page">タグをシンプルに変更しました<li>。

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

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

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

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

6
Ameet Wadhwani
Rails generate kaminari:views bootstrap4

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

2
Jeremy Lynch