ruby-on-rails - 带有 kaminari 和 bootstrap 的自定义 css

Question

我尝试将分页与 kaminari 一起使用。我的项目使用了bootsrap css，结果太丑了：）

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: A Scope & Engine based, clean,强大，可定制和复杂的 Rails 3 分页器。

只需转到控制台并键入：

rails generate kaminari:views bootstrap4

它会将一些 Haml 文件下载到您的应用程序中，并更改视图。它还支持引导程序 2 和 3，例如

rails generate kaminari:views bootstrap3

以下是 Kaminari 观点的一些主题：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

几乎放弃了，直到我找到了“与 Kaminari 一起分页”。

简而言之，在rails g kaminari:default进入 app/views/kaminari 下创建的视图并更改标签以适合您的样式之后。

我进入_paginator.html.erb并将 更改<nav>为 a<div>并将所有<span>标签替换为<li>.

为了获得适合我的应用程序的引导样式，我将<div>标签更改_paginator.html.erb为<div class="pagination pull-right">并将标签更改<span class="page">为 simple <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 的方法，但如果你只是想让事情看起来正确并按预期运行，请稍后再试一试并进行微调。