Bootstrap--表单

一．表单

Bootstrap 提供了一些丰富的表单样式供开发者使用。

1.基本格式

//实现基本的表单样式

    

        电子邮件
        
    
    

        密码
        
    
 

2.内联表单

//让表单左对齐浮动，并表现为 inline-block 内联块结构

注：当小于 768px，会恢复独占样式

3.表单合组

//前后增加片段

    
￥
    
    
.00

4.水平排列

//让表单内的元素保持水平排列

    

        电子邮件
        

            
        
    
 

注：这里用到了 col-sm 栅格系统，后面章节会重点讲解，而 control-label 表示和
父元素样式同步。

5.复选框和单选框

//设置复选框，在一行

    
        体育
    


    
        音乐
    

//设置禁用的复选框

    
        音乐
    

//设置内联一行显示的复选框

    体育


    音乐

//设置单选框

    
        男
    

6.下拉列表

//设置下拉列表

    1
    2
    3
    4
    5

7.校验状态

//设置为错误状态

注：还有其他状态如下
样式 说明
has-error 错误状态
has-success 成功状态
has-warning 警告状态

任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

//label 标签同步相应状态

Input with success

8.添加额外的图标

//文本框右侧内置文本图标

    电子邮件
    
    

注：除了 glyphicon-ok 外，还有几个如下表：
样式 说明
glyphicon-ok 成功状态
glyphicon-warning-sign 警告状态
glyphicon-remove 错误状态

9.控制尺寸

//从大到小

注：也可以设置父元素 form-group-lg、form-group-sm，来调整。

二．图片

Bootstrap 提供了一些丰富的图片样式供开发者使用。

1.图片形状

//三种形状

//响应式图片

当图片大于父元素的宽度时,图片会缩小到父元素的宽度
max-width: 100%