如何使用LESS重新定義Bootstrap的按鈕背景？

我不知道如何可以使用更少的重新定義按鈕的背景。從their's website，有一個btn-default-bg屬性，但它接受color。我想設置背景。如何使用LESS重新定義Bootstrap的按鈕背景？

我確實可以在我的LESS文件中重新定義.btn-default類，但這會導致將兩個.btn-default類添加到該包中。我只想要一個。

我怎麼能做到這一點與少？

PS：This guy能夠做到我想要的東西，他重新定義了.btn-default類和所產生的捆綁，只有一個班。但是，他正在使用SASS，我不知道它的行爲是否有所不同。

來源

2015-12-22 André Pena

這個人做的正是你上面提到的 - 他只是創建了一個重載的'.btn-default'規則集。在他的輸出CSS中重複的冗餘規則集被項目構建設置中使用的CSS縮小工具消除。 –

@ seven-phases-max謝謝..這是有道理的。如果您將其作爲答案發布，我會接受它。 –

-1

這是自舉的CSS .btn默認：

.btn-default { 
    color: #333; 
    background-color: #fff; 
    border-color: #ccc; 
} 
.btn-default:focus, 
.btn-default.focus { 
    color: #333; 
    background-color: #e6e6e6; 
    border-color: #8c8c8c; 
} 
.btn-default:hover { 
    color: #333; 
    background-color: #e6e6e6; 
    border-color: #adadad; 
} 
.btn-default:active, 
.btn-default.active, 
.open > .dropdown-toggle.btn-default { 
    color: #333; 
    background-color: #e6e6e6; 
    border-color: #adadad; 
} 
.btn-default:active:hover, 
.btn-default.active:hover, 
.open > .dropdown-toggle.btn-default:hover, 
.btn-default:active:focus, 
.btn-default.active:focus, 
.open > .dropdown-toggle.btn-default:focus, 
.btn-default:active.focus, 
.btn-default.active.focus, 
.open > .dropdown-toggle.btn-default.focus { 
    color: #333; 
    background-color: #d4d4d4; 
    border-color: #8c8c8c; 
} 
.btn-default:active, 
.btn-default.active, 
.open > .dropdown-toggle.btn-default { 
    background-image: none; 
} 
.btn-default.disabled:hover, 
.btn-default[disabled]:hover, 
fieldset[disabled] .btn-default:hover, 
.btn-default.disabled:focus, 
.btn-default[disabled]:focus, 
fieldset[disabled] .btn-default:focus, 
.btn-default.disabled.focus, 
.btn-default[disabled].focus, 
fieldset[disabled] .btn-default.focus { 
    background-color: #fff; 
    border-color: #ccc; 
} 
.btn-default .badge { 
    color: #fff; 
    background-color: #333; 
}

複製該代碼，並改變自己的CSS屬性...

如果這不起作用，你可以使用!important每個屬性，例如後：

.btn-default{ 
    background: red !important; 
}

我希望它可以幫助你..

來源

2015-12-22 05:25:57

-1

我認爲這是最好的解決方案。

.bgColor (@bg: #ff0000) { 
    background-color: @bg; 
} 
.btn-default { 
    .bgColor() !important; 
}

來源

2015-12-24 14:34:37 Ridoy

如何使用LESS重新定義Bootstrap的按鈕背景？

回答

相關問題