bootstrap（三）表单

输入框
通过制定类名.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/