1

Bootstrap ボタンのスタイルを変更して、デフォルトの外観にならないようにしたい。カスタマイズページから簡単に色を変更できますが、グラデーションの値を削除してフラットに見えるようにしたいのです。

これを行うには他にもいくつかのアプローチがあることがわかります。私が行ったことは、ブートストラップ要素のスタイルを上書きするための独自の custom.css を作成し、html 内のデフォルトのブートストラップ css の下にリンクすることです。ここ.btn .btn-successに記載されているように、緑色のボタンをカスタマイズするためのカスタム スタイルがありますが、何もしません。

基本的に、ボタンのカスタマイズのコンテキストでデフォルトのスタイルを上書きする正しい手順を知りたいです。

4

2 に答える 2

3

ブートストラップ .css で、btn-primary のすべてのスタイルを見つけて、カスタム .css にコピーします。

名前を好きな色に変更します.btn-primary = .btn-blue

次に、要素を削除または変更します。

ボタンで、作成したクラスを使用します。

<button class="btn btn-customcollor">Custom Button</button>

灰色のボタンの例:

.btn.btn-gray {
    border: 1px solid #626e7f;
    -webkit-box-shadow: inset 0 1px 2px #9aa4b1;
    -moz-box-shadow: inset 0 1px 2px #9aa4b1;
    box-shadow: inset 0 1px 2px #9aa4b1;
    background: #758294;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOTdhNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc1ODI5NCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c97a6), color-stop(100%, #758294));
    background-image: -webkit-linear-gradient(top, #8c97a6, #758294);
    background-image: -moz-linear-gradient(top, #8c97a6, #758294);
    background-image: -o-linear-gradient(top, #8c97a6, #758294);
    background-image: linear-gradient(top, #8c97a6, #758294); 
}


.btn.btn-gray:hover {
    background: #728092;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOTdhNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzcyODA5MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c97a6), color-stop(100%, #728092));
    background-image: -webkit-linear-gradient(top, #8c97a6, #728092);
    background-image: -moz-linear-gradient(top, #8c97a6, #728092);
    background-image: -o-linear-gradient(top, #8c97a6, #728092);
    background-image: linear-gradient(top, #8c97a6, #728092);
    -webkit-transition: box-shadow 0.05s ease-in-out;
    -moz-transition: box-shadow 0.05s ease-in-out;
    -o-transition: box-shadow 0.05s ease-in-out;
  transition: box-shadow 0.05s ease-in-out; 
}


.btn.btn-gray:active {
    background: #818d9d;
    border-color: #5d6979;
    -webkit-box-shadow: 0 0 5px #818d9d inset;
    -moz-box-shadow: 0 0 5px #818d9d inset;
    box-shadow: 0 0 5px #818d9d inset; 
}

.btn-group.open .btn.btn-gray.dropdown-toggle {
    background-color: #8c97a6; 
}
于 2013-05-05T23:16:51.367 に答える
1

この問題の回避策については、こちらに書いています。ブートストラップ ボタンのスタイルを設定する簡単な方法。https://stackoverflow.com/a/20960203/3167046

于 2014-01-06T22:11:44.593 に答える