Пользовательский css с kaminari с бутстрапом

Я пытаюсь использовать paginate с 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>

Я хочу что-то вроде разбиения на страницы на странице начальной загрузки, как я могу это сделать? Пожалуйста, помогите!

Ответы

Ответ 1

После того, как я опубликовал этот вопрос, я нашел решение: kaminari: Scope и Engine, чистый, мощный, настраиваемый и сложный paginator для Rails 3.

Просто зайдите в консоль и введите:

rails generate kaminari:views bootstrap

Он загрузит некоторые файлы Haml в ваше приложение, а виды будут изменены.

Вот несколько тем для просмотров Kaminari: https://github.com/amatsuda/kaminari_themes

Ответ 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;
    }
}

Ответ 3

Почти сдался, пока не нашел "" Разбиение страницы с Каминари".

Короче говоря, после rails g kaminari:default перейдите в представления, созданные в приложении /views/kaminari, и измените теги в соответствии с вашим стилем.

Я вошел в _paginator.html.erb и изменил <nav> на <div> и заменил все теги <span> на <li>.

Чтобы получить стиль загрузки, подходящий для моего приложения, я изменил тег <div> в _paginator.html.erb на <div class="pagination pull-right"> и теги <span class="page"> на простой <li>.

Есть несколько вопросов, которые могут помочь кому-то другому:

  • Там erb в _page.html.erb, который изменяет класс для текущей страницы при активном. Это нарушает выравнивание, поэтому, чтобы обойти это, измените значение <%= link_to_unless page.current? ... %> на <%= link_to page ... %>.

  • Представление _gap.html.erb, в которое вставляется блок "...", также запутывается. Замените его <li><%= link_to '...' %></li>, чтобы заставить его сидеть красиво встроенным.

Я только начал кодировать 8 недель назад, так что наверняка есть лучшие способы приблизиться к этому и способы очистки 1 и 2, но если вы просто хотите, чтобы все выглядело правильно и функционировало по назначению, дайте ему выстрел и тонкую мелодию позже.