Подтвердить что ты не робот

Что заменяет навигационные списки в Bootstrap 3?

Я готов обновить свой сайт до Bootstrap 3, но я не могу понять, как заменить класс nav-list из Bootstrap 2.

Я просмотрел группы групп, но я не уверен, что это будет использоваться для замены навигационных списков. Как сделать следующую разметку в Bootstrap 3?

<div class="well">
    <ul class="nav nav-list">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
    </ul>
</div>

ИЗМЕНИТЬ

Это выглядит так: http://jsfiddle.net/bplumb/2Nguy/

4b9b3361

ОТВЕТЫ

Ответ 1

РЕДАКТИРОВАТЬ

Удаление .nav-list было задокументировано в Миграция к v3.x - Что удалено:

Списки навигации
.nav-list .nav-header
Прямого эквивалента нет, но группы списков и группы .panel-group схожи.

Я обнаружил это изменение в списке изменений внутри запроса извлечения "WIP: Bootstrap 3":

  • Удалить .nav-list. Заменен новым компонентом .list-group.

Поэтому, если я вместо этого .list-group ваш код для использования .list-group, я получу следующее:

<div class="well">
    <ul class="list-group">
        <li class="list-group-item"><a href="#">Link 1</a></li>
        <li class="list-group-item"><a href="#">Link 2</a></li>
    </ul>
</div>


<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="well">
    <ul class="list-group">
        <li class="list-group-item"><a href="#">Link 1</a></li>
        <li class="list-group-item"><a href="#">Link 2</a></li>
    </ul>
</div>

Ответ 2

Я использовал class="nav nav-pills nav-stacked", и для меня это была более стильная замена. Но, возможно, это разрешено в версии 3.0.2.

Ответ 3

Следующий .less вернет nav-list более или менее, как это было в 2.3.2:

@import "../bootstrap/variables.less"; // replace with path to bootstrap variables.less

// Nav headers (for dropdowns and lists)
.nav-header {
  display: block;
  padding: 3px 15px;
  font-size: 11px;
  font-weight: bold;
  line-height: @line-height-small;
  color: @gray-light;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  text-transform: uppercase;
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
  margin-top: 9px;
}

// NAV LIST
// --------

.nav-list {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
  margin-left:  -15px;
  margin-right: -15px;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.nav-list > li > a {
  padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
  color: @body-bg;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  background-color: @link-color;
}
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
  margin-right: 2px;
}
// Dividers (basically an hr) within the dropdown
.nav-list .divider {
  .nav-divider();
}

Итоговый CSS:

.nav-header {
  display: block;
  padding: 3px 15px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.5;
  color: #999999;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}
.nav li + .nav-header {
  margin-top: 9px;
}
.nav-list {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
  margin-left: -15px;
  margin-right: -15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav-list > li > a {
  padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  background-color: #428bca;
}
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
  margin-right: 2px;
}
.nav-list .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

Включите CSS или LESS после нормального загрузочного актива.

Ответ 4

Я создал gist, который берет навигационный список из bootstrap 2.3.2, заполняет некоторые переменные, которые недоступны в 3.0 под тем же именем, и разрешает зависимость mixin. Все прямые по умолчанию, и кажется (пока) хорошо воспроизводиться с обновленными бутстрапами 3,0 колодца, где я в первую очередь использую его.

https://gist.github.com/jimbojsb/6754116