Question

我目前正在开展网络项目，并将Bootstrap的主要按钮颜色更改为橙色。现在几乎所有按钮状态都可以正常工作：活动状态，悬停状态等 - 除了加载状态。

一旦进入加载状态，将返回其默认颜色，即蓝色。

我正在寻找如何做到但似乎我似乎无法找到它。任何人都可以帮我解决这个问题，或者如果这个问题已经存在，请转发给我。最好是，我想在没有javascript的情况下这样做。谢谢！

Answer 1

如果不使用JavaScript，则无法完成此操作。

第一种方式，如果你不害怕JS ：jsfiddle

HTML：

<button type="button" id="btn1" data-loading-text="Hm.." class="btn btn-primary">
  Loading state
</button>

<强> CSS ：

.btn-primary,
.btn-primary:hover,
.btn-primary:active {
    border: none;
    margin: 5px;
    background-color: #b2d025; /* here */
}

<强> JS ：

$("#btn1").click(function() {
    var $btn = $(this);
    $btn.button('loading');

    $(this).css('background-color','#b2d025'); /* and here */

    setTimeout(function () {
        $btn.button('reset');
    }, 1000);
});

第二种方式（少js，更多css，使用！important）：jsfiddle

Answer 2

您可以使用内联CSS

function form(){

    $showForm = func_get_args();

    //my problem is here

    return $n;
}

注意：这会给出答案，但var url = "/Supplier/GetAllSupplier"; $.post(url, {id: id}, function (response) { if (response) { $(document).html(response) } }).fail(function (response) { alert("Delete Failed"); });和<button type="button" id="btn1" data-loading-text="Hm.." class="btn btn-primary" style="background-color:red"> Loading state </button>效果不起作用

Answer 3

您是否尝试过使用bootstrap customize 我认为他们可以选择更改主按钮的颜色。寻找btn-primary-color

Answer 4

如果你不想使用javascript，你可以试试这个..

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus:hover {
    border: none;
    background-color: #b2d025;    
}

希望这会有所帮助......

Twitter-Bootstrap按钮颜色加载状态

4 个答案: