当前位置：首页 > 资讯 > 技术文档

全面解析Bootstrap表单使用方法（表单按钮）

时间：2022-10-22 18:42 编辑：来源：阅读：
扫一扫，手机访问

摘要：全面解析Bootstrap表单使用方法（表单按钮）

[b]一、多标签支持[/b] 一般制作按钮除了使用<button>标签元素之外，还可以使用<input type="submit">和<a>标签等。同样，在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，唯一需要注意的是，要在制作按钮的标签元素上添加类名“.btn”。

<button class="btn btn-default" type="button">button标签按钮</button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮</a>
<span class="btn btn-default">span标签按钮</span>
<div class="btn btn-default">div标签按钮</div>

[img]http://files.jb51.net/file_images/article/201511/2015112495735254.jpg?2015102495744[/img] [b]二、定制风格[/b] 　　在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现。 [img]http://files.jb51.net/file_images/article/201511/2015112495758281.jpg?201510249585[/img] [img]http://files.jb51.net/file_images/article/201511/2015112495816587.jpg?2015102495824[/img]

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>

[b]三、按钮大小[/b] 　　在Bootstrap框架中，对于按钮的大小，也是可以定制的。　　　　在Bootstrap框架中提供了三个类名来控制按钮大小： [img]http://files.jb51.net/file_images/article/201511/2015112495839073.jpg?2015102495855[/img]

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>

[img]http://files.jb51.net/file_images/article/201511/2015112495933188.jpg?2015102495941[/img] [b]四、块状按钮[/b] 　　Bootstrap框架中提供了一个类名“.btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮称为块状按钮。

<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary btn-block" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

[img]http://files.jb51.net/file_images/article/201511/20151124100005040.jpg?2015102410013[/img] [b]五、按钮禁用状态[/b] 　　在Bootstrap框架中，要禁用按钮有两种实现方式：　　[b]方法1：[/b]在标签中添加disabled属性　　[b]方法2：[/b]在元素标签中添加类名“disabled” 　　[b]两者的主要区别是：[/b] 　　“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等. 　　在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>

[img]http://files.jb51.net/file_images/article/201511/20151124100034623.jpg?2015102410040[/img] 今天再为大家补充一点新知识：[b]Bootstrap表单提示信息[/b] 平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。

<form role="form">
 <div class="form-group has-success has-feedback">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 <span class="help-block">你输入的信息是正确的</span>
 <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
 <div class="form-group has-warning has-feedback">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 <span class="help-block">请输入正确信息</span>
 <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 </div>
 <div class="form-group has-error has-feedback">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">

 <span class="glyphicon glyphicon-remove form-control-feedback"></span>
 </div>
</form>

[img]http://files.jb51.net/file_images/article/201511/20151124100501972.jpg?201510241059[/img] 如果大家还想深入学习，可以点击[url=http://www.1sucai.cn/article/84087.htm]这里[/url]进行学习，再为大家附两个精彩的专题：[url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] 以上就是针对Bootstrap表单按钮的详细介绍，之后还有更多内容会不断更新，希望大家继续关注。

全部评论(0)

上一篇：JS组件Bootstrap按钮组与下拉按钮详解
下一篇：网页自动刷新，不产生嗒嗒声的一个解决方法

资讯排行榜
更多>>