Bootstrap 给HTML大部分表单都设置了默认样式,我们可以给表单添加相应类名,以实现表单的水平排列,个性化定制等。
代码:
<form>
<div class="form-group">
<label for="">这是一个输入框:</label>
<input type="text" class="form-control" placeholder="这是一个输入框">
</div>
<div class="form-group">
<label for="">这是一个输入框:</label>
<select class="form-control">
<option>北京</option>
<option>北京</option>
<option>北京</option>
</select>
</div>
<div class="form-group">
<label for="">这是一个输入框:</label>
<textarea class="form-control"></textarea>
</div>
</form>
效果:
图片.png
class:
对<form>标签添加:class="form-inline"
可以让它水平排列:
图片.png
对Input设置大小可以添加class:
input-sm
input-lg
应该使用form-group
设置group。
对<label>可以设置sr-only
:隐藏掉提示信息。
对表单控件添加颜色
对form-group添加class:
has-success
has-feedback
has-error
eg:
...
<div class="form-group has-error" >
<label for="">这是一个输入框:</label>
<textarea class="form-control "></textarea>
</div>
</form>
效果:
图片.png
如果让<label>也有颜色的改变,需要对label添加class="control-label"
<div class="form-group has-error" >
<label class="control-label">这是一个输入框:</label>
<textarea class="form-control "></textarea>
</div>
图片.png
表单中的按钮
Bootstrap中的按钮不仅可以用<a>标签去写,也可以使用<button>去写。
<button>的大小:
btn-lg
btn-sm
一般情况下,btn与btn-*结合使用。可以设置样式和颜色:
btn
btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger
示例:
<button class="btn btn-default">default</button>
<button class="btn btn-success">success</button>
<button class="btn btn-info">info</button>
<button class="btn btn-warning">warning</button>
<button class="btn btn-danger">danger</button>
<button class="btn btn-link">danger</button>
效果:
图片.png
使用disabled属性。
<a class="btn btn-info" disabled="disabled">danger</a>
网友评论