bootstrap学习11--表单(下)

来源:互联网 发布:mysql session 编辑:程序博客网 时间:2024/06/14 17:45

校验状态

.has-success,.has-warn 等 


.form-control 这个类在表单控制中非常关键,很多的控件效果 都是基于这个类的定义之下才显示出来效果的。

添加额外的图标


.has-feedback

反馈图标(feedback icon)只能使用在文本输入框 <input class="form-control"> 元素上。 只能使用在文本框上!!!!


<div class="form-group has-success has-feedback">  <label class="control-label" for="inputSuccess2">Input with success</label>  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>  <span id="inputSuccess2Status" class="sr-only">(success)</span></div>
利用字体图标 glyphicon glyphicon-* 设定图标 
form-control-feedback 修饰具体控件
<div class = "input-group">
<span class="input-group-addon" >@</span>
</div>

控件尺寸

.input-lg .input-sm 


水平排列的按钮组和表单组的尺寸 


.form-group-lg 或 .form-group-sm 


调整列(column)尺寸


用栅格系统中列 包裹输入元素 可以轻松设置输入框的宽度

<div class="col-xs-2">    <input type="text" class="form-control" placeholder=".col-xs-2">  </div>





原创粉丝点击