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

【问题标题】：How to put a link on a button with bootstrap?如何使用引导程序将链接放在按钮上？
【发布时间】：2016-06-30 10:38:45
【问题描述】：

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

引导文档中有 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">

第一个对我不起作用，没有按钮显示，只有带有链接的文本，感觉是我使用的主题。

第二个显示了我想要的按钮，但是当点击时，什么代码使按钮链接到另一个页面？

干杯

【问题讨论】：

jsfiddle.net/Lstcymqo 问题可能与您使用的主题有关
What are the differences between buttons and links?

标签： html twitter-bootstrap button hyperlink

【解决方案1】：

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

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

正如您所说，它不适合您的原因很可能是您使用的主题存在问题。没有理由为此使用臃肿的额外标记或内联 Javascript。

【讨论】：

对网络爬虫来说最简单更好

【解决方案2】：

如果您真的不需要按钮元素，只需将类移动到常规链接：

<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>

【讨论】：

比公认的更好的答案 - 不需要 javascript.. 谢谢
何时应该使用按钮和何时应该使用链接，请注意语义和可访问性。通常，页面上的操作按钮和页面中内容的链接或离开页面的导航。

【解决方案3】：

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

<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>

【讨论】：

一个非常糟糕的接受答案：网络爬虫如何解析您的链接？没有标题，没有目标，那不是链接，那是重定向……
这完全没有必要，而且对 SEO 非常不利。看看下面我的解决方案 (stackoverflow.com/a/44130105/1202214)。

【解决方案4】：

我就是这样解决的

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

【讨论】：

【解决方案5】：

另一个让链接颜色在<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

【讨论】：

【解决方案6】：

结合以上答案，我找到了一个简单的解决方案，可能也会对您有所帮助：

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

只需添加内联 JS 代码，您就可以转换链接中的按钮并保留其设计。

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

我认为最简单和干净的方法是（没有任何额外的 javascript 函数）：

<a class="btn" href="#">
   <i class="fas fa-cloud"></i>
</a>

要使用 fontawesome 图标，您只需将以下链接放在标题中：

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

仅此而已

【讨论】：

【解决方案9】：

正如您对 Bootstrap 的要求，我认为最好的选择是选择 btn-link 类。

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

如果您希望 btn 链接将您发送到另一个页面或激活诸如模式之类的东西，您可以像其他人建议的那样包含 onClick。

【讨论】：