如何把一个链接上一个自举按钮？

如何将一个链接放在一个引导按钮上？

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

第一个不适合我，没有按钮显示，只是文本与链接，有一种感觉它的主题 IM 使用。

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

干杯

399461 次浏览
小开
最佳答案

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

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

如果你真的不需要按钮元素，只需要将类移动到一个常规链接:

<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测试版中，例如 btn-primary-outline改为 btn-outline-primary

小开

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

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

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

小开

我就是这么破案的

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

只需添加以下代码即可;

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

我认为最简单和干净的方法是(没有任何额外的 javascript 函数) :

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

要使用好看的字体图标，你只需要在你的页眉中添加以下链接:

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

仅此而已

小开

正如你要求与 Bootstrap，最好的选择在我看来是选择类 Btn-link。

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

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

小开

只要使用锚标记作为一个按钮。

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

如果你真的需要按钮元素，我发现了一个不错的技巧，让它看起来像这样:

  • 使用要重定向的 URL 创建一个 data 属性
  • 附加一个事件侦听器以从元素的 data 属性获取 URL
  • 使用 window.Open 或您首选的方法打开 URL

HTML 文件

<button type="button" id="newpagebutton" class="btn btn-primary mt-4 ml-3">Open new page</button>

Javascript 文件

$( "#newpagebutton" ).attr('data-buttonlink', 'https://www.apple.com')




$( "#newpagebutton" ).click(function() {
const buttonlink = $("#newpagebutton").data('buttonlink')


window.open(buttonlink)
});

看看在 小提琴上的实现是如何工作的

小开 

<div>
<a href='#' className='text-decoration-none'>
<button className="btn btn-primary btn-lg px-5 d-flex justify-content-center" type='submit'>Sign In</button>
</a>
</div>


提交答案