自定义css与kaminari与bootstrap

Question

我尝试使用kaminari的paginate.我的项目使用了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>

我想在bootstrap页面中加入像分页一样的东西,我该怎么办？请帮忙!

Answer 1

在我发布这个问题之后,我找到了解决方案: kaminari:基于范围和引擎的,清晰,强大,可定制和复杂的Rails 3分页器.

只需转到控制台并输入:

rails generate kaminari:views bootstrap

它会将一些Haml文件下载到您的应用程序中,并更改视图.

以下是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">标签简单<li>.

还有一些可能是其他人可以提供帮助的问题:

1. 有效的是_page.html.erb,当活动时更改当前页面的类.它弄乱了对齐,以便绕过它,改变<%= link_to_unless page.current? ... %>为<%= link_to page ... %>.

2. _gap.html.erb插入"..."块的视图也搞砸了.更换它以<li><%= link_to '...' %></li>使其内嵌得很好.

我刚刚开始编码8周前,所以肯定有更好的方法来解决这个问题以及清理1和2的方法,但是如果你只是希望事情看起来正确并按预期运行,那么请稍后给出一个镜头和微调.