如何将链接显示为Bootstrap基本按钮？

Question

基本按钮类（“btn”）以“按钮”标记的其他方式显示在“a”标记中：

<a href="#" class="btn" role="button">Link Button</a>
<button type="button" class="btn">Button</button>

其他按钮类（“btn btn-default”，“btn btn-primary”，...）在两个相同的标签中显示，请参阅：https://jsfiddle.net/antoninslejska/9gps82da/3/

我可以使用内联Javascript，请参阅：How to put a link on a button with bootstrap?：

<button onclick="location.href = '#my-link';" class="btn">Link Button</button>

但我发现这种方法不是最佳的。还有其他方法，如何将链接显示为Bootstrap基本按钮？

Answer 1

Bootstrap按钮类总是成对出现。

1. btn类用于设置其外观。所以像填充，对齐，边界半径。
2. 次要类用于设置颜色。例如，btn-primary将背景和边框颜色设置为蓝色，将文本设置为白色。

所以看起来你想要一个灰色按钮。最简单的方法是定义自己的二级类。例如，将其添加到CSS：

.btn-mybutton {
    color: #000;
    background-color: #cccccc;
    border-color: #cccccc;
}

现在您可以创建自己的按钮：

<a href="#" class="btn btn-mybutton" role="button">Link Button</a>

例如：

.btn-mybutton {
  color: #000;
  background-color: #cccccc;
  border-color: #cccccc;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<a href="#" class="btn btn-mybutton" role="button">Link Button</a>