Qu'est-ce qui remplace les listes de navigation dans Bootstrap 3 ?

Question

Je me prépare à mettre mon site à jour vers Bootstrap 3, mais je n'arrive pas à trouver comment remplacer le site nav-list de la classe Bootstrap 2 .

J'ai regardé dans liste des groupes mais je ne suis pas sûr qu'elle doive être utilisée pour remplacer les listes de navigation. Comment puis-je faire fonctionner le balisage ci-dessous dans 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>

EDITAR

C'est le look que je recherche : http://jsfiddle.net/bplumb/2Nguy/

Answer 1

EDITAR

La suppression de .nav-list a été documenté en Migration vers la v3.x - Ce qui a été supprimé :

Listes de navigation
.nav-list .nav-header
Pas d'équivalent direct, mais liste des groupes y .panel-group s sont similaires.

---

J'ai trouvé cette modification listée dans le journal des modifications à l'intérieur de la section "WIP : Demande de retrait "Bootstrap 3 :

• Retirer .nav-list option . Remplacé par le nouveau .list-group composant.

Donc si je traduis votre code pour utiliser .list-group à la place, j'obtiens ceci :

<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>

Cependant, l'apparence n'est pas identique à celle de Bootstrap 2. Comme je noté dans les commentaires de cette réponse, il semble qu'il n'y ait pas de réponse exacte. .nav-list équivalent intégré à Bootstrap 3. Donc si vous avez besoin de fonctionnalités que .list-group n'a pas, vous devrez écrire le CSS vous-même, ou essayer de le porter depuis Bootstrap 2.

Answer 2

J'ai utilisé class="nav nav-pills nav-stacked" et pour moi, c'est un remplacement plus stylé. Mais peut-être est-ce résolu dans la version 3.0.2.

Answer 3

Le .less suivant ramènera nav-list plus ou moins comme il l'était en 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();
}

Le CSS qui en résulte est :

.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;
}

Incluez le CSS ou le LESS après l'actif bootstrap normal.

Answer 4

J'ai créé un gist qui prend nav-list de bootstrap 2.3.2, remplit quelques variables qui ne sont pas disponibles dans 3.0 sous le même nom, et résout une dépendance mixin. C'est tout droit par défaut, et semble (jusqu'à présent) à jouer bien avec mis à jour puits bootstrap 3.0, qui est où je l'utilise principalement.

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

Answer 5

Pour moi, le remplacement était :

nav nav-pills

https://getbootstrap.com/docs/3.4/components/#badges

Sous le titre "S'adapte aux états actifs de la navigation".