风格Twitter引导程序导航

人们通常如何设计Twitter Bootstrap可折叠导航的输出？风格Twitter引导程序导航

标准结构如下。

<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

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

来源

2013-08-19 Ben Swinburne

我自己已经解决了这个问题，并且有一系列解决方案。
为了我会把他们是这样的：

参与，但值得 - 我已经切换到涉及构建引导工作流。我使用指南针和咕噜声等bootsrap-sass。这处理缩小，连接等任务，在这种情况下，你想要的所有变化_variables.scss或.less等。
廉价但有效 - 我已经使用了一个非常简单的黑客来制作第二个菜单，并添加了.hidden-phone，.visible-desktop等。这允许您也可以制作独特的触摸按钮，也可以放弃崩溃。有点儿像他们这样做here（这不是引导，但其相同的概念）
媒体查询 - 我的列表中的最后一个CSS一直是我responsive.scss或完整的媒体查询文件，这样我可以改变无论我想从任何设备之前完成的任何事情中重写。

来源

2013-08-19 22:46:02 Dylan

我去了媒体查询解决方案。非常感谢 –

最简单的解决方案是将主导航的.navbar div封装到一个带有自定义类的div中 - 比如说，“mainnav”。然后，您可以将样式写入“.mainnav .nav li a”之类的东西。

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

来源

2013-08-19 17:46:34

菜单分为两部分，一个结构和一个样式。如果您删除样式，则会留下一个易于设计的裸引导菜单。删除“navbar-inner”调用，它将删除所有样式。我只是将菜单div上的调用从navbar-innner重命名为navbar-inner_OFF。这封闭了内部的CSS，并且还提醒我，当我查看菜单代码时，我将它关闭。

来源

2014-01-29 20:39:41

风格Twitter引导程序导航

回答

相关问题