首页 / CSS / Bootstrap CSS布局之表单
Bootstrap CSS布局之表单
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Bootstrap CSS布局之表单，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5929字，纯文字阅读大概需要9分钟。
内容图文
1. 表单
表单是html网页交互很重要的部分，同时也是BootSTrap框架中的核心内容，表单提供了丰富的样式(基础、内联、横向)
表单的元素
input textarea select checkbox radio(checkbox和radio是input的特殊类型)
其他标签
form fieldset legend
1.1.基础表单
<!--基础表单： 1.向父 <form> 元素添加 role="form"。 2.把标签label和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。因为form-group提供了margin 3.向所有的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。--> <form role="form"> <fieldset> <legend>用户登录</legend> <div class="form-group"> <label for="name">姓名</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div> <div class="form-group"> <label for="psd">密码</label> <input type="text" class="form-control" id="psd" placeholder="请输入密码"> </div> <div class="checkbox"> <label><input type="checkbox">记住密码</label> </div> <button type="submit" class="btn btn-default">登录</button> </fieldset> </form>
1.2.内联表单
<!-- 内联表单：
如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline -->
<form role="form" class="form-inline">
<fieldset>
<legend>用户登录</legend>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="psd">密码</label>
<input type="text" class="form-control" id="psd" placeholder="请输入密码">
</div>
<div class="checkbox">
<label><input type="checkbox">记住密码</label>
</div>
<button type="submit" class="btn btn-default">登录</button>
</fieldset>
</form>
1.3.横向表单
<!-- 横向表单：
1.向父 <form> 元素添加 class .form-horizontal。
2.把标签和控件放在一个带有 class .form-group 的 <div> 中。
3.向标签添加 class .control-label。
4.要实现横向表单，还要用栅格类-->
<form role="form" class="form-horizontal">
<fieldset>
<legend>用户登录</legend>
<div class="form-group">
<label class="control-label col-lg-1" for="name">姓名</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-1" for="psd">密码</label>
<div class="col-lg-10">
<input type="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样式。
//使用 <div class="checkbox"> <label><input type="checkbox">学习前端</label> </div> <div class="radio"> <label><input type="radio" name="optionsRadios" value="male">男生</label> </div> <div class="radio"> <label><input type="radio" name="optionsRadios" value="female">女生</label> </div>
//源码
//让单选框和复选框都能左右和上下居中
.radio,
.checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
//内部有label的话，内联显示
.radio label,
.checkbox label {
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）即可使用验证状态。
–对文字、边框和阴影设置的颜色不同
<div class="form-group has-warning"> <label for="inputWarning" class="control-label">输入长度不够!</label> <input type="text" class="form-control"> </div> <div class="form-group has-error"> <label for="inputError" class="control-label">输入不符合要求！</label> <input type="text" class="form-control"> </div> <div class="form-group has-success has-feedback"> <label for="inputSuccess" class="control-label">输入文本符合要求！</label> <input type="text" class="form-control" id="inputSuccess"> <span class="glyphicon glyphicon-ok form-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.radio label,
.has-success.checkbox label,
.has-success.radio-inline label,
.has-success.checkbox-inline label {
color: #3c763d;
}
.has-success .form-control {
border-color: #3c763d;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.has-success .form-control:focus {
border-color: #2b542c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #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布局之表单全部内容，希望文章能够帮你解决Bootstrap CSS布局之表单所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。