如何在 Bootstrap 中创建取消按钮答案

【问题标题】：How to create a Cancel button in Bootstrap如何在 Bootstrap 中创建取消按钮
【发布时间】：2016-02-02 18:41:24
【问题描述】：

我有以下引导标记：

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="username">Username</label>
  <div class="col-md-4">
  <input id="username" name="username" type="text" placeholder="" class="form-control input-md" required="" maxlength="8" value="">
  </div>
</div>

<!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-8">
    <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
    <button id="cancel" name="cancel" class="btn btn-default" value="1">Cancel</button>
  </div>
</div>

当我单击Create Profile 按钮时，表单可以正常工作，让我知道某些字段是“必填”。但是当我单击Cancel 按钮时，由于必填字段不完整，我无法离开表单。

Bootstrap 中是否有表单取消按钮功能？

【问题讨论】：

离开表格是什么意思？你可能需要为按钮编写你自己的 JS 逻辑，检查这个stackoverflow.com/questions/18407832/…
你为什么不在表单之外做一个按钮呢？表单外的取消按钮可以充当“返回”按钮。
实际上，根据@NaturalLam 指向另一个 SO 问题的链接，我只是将onclick="window.location='http://example.com';return false;" 属性添加到按钮标签并获得了所需的结果。谢谢。

标签： html forms twitter-bootstrap-3 cancel-button

【解决方案1】：

将您的代码更改为以下内容：

<!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-8">
    <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
    <a href="/link-to/whatever-address/" id="cancel" name="cancel" class="btn btn-default">Cancel</a>
  </div>
</div>

【讨论】：

如果你这样做，取消和提交在 Bootstrap 中看起来会完全不同，因为一个是链接，另一个是按钮。不是这个想法。
这是正确答案。 btn 类样式链接方式与按钮相同。他们会看起来很像。同时，无论有无 JavaScript，链接都将始终有效。最适合可访问性。没有编码开销。（不过，我会避免使用ids。）
将此更改为将是一个更好的选择。
对于 bootstrap 4 (alpha)，使用btn-secondary 而不是btn-default，否则它看起来不像一个按钮。 @probie：如果您希望链接看起来像一个按钮，请不要使用btn-link。它使按钮看起来像链接，而不是相反。

【解决方案2】：

只需将type属性设置为如下图所示；

<button type="reset" class="btn btn-default pull-right">Cancel</button>

【讨论】：

type="reset" 会将表单重置为原始值，这不是问题发布者所要求的。他们想要一个可以跳转到另一个页面的取消按钮。

【解决方案3】：

如果您想将两个元素都保留为

$('#cancel').click(() => {
    location.href = '../' //returns to parent
})

【讨论】：