css - Bootstrap v3.3.0 - 侧面导航

Question

我刚开始学习 Bootstrap 并重新创建我的旧站点。我完成了侧导航，昨天我注意到有一个新的 Bootstrap 版本 v3.3。该版本缺少以前的 boostrap.css 中的一些类，例如我正在使用的“导航列表”(如下)。这很常见吗？我应该期望通过新的 Boostrap 版本放宽类(class)吗？这没什么大不了的，我当然可以创建自己的。 Bootstrap examples甚至不要演示可堆叠的侧边导航!我是否缺少指向某些文件的链接？

<div class="well sidebar-nav">
    <ul class="nav nav-list">
        <li class="nav-header">Seciton Header</li>
        <li class="active"><a href="#">Item A</a></li>
        <li><a href="#">Item B</a></li>
        <li class="nav-header">Seciton Header 2</li>
        <li><a href="#">Item A</a></li>
        <li><a href="#">Item B</a></li>
    </ul>
</div>

Answer 1

.nav-list是 Twitter Bootstrap 2 的一部分，而我们在这里谈论的是 Bootstrap 3...新的版本带来重大变化是很正常的，比如删除的功能和新的功能。

看看Bootstrap migration guide .你会看到:

[.nav-list have] no direct equivalent, but list groups and .panel-groups are similar.

以下是在 Bootstrap 3 中获得类似行为的方法:

• 使用.nav-pills.nav-stacked而不是 .nav-list
• 替换.nav-header通过 .disabled
• 将您的“导航标题”内容包装在 <a> 中

Twitter Bootstrap 2.3:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/2.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well sidebar-nav">
    <ul class="nav nav-list">
        <li class="nav-header">Seciton Header</li>
        <li class="active"><a href="#">Item A</a></li>
        <li><a href="#">Item B</a></li>
        <li class="nav-header">Seciton Header 2</li>
        <li><a href="#">Item A</a></li>
        <li><a href="#">Item B</a></li>
    </ul>
</div>

Bootstrap 3.3:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well sidebar-nav">
  <ul class="nav nav-pills nav-stacked">
    <li class="disabled"><a>Seciton Header</a></li>
      <li class="active"><a href="#">Item A</a></li>
      <li><a href="#">Item B</a></li>
    <li class="disabled"><a>Seciton Header</a></li>
      <li><a href="#">Item A</a></li>
      <li><a href="#">Item B</a></li>
  </ul>
</div>