Bootstrap CSS布局之表单
1.表单
表单是html网页交互很重要的部分,同时也是BootSTrap框架中的核心内容,表单提供了丰富的样式(基础、内联、横向)
表单的元素
inputtextareaselectcheckboxradio(checkbox和radio是input的特殊类型)
其他标签
formfieldsetlegend
1.1.基础表单
<!--基础表单: 1.向父<form>元素添加role="form"。 2.把标签label和控件放在一个带有class.form-group的<div>中。这是获取最佳间距所必需的。因为form-group提供了margin 3.向所有的文本元素<input>、<textarea>和<select>添加class.form-control。--> <formrole="form"> <fieldset> <legend>用户登录</legend> <divclass="form-group"> <labelfor="name">姓名</label> <inputtype="text"class="form-control"id="name"placeholder="请输入名称"> </div> <divclass="form-group"> <labelfor="psd">密码</label> <inputtype="text"class="form-control"id="psd"placeholder="请输入密码"> </div> <divclass="checkbox"> <label><inputtype="checkbox">记住密码</label> </div> <buttontype="submit"class="btnbtn-default">登录</button> </fieldset> </form>
1.2.内联表单
<!--内联表单: 如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,请向<form>标签添加class.form-inline--> <formrole="form"class="form-inline"> <fieldset> <legend>用户登录</legend> <divclass="form-group"> <labelfor="name">姓名</label> <inputtype="text"class="form-control"id="name"placeholder="请输入名称"> </div> <divclass="form-group"> <labelfor="psd">密码</label> <inputtype="text"class="form-control"id="psd"placeholder="请输入密码"> </div> <divclass="checkbox"> <label><inputtype="checkbox">记住密码</label> </div> <buttontype="submit"class="btnbtn-default">登录</button> </fieldset> </form>
1.3.横向表单
<!--横向表单: 1.向父<form>元素添加class.form-horizontal。 2.把标签和控件放在一个带有class.form-group的<div>中。 3.向标签添加class.control-label。 4.要实现横向表单,还要用栅格类--> <formrole="form"class="form-horizontal"> <fieldset> <legend>用户登录</legend> <divclass="form-group"> <labelclass="control-labelcol-lg-1"for="name">姓名</label> <divclass="col-lg-10"> <inputtype="text"class="form-control"id="name"placeholder="请输入名称"> </div> </div> <divclass="form-group"> <labelclass="control-labelcol-lg-1"for="psd">密码</label> <divclass="col-lg-10"> <inputtype="text"class="form-control"id="psd"placeholder="请输入密码"> </div> </div> </fieldset> </form>
1.4.表单控件
input元素:
使用input元素的时候,必须声明type类型,否则可能引起问题。
select元素:
多行选择设置multiple=”multiple”
textarea元素:
textarea元素定义了rows数字即可定义大文本框的高度,cols宽度。但是textarea应用了form-control央视,则cols无效。
checkbox和radio(是两个特殊的type)
注意使用的时候,每个input外部用label包住,并且在最外层用容器元素宝珠,并应用相应的.checkbox和.radio样式。
//使用 <divclass="checkbox"> <label><inputtype="checkbox">学习前端</label> </div> <divclass="radio"> <label><inputtype="radio"name="optionsRadios"value="male">男生</label> </div> <divclass="radio"> <label><inputtype="radio"name="optionsRadios"value="female">女生</label> </div>
//源码 //让单选框和复选框都能左右和上下居中 .radio, .checkbox{ position:relative; display:block; margin-top:10px; margin-bottom:10px; } //内部有label的话,内联显示 .radiolabel, .checkboxlabel{ min-height:20px; padding-left:20px; margin-bottom:0; font-weight:normal; cursor:pointer; }
同时可以内联显示,在labelshang添加checkbox-inline或者radio-inline
1.5.空间状态
焦点状态、禁用状态、验证提示状态
焦点状态:
当输入框input接收到:focus时,输入框的轮廓会被移除,同时应用box-shadow。
禁用状态:
对添加disabled属性来禁用内的所有控件。
验证提示状态:
Bootstrap包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的class(.has-warning、.has-error或.has-success)即可使用验证状态。
–对文字、边框和阴影设置的颜色不同
<divclass="form-grouphas-warning"> <labelfor="inputWarning"class="control-label">输入长度不够!</label> <inputtype="text"class="form-control"> </div> <divclass="form-grouphas-error"> <labelfor="inputError"class="control-label">输入不符合要求!</label> <inputtype="text"class="form-control"> </div> <divclass="form-grouphas-successhas-feedback"> <labelfor="inputSuccess"class="control-label">输入文本符合要求!</label> <inputtype="text"class="form-control"id="inputSuccess"> <spanclass="glyphiconglyphicon-okform-control-feedback"></span> </div>
//相对定位,用于设置input元素的父容器的定位方式 .has-feedback{ position:relative; } //右内边距的设置,以便可以显示小图标 .has-feedback.form-control{ padding-right:42.5px; } //设置小图标的显示方式 .form-control-feedback{ position:absolute;//绝对定位 top:0; right:0;//右对齐 z-index:2; display:block; width:34px; height:34px; line-height:34px; text-align:center; pointer-events:none; } .input-lg+.form-control-feedback, .input-group-lg+.form-control-feedback, .form-group-lg.form-control+.form-control-feedback{ width:46px; height:46px; line-height:46px; } .input-sm+.form-control-feedback, .input-group-sm+.form-control-feedback, .form-group-sm.form-control+.form-control-feedback{ width:30px; height:30px; line-height:30px; } .has-success.help-block, .has-success.control-label, .has-success.radio, .has-success.checkbox, .has-success.radio-inline, .has-success.checkbox-inline, .has-success.radiolabel, .has-success.checkboxlabel, .has-success.radio-inlinelabel, .has-success.checkbox-inlinelabel{ color:#3c763d; } .has-success.form-control{ border-color:#3c763d; -webkit-box-shadow:inset01px1pxrgba(0,0,0,.075); box-shadow:inset01px1pxrgba(0,0,0,.075); } .has-success.form-control:focus{ border-color:#2b542c; -webkit-box-shadow:inset01px1pxrgba(0,0,0,.075),006px#67b168; box-shadow:inset01px1pxrgba(0,0,0,.075),006px#67b168; } .has-success.input-group-addon{ color:#3c763d; background-color:#dff0d8; border-color:#3c763d; } .has-success.form-control-feedback{ color:#3c763d; }
1.6.空间大小
input-lg/input-sm
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。