Html 如何使用引导程序将链接放在按钮上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36003670/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put a link on a button with bootstrap?
提问by Philayyy
How would one put a link on a button with bootstrap?
如何将链接放在带有引导程序的按钮上？
there are 4 methods in the bootstrap documentation:
bootstrap 文档中有 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">
The first one doesn't work for me, no button shows, just the text with the link, have a feeling its the theme im using.
第一个对我不起作用，没有按钮显示，只有带有链接的文本，感觉它是我使用的主题。
The second one shows the button which is what i want, but whats the code make the button link to another page when clicked?
第二个显示了我想要的按钮，但是代码是什么使按钮在单击时链接到另一个页面？
Cheers
干杯
采纳答案by developersaumya
You can call a function on click event of button.
您可以在按钮的单击事件上调用函数。
<input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">
<script>
function relocate_home()
{
location.href = "www.yoursite.com";
}
</script>
OR Use this Code
或使用此代码
<a href="#link" class="btn btn-info" role="button">Link Button</a>
回答by Domenic D.
If you don't really need the button element, just move the classes to a regular link:
如果您真的不需要按钮元素，只需将类移动到常规链接：
<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>
Conversely, you can also change a button to appear like a link:
相反，您也可以将按钮更改为显示为链接：
<button type="button" class="btn btn-link">Link</button>
回答by Andreas Bergstr?m
The easiest solution is the first one of your examples:
最简单的解决方案是您的示例中的第一个：
<a href="#link" class="btn btn-info" role="button">Link Button</a>
The reason it's not working for you is most likely, as you say, a problem in the theme you're using. There is no reason to resort to bloated extra markup or inline Javascript for this.
正如您所说，它对您不起作用的原因很可能是您使用的主题存在问题。没有理由为此求助于臃肿的额外标记或内联 Javascript。
回答by silvan
Another trick to get the link color working correctly inside the <button>markup
使链接颜色在<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>
Please keep in mind that in bs4 beta e.g. btn-primary-outlinechanged to btn-outline-primary
请记住，在 bs4 beta 中，例如btn-primary-outline更改为btn-outline-primary
回答by ecg
This is how I solved
这就是我解决的方法
<a href="#" >
<button type="button" class="btn btn-info">Button Text</button>
</a>
回答by H. A.
Combining the above answers i find a simply solution that probably will help you too:
结合上述答案，我找到了一个简单的解决方案，它可能也会对您有所帮助：
<button type="submit" onclick="location.href = 'your_link';">Login</button>
by just adding inline JS code you can transform a button in a link and keeping his design.
只需添加内联 JS 代码，您就可以转换链接中的按钮并保持其设计。
回答by Ish
You can just simply add the following code;
您只需添加以下代码即可；
<a class="btn btn-primary" href="http://localhost:8080/Home" role="button">Home Page</a>
