一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等。
同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名“.btn”。
?
1
2
3
4
5
<
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
>
二、定制风格
在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现。
?
1
2
3
4
5
6
7
<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>
三、按钮大小
在Bootstrap框架中,对于按钮的大小,也是可以定制的。
在Bootstrap框架中提供了三个类名来控制按钮大小:
?
1
2
3
<
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
>
四、块状按钮
Bootstrap框架中提供了一个类名“.btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮称为块状按钮。
?
1
2
3
4
<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>
五、按钮禁用状态
在Bootstrap框架中,要禁用按钮有两种实现方式:
方法1:在标签中添加disabled属性
方法2:在元素标签中添加类名“disabled”
两者的主要区别是:
“.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等.
在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。
?
1
2
<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>
今天再为大家补充一点新知识:Bootstrap表单提示信息
平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>
如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程
以上就是针对Bootstrap表单按钮的详细介绍,之后还有更多内容会不断更新,希望大家继续关注