twitter-bootstrap 带有 kaminari 和 bootstrap 的自定义 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13320851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Custom css with kaminari with bootstrap
提问by duykhoa
I try to use paginate with kaminari. My project used bootsrap css, and the result is so ugly:)
我尝试将分页与 kaminari 一起使用。我的项目用的是bootsrap css，结果太丑了：）
The html is generated by nokogiri
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&page=3">3</a>
</span>
<span class="page">
<a href="/admin/book_borrow/borrow?locale=en&page=4">4</a>
</span>
<span class="next">
<a rel="next" href="/admin/book_borrow/borrow?locale=en&page=3">Next ?</a>
</span>
<span class="last">
<a href="/admin/book_borrow/borrow?locale=en&page=4">Last ?</a>
</span>
</nav>
I want something like pagination in bootstrap page, how I can do? Please help!
我想要在引导页面中进行分页之类的东西，我该怎么做？请帮忙！
回答by duykhoa
After I posted this question I found the solution: kaminari: A Scope & Engine based, clean, powerful, customizable and sophisticated paginator for Rails 3.
在我发布这个问题后，我找到了解决方案： kaminari: A Scope & Engine based, clean, strong,customize and complex paginator for Rails 3。
Just go to the console and type:
只需转到控制台并键入：
rails generate kaminari:views bootstrap
It will download some Haml files to your application, and the views are changed.
它将下载一些 Haml 文件到您的应用程序，并更改视图。
Here are some themes for Kaminari views: https://github.com/amatsuda/kaminari_themes
以下是 Kaminari 视图的一些主题：https: //github.com/amatsuda/kaminari_themes
回答by Rohit Siddha
simply add following css to your application.css
只需将以下 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;
}
}
回答by Ameet Wadhwani
Nearly gave up until I found "Pagination with Kaminari".
几乎放弃，直到我找到“与 Kaminari 分页”。
In short, after rails g kaminari:defaultgo into the views that are created under app/views/kaminari and change the tags to suit your styling.
简而言之，rails g kaminari:default进入在 app/views/kaminari 下创建的视图并更改标签以适合您的样式。
I went into _paginator.html.erband changed the <nav>to a <div>and replaced all the <span>tags with <li>.
我进入_paginator.html.erb并将 a 更改<nav>为 a<div>并将所有<span>标签替换为<li>.
To get the bootstrap styling that fits my app, I changed the <div>tag in _paginator.html.erbto <div class="pagination pull-right">and the <span class="page">tags to simple <li>.
为了得到适合我的应用程序引导的造型，我改变了<div>在标签_paginator.html.erb到<div class="pagination pull-right">和<span class="page">标签简单<li>。
There's are a couple of gotcha's that perhaps someone else can help with:
有几个问题也许其他人可以提供帮助：
There's erb in
_page.html.erbthat changes the class for the current page when active. It messes up the alignment so to get around that, change the<%= link_to_unless page.current? ... %>to<%= link_to page ... %>.The
_gap.html.erbview which inserts the "..." block also gets messed up. Replace it with<li><%= link_to '...' %></li>to get it to sit nicely inline.
有 erb 可以在活动时
_page.html.erb更改当前页面的类。它弄乱对齐所以要解决这个问题，改<%= link_to_unless page.current? ... %>到<%= link_to page ... %>。_gap.html.erb插入“...”块的视图也变得混乱。将其替换<li><%= link_to '...' %></li>为使其很好地内联。
I just started coding 8 weeks ago so for sure there are better ways to approach this and ways to clean up 1 and 2, but if you just want things to look right and function as intended, give that a shot and fine tune later.
我 8 周前才开始编码，所以肯定有更好的方法来解决这个问题以及清理 1 和 2 的方法，但如果你只是想让事情看起来正确并按预期运行，请稍后再试一试并进行微调。
回答by Jeremy Lynch
rails generate kaminari:views bootstrap4
Available themes:bootstrap2, bootstrap3, bootstrap4, bourbon, bulma, foundation, foundation5, github, google, materialize, purecss, semantic_ui
可用主题：bootstrap2、bootstrap3、bootstrap4、bourbon、bulma、foundation、foundation5、github、google、materialize、purecss、semantic_ui
