Bootstrap CSS布局之表单

2024-03-07 07:26:03 55

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Bootstrap CSS布局之表单

热门推荐

随机推荐