如何使用引导程序将链接放在按钮上？

一个人如何将链接放在带有自举程序的按钮上？

引导程序文档中有4种方法：

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

第一个不适用于我，没有按钮显示，只有带有链接的文本，让我感觉到主题正在使用。

第二个显示的是我想要的按钮，但是单击什么代码会使按钮链接到另一页？

干杯

您可以在按钮的单击事件上调用函数。

<input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">

<script>
function relocate_home()
{
     location.href = "www.yoursite.com";
} 
</script>

或使用此代码

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

如果您确实不需要button元素，只需将类移动到常规链接即可：

<div class="btn-group">
    <a href="/save/1" class="btn btn-primary active">
        <i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> Save
    </a>
    <a href="/cancel/1" class="btn btn-default">Cancel</a>
</div>

相反，您也可以更改按钮以使其看起来像链接：

<button type="button" class="btn btn-link">Link</button>

最简单的解决方案是您的第一个示例：

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

正如您所说，它最不适合您的原因是您使用的主题出现问题。为此，没有理由诉诸过大的额外标记或内联Javascript。

使链接颜色在<button>标记内正常工作的另一个技巧

<button type="button" class="btn btn-outline-success and-all-other-classes"> 
  <a href="#" style="color:inherit"> Button text with correct colors </a>
</button>

请记住，在bs4 beta中，例如btn-primary-outline更改为btn-outline-primary

这就是我解决的方法

   <a href="#" >
      <button type="button" class="btn btn-info">Button Text</button>
   </a>  

结合以上答案，我找到了一个简单的解决方案，它可能也会为您提供帮助：

<button type="submit" onclick="location.href = 'your_link';">Login</button>

通过仅添加内联JS代码，您可以转换链接中的按钮并保持其设计。

您只需添加以下代码即可；

<a class="btn btn-primary" href="http://localhost:8080/Home" role="button">Home Page</a>