Bootstrap выделяет выбранный элемент в навигационном списке

Так что я использую bootstrap вместе с slim для создания некоторых навигационных страниц. Задерживается выделение выбранного элемента в списке в качестве класса «активировать». Я нашел что-то под названием affix или scrollspy, но они отличаются от того, что мне нужно делать, а именно для навигации по страницам. У меня есть следующий код:Bootstrap выделяет выбранный элемент в навигационном списке

.container-fluid 
     .row-fluid 
     .span2 
      ul.nav.nav-list 
      li.active = link_to 'Home', root_path 
      li.divider 
      li = link_to 'Openings', openings_path 
      ... 
     .span10 
      ==yield

Я считаю, что на этом должна быть какая-то лучшая практика. Любое предложение будет оценено по достоинству.

источник

2013-03-28 William Gu

-1

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

Существует множество других способов достижения одной и той же цели. Например, вы можете добавлять классы в тег тела на разных страницах, настраивать HTML для своих элементов списка навигации, добавлять свой стиль CSS, и вам хорошо идти.

HTML

<body class="home"> 
or 
<body class="contact"> 

<ul class="nav nav-list"> 
    <li class="home"> <a href="#">home</li> 
    <li class="contact"> <a href="#">contact</li> 
</ul>

CSS

.home li.home a, .contact li.contact a{ 
background-color#999; 
color:white; 
} 

or if you want to go with the built-in Bootstrap active styling, 
something similar to this: 

.home li.home a, .contact li.contact a, 
.home li.home a, .contact li.contact a:hover, 
.home li.home a, .contact li.contact a:focus { 
color: #555555; 
text-decoration: none; 
background-color: #e5e5e5; 
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); 
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); 
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); 
}

Вы можете использовать этот подход для обоих динамических и статических сайтов.

Надеюсь, это поможет вам начать работу!

источник

2013-03-28 16:38:30

Bootstrap выделяет выбранный элемент в навигационном списке

ответ

Смежные вопросы