Html 如何在 Bootstrap 中创建取消按钮
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/33485113/
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 create a Cancel button in Bootstrap
提问by H. Ferrence
I have the following Bootstrap markup:
我有以下 Bootstrap 标记:
<!-- 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>
When I click the Create Profile
button the form works fine letting me know that certain fields are "Required". But when I click the Cancel
button I cannot leave the form due to incomplete required fields.
当我单击Create Profile
按钮时,表单工作正常,让我知道某些字段是“必需的”。但是当我点击Cancel
按钮时,由于不完整的必填字段,我无法离开表单。
Is there a form cancel button capability in Bootstrap?
Bootstrap 中是否有表单取消按钮功能?
回答by Adrian Chrostowski
Change your code to the following:
将您的代码更改为以下内容:
<!-- 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>
回答by Emmanuel Aninze
simply set the type attribute to reset as shown below;
只需将 type 属性设置为 reset ,如下所示;
<button type="reset" class="btn btn-default pull-right">Cancel</button>
<button type="reset" class="btn btn-default pull-right">Cancel</button>