logo标签列表

使用Kaminari和Bootstrap的定制CSS

ruby-on-railsrubytwitter-bootstrapnokogiri
29

我尝试使用kaminari进行分页。 我的项目使用了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页面中实现分页，应该怎么做？请帮忙！

4个回答
72

我发布这个问题后，我找到了解决方案：kaminari：基于Scope&Engine的，干净、强大、可定制和复杂的Rails 3分页器。

只需进入控制台并键入：

rails generate kaminari:views bootstrap4
它将下载一些 Haml 文件到您的应用程序中，视图会发生更改。它还支持 Bootstrap 2 和 3，例如：

它会下载一些 Haml 文件到您的应用程序中，视图将被更改。它还支持 Bootstrap 2 和 3，例如： 
rails generate kaminari:views bootstrap3

这里是Kaminari视图的一些主题：https://github.com/amatsuda/kaminari_themes

嗨，谢谢！希望我的答案能帮助你节省一点时间 :) - duykhoa
1
rails generate kaminari:views bootstrap4 - Jeremy Lynch
26

只需将以下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;
    }
}
这是非常好的建议。我还添加了一行CSS代码：a:hover { background-color: lightgreen; }这将在分页链接上添加悬停效果。此代码已测试通过Rails 5.1和Bootstrap 3。 - fuzzygroup
如何更改突出显示的页码的字体颜色/背景？ - Sagar Pandya
7
rails generate kaminari:views bootstrap4

可用的主题：bootstrap2、bootstrap3、bootstrap4、bourbon、bulma、foundation、foundation5、github、google、materialize、purecss、semantic_ui

6
直到我找到了“使用Kaminari进行分页”，我差点放弃了。
简而言之，在运行“rails g kaminari：default”之后，进入在app/views/kaminari下创建的视图，更改标记以适应您的样式。
我进入_paginator.html.erb并将
1
嗨，不错的尝试！但是有更简单的方法。您可以使用Bootstrap主题来为Kaminari设置，这是自动的。 - duykhoa
3
嗨Duykhoa - 谢谢评论。希望这个回应对那些想自定义主题的人仍然有帮助。 - Ameet Wadhwani
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接