Jump to content
  • 0

Как включить подсветку текущей страницы в пагинации? bootstrap


viz9
 Share

Question

Здравствуйте. Делаю вёрстку через бустрап. Отображаются номера страничек как нужно, но вот подсветка номера страницы в пагинации не работает. Тут сказано http://twitter.githu...html#pagination, что для активной ссылки номера страницы нужно в тэг <li> вписать класс -<li class="active">. Но этот класс никак автоматически не переписывается на другие ссылки номеров страниц. Наверно надо что-то из JS подключить. Вот только что и как? подскажите, кто знает. Пример то простой...

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

Конечно простой)

Вы на чистых html'ках что ли хотите, чтобы переключалось?)

Я прошу помочь найти родное бутстраповское JS решение) Там ведь оно должно быть, я надеюсь. Если не затруднит ткните носом, где это, с коротким пояснением , как подключить. Клиентскую сторону только начал изучать(я про JS). Вообще пишу серверную часть на python/django.

Link to comment
Share on other sites

  • 0

Конечно простой)

Вы на чистых html'ках что ли хотите, чтобы переключалось?)

Я прошу помочь найти родное бутстраповское JS решение) Там ведь оно должно быть, я надеюсь. Если не затруднит ткните носом, где это, с коротким пояснением , как подключить. Клиентскую сторону только начал изучать(я про JS). Вообще пишу серверную часть на python/django.

Как и сказали выше: Конечно нету, ищите как сделать пейджинг на джанго.

Link to comment
Share on other sites

  • 0

Блин, пагинация сделана, всё работает(естественно на django). Снизу есть менюшка из ссылок с номерами страниц как тут http://twitter.githu...html#pagination. Просто при переходе,например, на страницу номер 3, хочется чтобы снизу в меню был подсвечен темным цветом квадратик с цифрой 3(как если бы у него стоял класс class="active"). Щас же все квадратики белые, подсвечиваются только при наведении на них мышкой. Повторю, хочется чтобы подсветка сохранялась, как бы говоря , на какой странице я нахожусь... Вот

Link to comment
Share on other sites

  • 0

Так вам говорят, что бутстрап тут не при чем. Берите в руки питон и пишите под ваш джанго код, который будет ставить нужному элементу класс active.

Что еще не понятно?

  • Like 1
Link to comment
Share on other sites

  • 0

Серверный код такими вещами не должен заниматься. Этим должен заниматься клиентский JS. Я думал, что в bootstrap это всё должно быть по умолчанию. Раз вы все так упирается, наверно нету или тоже не знаете)

Link to comment
Share on other sites

  • 0

Серверный код такими вещами не должен заниматься. Этим должен заниматься клиентский JS. Я думал, что в bootstrap это всё должно быть по умолчанию. Раз вы все так упирается, наверно нету или тоже не знаете)

Спросите тогда более компетентных людей.

А может здесь найдете для себя что то:

http://devblog.the7bits.com/posts/2013-01-20-making-web-service-01/

http://devblog.the7bits.com/posts/2013-02-03-making-web-service-02/

http://devblog.the7bits.com/posts/2013-02-04-making-web-service-03/

http://devblog.the7bits.com/posts/2013-02-07-making-web-service-04/

http://devblog.the7bits.com/posts/2013-02-10-making-web-service-05/

Link to comment
Share on other sites

  • 0
Серверный код такими вещами не должен заниматься. Этим должен заниматься клиентский JS.

Вы шутите?

У вас сервер занимается подсвечиванием квадратиков? =) здорово. И всплывающие менюшки тоже наверно круто-сервер рисует... Закрыли вопрос!

to npofor, за ссылку спасибо. Вроде как интересные статейки.

Link to comment
Share on other sites

  • 0

Честное слово, больше похоже на шутку. Если бы речь шла о переходе по пунктам в пределах отдельной страницы, который осуществляется без обращения к серверу и перезагрузки страницы, то тогда бы было логично "подсвечивать квадратик" с помощью JS. А выделение текущей страницы сайта, имеющее отношение к его структуре - это дело серверного движка и JS тут никаким боком. Строго говоря, квадратик подсвечивается, в конечном счёте, с помощью CSS, клиентского кода, если уж Вас это так беспокоит ;)

Edited by Vin
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Marri.nich
      Всем привет) Самостоятельно обучаюсь верстке. Сейчас изучаю Bootstrap и столкнулась с такой проблемой: 
      <header>         <nav>             <div class="container">                 <ul class="menu">                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                     ...                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                 </ul>             </div>         </nav> </header> Использую в верстке стандартный контейнер из Bootstrap'а. Его стили не трогаю.
      Сейчас корплю над адаптивностью сайта и при изменении размера устройства (в консоли разработчика) на 768px шапка вылезает за пределы экрана.
      Как удалось выяснить header принимает требуемое значение width: 768px, а вот nav упорно занимает 993px и они тянутся от container'а (он согласно стилям Bootstrap'а имеет max-width: 720px, но его margin-left и margin-right почему-то принимают значение 136,50px. 
      Дополнение: тегу nav в стилях задан width: 100%.
      Вопрос:
      1. Правильно ли я понимаю, что cтандартный контейнер из Bootstrap'а должен был в данном примере рассчитаться так: width=max-width=720px, margin-left=margin-right=(768px-720px-12pxpadding-left-12pxpadding-right)/2=12px?
      2. Почему margin'ы работают не так как я ожидаю?)
      Если я что-то неясно или не совсем корректно изложила прошу понять и простить :)))
      Спасибо за ответы.
       
    • By Elizavetk_a
      Здравствуйте!
      Возникла проблема с реализацией одной идеи.
      Есть интерактивный объект с возможностью прокрутки городов. И есть фотографии, сделанные в виде  cards bootstrap 4. Необходимо, чтобы при выборе города выделялись определенные фотографии. Можете подсказать, как можно это реализовать в верстке, какие материалы изучить?
      Схематический рисунок прикреплен ниже. 
      Заранее спасибо)

    • By kask
      Подскажите какие стили нужно переопределить чтобы навигационная панель в navbar выезжала слева на право а не сверху вниз как определенно стандартно 
    • By Tascan
      Всем привет.
      В данный момент изучаю Bootstrap и задался таким вопросом. По правилам сетки Bootstrap, если я не ошибаюсь row и col должны быть внутри элемента с классом container.
      Но вот если при вёрстке макет разделён на отдельные блоки, например: header отдельно, далее ещё пару блоков с информацией и за ним footer. Как при таком варианте правильнее будет сделать порядок: общий тег container, вместо стандартного wrapper и далее внутри него все вышеперечисленные теги или же нужно создать container для каждого раздела?
      А если, например, у каждого из этих разделов свой фон? Тогда уже нужно идти по второму варианту: делать разделы на 100% ширину браузера, прописывать им фон, а вот внутри них уже делать div'ы с классом container, которые уже ограничат ширину блоков с контентом? 
    • By vka986
      Здравствуйте, я начинающий верстальщик, только учусь сейчас изучаю технологию Bootstrap и у меня возникла проблема, есть три блока с контентом, каждый занимает по 4 колонки то есть использую col-md-4, в сетке бутстрапа в макете все отлично сходиться вместе с 20px margin-right, но в верстке как только в CSS пишу margin  хотя бы 1 px, последний блок сезжает на строчку ниже. Подскажите как с этим быть заранее спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy