風格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引導程序導航

回答

相關問題