0

人们通常如何设计 Twitter Bootstrap 可折叠导航的输出？

标准结构如下。

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="brand">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

例如，如果我想设置样式.nav li a，我可以使用那个 CSS 选择器来实现，但这也会改变移动导航的样式。Bootstrap 似乎没有添加任何有用的类组合来表示不同的类。

<div class="nav-collapse collapse"> <!-- Closed by button -->
<div class="nav-collapse on collapse"> <!-- Open by button -->
<div class="nav-collapse on collapse"> <!-- Closed by resizing window to > mobile -->

我发现自己不得不再次为移动版本有效地实现引导样式，因为我似乎找不到允许我只设置主导航而不是下拉菜单的类组合。例如，下拉菜单可以使用.nav-collapse.on

这可能是一件非常简单的事情，但似乎无法解决！

4

3 回答 3

1

我自己已经解决了这个问题，并且有多种解决方案。
为了我会把它们放在这样的地方：

  1. 参与但值得- 我已切换到涉及构建引导程序的工作流程。我正在将 bootsrap-sass 与 compass 和 grunt 等一起使用。它处理缩小、连接等任务，在这种情况下，您想要对 _variables.scss 或 .less 等进行所有更改。
  2. 便宜但有效- 我使用了一个非常简单的技巧来制作第二个菜单并添加 .hidden-phone、.visible-desktop 等。这使您还可以制作独特的触摸按钮，也许可以放弃折叠。有点像他们在这里做 的（这不是引导程序，而是相同的概念）
  3. 媒体查询- 我在列表中的最后一个 css 始终是我的 responsive.scss 或一个充满媒体查询的文件，这样我就可以从之前为任何设备所做的任何事情中更改我想要覆盖的任何内容。
于 2013-08-19T22:46:02.270 回答
0

菜单分为两部分，结构和样式。如果您删除样式，您将得到一个易于样式化的裸引导菜单。删除“navbar-inner”调用，它会为你去掉所有的样式。我只是将菜单 div 上的调用从 navbar-innner 重命名为 navbar-inner_OFF。这会关闭 -inner css，并且还提醒我在查看菜单代码时将其关闭。

于 2014-01-29T20:39:41.763 回答
0

最简单的解决方案是将主导航的 .navbar div 包装在具有自定义类的 div 中——比如“mainnav”。然后，您可以将样式写入“.mainnav .nav li a”之类的内容。

如果您可以触摸引导结构本身，则可以跳过包装器 div，只需将类“mainnav”添加到“navbar”div，然后编写类似“.mainnav.navbar .nav li a”的样式。

于 2013-08-19T17:46:34.473 回答