标签：control group form 设置 按钮 input

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>
 
————————————————
版权声明：本文为CSDN博主「思维小刀」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/fujian9544/article/details/105463220

标签：control,group,form,设置,按钮,input
来源： https://www.cnblogs.com/webSnow/p/16377509.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。