BootStrap-CSS样式_排版_表单、表单控件

1. 基本表单

form样式:默认不显示,基本表单

form-group样式:表单内设置分组

form-control样式:设置控件并绑定控件默认样式

2. 内联表单

form-inline样式:设置为内联排列表单

3. 水平排列表单

form-horizontal样式:设置为水平排列表单

4. 表单支持控件

type="text":文本框

textarea标签:多行文本框

type="email":包含email正则表达式特性的文本框

type="password":密码特性的文本框

type="file":浏览文件的按钮

type="checkbox":多选框

type="radio":单选框

type="checkbox":单选框

select标签:单行选择下拉控件

select标签+multiple属性:多行选择控件

placeholder属性:placeholder=""默认显示文本

col-sm-offset-2样式:栅格布局,向右偏移两列

radio样式:内置单选样式,默认上下排列,当name属性相同选择时互斥

radio-inline样式:内置单选样式,水平排列,当name属性相同选择时互斥

checkbox-inline:内置复选框样式,默认上下排列

checkbox-inline:内置复选框样式,水平排列

5. 静态控件

form-control-static样式:设置控件为静态

6. 控件状态

disabled样式:设置控件状态为不可交互响应(即不可编辑)

fieldset标签+disabled属性:设置fieldset标签标签内所有控件状态为不可交互响应(即不可编辑),link超链接不包含在范围内(设置link请配合JavaScript来实现)

7. 校验状态

has-success样式:绿色边框,成功校验状态

has-warning样式:黄色边框,危险谨慎校验状态

has-error样式:红色表框,错误校验状态

8. 控件尺寸

input-lg样式:设置大尺寸

不填写:默认尺寸

input-sm样式:设置偏小尺寸

9. 帮助文本

span标签+help-block样式:帮助文本控件




    
    
    
    Bootstrap 101 Template

    
    

    
    
    


    
    

1. 基本表单

Example block-level help text here

2. 内联表单

Example block-level help text here

3. 水平排列表单

4. 表单支持控件

textarea

checkbox\radio

Select控件

5. 静态控件

6. 控件状态

Example block-level help text here

7. 校验状态

8. 控件尺寸

9. 帮助文本

请输入用户名!

 显示效果:

BootStrap-CSS样式_排版_表单、表单控件_第1张图片

BootStrap-CSS样式_排版_表单、表单控件_第2张图片

BootStrap-CSS样式_排版_表单、表单控件_第3张图片

BootStrap-CSS样式_排版_表单、表单控件_第4张图片

你可能感兴趣的:(BootStrap,BootStrap)