输入框
通过制定类名.form-control实现一些设计上的定制效果
1.宽度变成了100%
2.设置了一个浅灰色(#ccc)的边框
3.具有4px的圆角
4.设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
5.设置了placeholder的颜色为#999
<input type="text" class="form-control">
下拉选择框
通过设置multtiple属性为multtiple。bootstrap会为这些元素提供统一的风格样式
<select multiple class="form-control">
<option value="">1</option>
<option value="">2</option>
</select>
文本域
通过添加类名.form-control设置宽度为100%或auto
<textarea class="form-control"></textarea>
复选框和单选按钮
通过类名.checkbox和.radio样式处理标签对齐方式
<div class="checkbox">
<label>
<input type="checkbox" value="">
记住密码
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option" checked/>喜欢
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option"/>不喜欢
</label>
</div>
基本按钮
通过类名.btn实现
<input type="button" class="btn" value="基本按钮">
不同风格按钮
<div class="btn btn-primary">主要按钮</div>
<div class="btn btn-success">成功按钮</div>
<div class="btn btn-info">信息按钮</div>
<div class="btn btn-warning">警告按钮</div>
<div class="btn btn-danger">危险按钮</div>
<div class="btn btn-link">链接按钮</div>
按钮大小
<div class="btn btn-primary btn-lg">大按钮</div>
<div class="btn btn-primary btn-sm">小按钮</div>
<div class="btn btn-primary btn-lg btn-block">块状按钮</div>
内联表单
在form上使用类名.form-inline
<form class="form-inline">
<div class="form-group">
<label class="col-4">用户名</label>
<div class="col-8">
<input type="text" class="form-control">
</div>
</div>
</form>
注:
label会导致input换行,并不想换行需要将将label放在容器form-group中
图标
bootstrap3图标地址https://getbootstrap.com/docs/3.3/components/