Css personnalisé avec kaminari avec bootstrap
J'essaie d'utiliser paginate avec kaminari. Mon projet a utilisé bootsrap css, et le résultat est si laid:)
Le code html est généré par 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>
Je veux quelque chose comme la pagination dans la page bootstrap, comment je peux faire? S'il vous plaît aider!
4 réponses
Après avoir posté cette question, j'ai trouvé la solution: kaminari: un paginateur à base de Scope & Engine, propre, puissant, personnalisable et sophistiqué pour Rails 3 .
Il suffit d'aller à la console et tapez:
rails generate kaminari:views bootstrap
Il va télécharger des fichiers Haml à votre application, et les vues sont modifiées.
Voici quelques thèmes pour les vues Kaminari: https://github.com/amatsuda/kaminari_themes
Ajoutez simplement le css suivant à votre 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;
}
}
Presque abandonné jusqu'à ce que je trouve " Pagination avec Kaminari ".
En bref, après {[0] } allez dans les vues créées sous app / views / kaminari et modifiez les balises en fonction de votre style.
Je suis entré dans _paginator.html.erb et j'ai changé le <nav> en <div> et remplacé toutes les balises <span> par <li>.
Pour obtenir le bootstrap style qui convient à mon application, j'ai changé le <div> balise _paginator.html.erb à <div class="pagination pull-right"> et le <span class="page"> balises simples <li>.
Il y en a un couple de gotcha que peut-être quelqu'un d'autre peut aider avec:
Il y a erb dans
_page.html.erbqui change la classe de la page en cours lorsqu'elle est active. Il gâche l'alignement afin de contourner cela, changez le<%= link_to_unless page.current? ... %>en<%= link_to page ... %>.La vue
_gap.html.erbqui insère le "..."bloquer aussi se foiré. Remplacez-le par<li><%= link_to '...' %></li>pour le faire asseoir bien en ligne.
Je viens de commencer à coder il y a 8 semaines, donc il y a de meilleures façons d'aborder cela et les moyens de nettoyer 1 et 2, mais si vous voulez juste que les choses semblent bien et fonctionnent comme prévu, donner un coup de feu et affiner plus tard.
rails generate kaminari:views bootstrap4
Thèmes Disponibles: bootstrap2, bootstrap3, bootstrap4, de bourbon, de bulma, fondation, foundation5, github, google, matérialiser, purecss, semantic_ui