Bootstrap的form-group form-control input-group button-group

1.设置输入框的上下大小form-group  不直接设置  在外面包围div进行设置

   设置输入框的样式form-control

<form role="form">
    <div class="form-group">
        <input type="email" class="form-control" placeholder="Enter email">
    </div>
</form>

向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。

2.form-control的效果

form-control 将会实现一些设计上的定制效果。
1、宽度变成了100%
2、设置了一个浅灰色（#ccc）的边框
3、具有4px的圆角
4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999

3.input-group:进行组装  

    <div class="col-md-3 col-md-offset-2">
        <!--    input-group进行组装-->
        <div class="input-group">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-plus"></span>
            </span>

            <input type="text" class="form-control">
        </div>
    </div>

4.button-group按钮组

    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮</button>
        <button type="button" class="btn btn-default">按钮</button>
        <button type="button" class="btn btn-default">按钮</button>
    </div>