Question

点击后如何在Bootstrap 3中自动制作按钮？

要复制我的问题，请使用一些按钮创建一个页面，为它们提供适当的引导类（并包含引导程序）：

<input id="one" type="button" class="btn btn-default" value="one">
<input id="two" type="button" class="btn btn-primary" value="two">

加载页面并单击其中一个按钮。它会变得凹陷并突出显示，直到您单击页面上的其他位置（使用FF29和chrome35beta）。

单击并取消选中时检查输入元素不会显示附加的任何其他类，也不会从中删除。

以下是一个抑郁的Bootstrap按钮示例：http://jsfiddle.net/52VtD/5166/

Answer 1

在您的示例中，按钮不会保持按下状态。他们保持专注。如果您想查看差异，请执行以下操作：

点击并按住按钮。
释放。您会看到，当您松开鼠标时，按钮的外观会稍微改变，因为它不再被按下了。

如果您不希望按钮在释放后保持对焦，则可以指示浏览器在您释放鼠标时将焦点从焦点中移开。

实施例

此示例使用jQuery，但您可以使用vanilla JavaScript实现相同的效果。

$(".btn").mouseup(function(){
    $(this).blur();
})

<强> Fiddle

Answer 2

或者您可以使用一个锚标签，其样式可以完全相同，但由于它不是表单元素，因此不会保留焦点：

<a href="#" role="button" class="btn btn-default">one</a>.

请参阅此处的Anchor元素部分：http://getbootstrap.com/css/#buttons

Answer 3

按钮保持聚焦状态。要有效地删除它，您可以将此查询代码添加到项目中。

$(document).ready(function () {
  $(".btn").click(function(event) {
    // Removes focus of the button.
    $(this).blur();
  });
});

这也适用于锚链接

$(document).ready(function () {
  $(".navbar-nav li a").click(function(event) {
    // Removes focus of the anchor link.
    $(this).blur();
  });
});

Answer 4

或有角度的方式：

function blurElemDirective() {
  return {
    restrict: 'E',
    link: function (scope, element, attrs) {
      element.bind('click', function () {
        element.blur();
      });
    }
  };
}

app.directive('button', blurElemDirective);
app.directive('_MORE_ELEMENT_', blurElemDirective);

将 _MORE_ELEMENT _ 替换为您的其他元素。

或属性方式：

function blurElemDirective() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element.bind('click', function () {
        element.blur();
      });
    }
  };
}

app.directive('blurMe', blurElemDirective);

然后将该属性添加到您的html元素： blur-me

<button blur-me></button>

Answer 5

我的偏好：

"rotation": -90

Answer 6

这是浏览器的焦点，因为它是一个表单元素（input）。您可以使用一点css轻松删除聚焦

input:focus {
    outline: 0;
}

以下是您的示例的小提琴：http://jsfiddle.net/52VtD/5167/

修改

啊，我刚才看到按钮本身的颜色也发生了变化。 Bootstrap改变例如按钮。你的btn-default按钮带有这个css：

.btn-default:focus { color: #333; background-color: #ebebeb; border-color: #adadad; }

如果您不想要此行为，只需使用您的css覆盖它。

Answer 7

这与:active和:focus元素状态有关。您需要为这些按钮修改这些状态的样式。例如，对于默认按钮：

.btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    color: #333;
    background-color: #ccc;
    border-color: #fff;
}

如何使用Bootstrap 3阻止按钮保持抑郁

7 个答案:

实施例