用較少變量替代導航欄漸變顏色

variables.less中的哪一個LESS變量負責導航欄背景漸變？用較少變量替代導航欄漸變顏色

我想通過使用LESS變量來自定義導航欄的漸變顏色。我想避免使用原始CSS來覆蓋導航欄背景。

根據http://getbootstrap.com/customize/#navbar沒有梯度相關變量和定製只是@navbar-default-bg是不夠的梯度（由2種或更多的顏色定義）

這可能嗎？

2014-01-31 hendrix

通過將darken和/或lighten函數應用於@navbar-default-bg，可以生成其他導航欄漸變顏色。因此，如果您需要漸變爲除@navbar-default-bg以外的其他顏色，則除了「覆蓋原始CSS」之外，沒有辦法。

來源

2014-01-31 13:39:20

我的經驗 - 只需刪除主題。然後，您可以在此特定實例中利用LESS變量的強大功能。 – blackhawk

梯度的導航欄和下拉菜單都在theme.less文件，as of this writing the navbar specifically on line 107這混入內部：

.navbar-default { 
    #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg); 
    .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered 
    border-radius: @navbar-border-radius; 
    @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); 
    .box-shadow(@shadow); 

    .navbar-nav > .active > a { 
    #gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%)); 
    .box-shadow(inset 0 3px 9px rgba(0,0,0,.075)); 
    } 
}

基本上，看來這些都是關鍵變量：

導航欄正常：結束顏色的梯度= @navbar-default-bg
navbar inverse：梯度的結束顏色= @navbar-inverse-bg
下拉正常鏈路：開始梯度的顏色= @dropdown-link-hover-bg
下拉活性鏈路：使用自舉3.3.6開始梯度的顏色= @dropdown-link-active-bg

來源

2014-01-31 13:42:01 ScottS

用較少變量替代導航欄漸變顏色

回答

相關問題