語義引導導航欄 - 青菜

使用自助-SASS（指南針）
有以下的HTML標記（不能改變它）

<div class="some"> 
    <ul> 
    <li><a href="#" class="inactive">Item1</a></li> 
    <li><a href="#" class="active">Item2</a></li> 
    <li><a href="#" class="inactive">Item3</a></li> 
    </ul> 
</div>

上面的可能風格（使用sass-bootstrap）作爲沒有「brand-logo」的navbar，並且不改變htm l - 例如語義？

來源

2015-07-18 kobame

你是什麼意思「品牌標誌」？引導類名稱？ – ramesh

這個問題還不清楚，你想達到什麼目的？代碼中沒有'brand-logo'。請包含更多相關的代碼，並更好地解釋您希望輸出的內容。 –

@TinyGiant問題不是很好（缺少OP已經嘗試過的內容），但是如果有人知道twitter-bootstrap，他知道導航欄中的「品牌」是什麼。 – jm666

如果你只想要的風格，只需使用所需樣式，比如：

.some { 
    @extend .navbar; 
    @extend .navbar-inverse; 
} 
.some { 
    ul { 
     @extend .nav; 
     @extend .navbar-nav; 
     @extend .navbar-right; 
     > li a.active { 
      &, 
      &:hover, 
      &:focus { 
       color: $navbar-inverse-link-active-color; 
       background-color: $navbar-inverse-link-active-bg; 
      } 
     } 
    } 
}

例如以上將風格你的div/ul得到一個右對齊的反向導航欄 - 所有樣式就像在引導。

我沒有測試javascript - 它可能會失敗，因爲它會搜索navbar - 但上面的簡單樣式工作。

對於li > a.active部分：我只是複製它直接從引導，薩斯，它是必要的，因爲引導使用active爲li元素，而不是爲a元素，所以您需要的樣式的a.active。

此外，它沒有摺疊到按鈕中，而只是將其佈局更改爲垂直列表。

「品牌」將被自動排除，因爲它不在標記中。

來源

2015-07-19 06:28:36 jm666

正是我在找什麼。 – kobame

-1

我想我們需要看到更多的代碼，但如果內存服務您使用標準的Twitter Bootstrap菜單。如果是這樣，您可以使用該類來設置它的樣式，並且不顯示代碼中的品牌標識。如果你可以從HTML去除品牌標誌會更容易

來源

2015-07-19 00:31:25

語義引導導航欄 - 青菜

回答

相關問題