Question

我知道bootstrap中有 .btn 类

<span class="btn" style="background-color: #82CFFD"><strong>R</strong></span>

它有很好的造型，但是像按钮，悬停状态等等做出反应等。是否有像.btn这样的bootstrap类，但没有悬停状态，或者我们必须这样做：（

Answer 1

我认为最简单的方法是将一些.nohover类添加到与.btn类具有相同样式的所需.btn元素

HTML

<span class="btn nohover" style="background-color: #82CFFD"><strong>R</strong></span>

CSS

.btn.nohover:hover {
    /* here copy default .btn class styles */
    cursor:default !important;
    /* or something like that */
}

Answer 2

实现目标的方法是设置button style，例如btn-default，然后添加active class：

<span class="btn btn-default active" style="background-color: #82CFFD"><strong>R</strong></span>

唯一需要注意的是按钮总是看起来“按下”。如果您不希望按下该按钮，则必须进行自定义覆盖。

Answer 3

如果您使用属性style设置样式，那么这将覆盖从类.btn的css文件设置的所有样式。所以你不会得到bootstrap css中定义的悬停状态样式。

从boost 3开始，你必须设置一个css基类btn和一个修饰符类btn-default或btn-primary或...

Answer 4

试试这个：

<a href="#" class="btn" role="button"><strong>R</strong></a>

你必须从bootstrap

覆盖类.btn

.btn:hover {
  background-color : 'your background color';
}

对于光标有一个例子：

http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=default

Answer 5

.btn:hover {
  color: @grayDark;
  text-decoration: none;
  background-color: darken(@white, 10%);
  background-position: 0 -15px;

  // transition is only when going to hover, otherwise the background
  // behind the gradient (there for IE<=9 fallback) gets mismatched
  .transition(background-position .1s linear);
}

你可以像这样使用悬停

如果您想了解有关bootstrap及其功能的知识，请参阅此链接

http://jacobrask.github.io/styledocco/styledocco/examples/bootstrap/docs/buttons.html

Answer 6

如果您正在使用sass（.scss），您可以简单地覆盖该样式..我建议您将其包装在另一个独特的div中，因此您不会无意中影响所有.btn类以备将来使用。

.btn {
  &:hover {
    background-color: #FFF;
  }
}

Answer 7

我知道这是一个老问题，但有一种简单的方法可以仅在引导程序中实现。

<span class="btn btn-default bg-light text-dark border border-secondary"><strong>R</strong></span>

您可以为其他颜色更改 border-secondary：border-primary、border-success 等。

所以你也可以对 bg-light 这样做。

文本颜色使用：text-white、text-dark 或其他引导文本颜色完成。

如果您想使用与引导程序不同的背景颜色，请使用：style="background-color: #82CFFD"

<span class="btn btn-default border border-secondary" style="background-color: #82CFFD"><strong>R</strong></span>

Bootstrap btn类，但不是悬停状态

7 个答案: