带有 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 ›</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, powerful, customizable and sophisticated paginator for 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

在找到“Pagination with Kaminari”之前几乎放弃了。

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

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

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