ch03-表单和图片的课件.pptVIP

第3章表单和图片表单图片教学内容一．表单表单1.基本格式//实现基本的表单样式formdivclass=form-grouplabel电子邮件/labelinputtype=emailclass=form-controlplaceholder=请输入您的电子邮件/divdivclass=form-grouplabel密码/labelinputtype=passwordclass=form-controlplaceholder=请输入您的密码/div/form表单2.内联表单//让表单左对齐浮动，并表现为inline-block内联块结构formclass=form-inline注：当小于768px，会恢复独占样式3.表单合组//前后增加片段divclass=input-groupdivclass=input-group-addon￥/divinputtype=textclass=form-controldivclass=input-group-addon.00/div/div说明：只有正确设置了输入框的type类型，才能被赋予正确的样式。支持的输入框控件包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。表单4.复选框和单选框1）设置复选框，在一行，class=checkbox?divclass=checkbox label inputtype=checkbox体育 /label label inputtype=checkbox音乐 /label label inputtype=checkbox绘画 /label /div?表单2）设置单选框divclass=radio label inputtype=radioname=sex /label label inputtype=radioname=sex女 /label/div?表单5.下拉列表//设置下拉列表? selectclass=form-control optionvalue=a/option optionvalue=b/option optionvalue=c/option optionvalue=d/option /select?表单6.校验状态设置为错误状态，单击类型为邮箱的输入框可看到效果。divclass=form-grouphas-error label电子邮件:/label inputtype=emailclass=form-controlplaceholder=请输入您的电子邮箱//div注：还有其他状态如下样式说明has-error错误状态has-success成功状态has-warning警告状态??表单7.添加额外的图标//文本框右侧内置文本图标，class=”form-control-feedback”Feedback:反馈?divclass=has-feedbackstyle=margin-bottom:10px; selectclass=form-control optiona1/option optiona2/option optiona3/option optiona4/option /selectspanclass=glyphiconglyphicon-okform-control-feedback/span/div样式说明glyphicon-ok成功状态glyphicon-warning-sign警告状态glyphicon-remove错误状态注：除了glyphicon-ok外，还有几个如下表：表单8.控制尺寸//从大到小，input-lg，input-sm?inputtype=passwordclass=form-controlinput-lginputtype=passwordclass=form-controlinput-sm注：也可以设置父元素form-group-lg、form-group-sm，来调整。二．图片图片1.图片形状//三种形状imgsrc=img/pic.jpgtitle=图片1class=img-rounded/ imgsrc=img