首页 > 网站 > WEB开发 > 正文

9.表单

2024-04-27 15:05:10
字体:
来源:转载
供稿:网友
form-control 让文本框宽度为100%,并且还添加了一些其他样式,如文本框变成了圆角,并且点击时边缘发光;btn 改变按钮的样式;form-group 在表单外围添加一层div,并且使表单之间有一个合适的距离;form-inline form的class属性,让表单在一行显示,当宽度小于768,就不能再一行显示了;form-horizontal 让表单在一行中显示,并且能够改变form-group的样式;control-label 让label里的文字垂直居中对齐;checkbox checkbox的样式设置;checkbox-inline 让几个checkbox在一行显示;radio-inline 同上;has-success 让文本框显示特别的颜色;用于验证通过或者警告等,下同;has-warninghas-error 字体和文本框的颜色都会发生变化;form-group-lg(sm) 可以改变文本框的高度;

代码如下:

<div class="container"> <div class="row"><!-- <form action="#" class="form-inline">--> <form action="#" class="form-horizontal"> <div class="form-group"><!--在有form-inline属性时可以省略掉。--> <label for="userName" class="col-lg-1 control-label">用户名:</label> <div class="col-lg-6"> <input type="text" id="userName" class="form-control"/> </div> </div> <div class="form-group-lg"><!--form-group后再加上lg,可以改变文本框的高度--> <label for="passWord" class="col-lg-1 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label> <div class="col-lg-6"> <input type="text" id="password" class="form-control"/> </div> </div> <div class="form-group"> <div class="col-lg-6 col-lg-offset-1"> <div class="checkbox"> <label class="checkbox-inline"><input type="checkbox"/>记住名字</label> <label class="checkbox-inline"><input type="checkbox"/>记住密码</label> <label class="checkbox-inline"><input type="checkbox"/>自动登录</label> </div> <div class="radio"> <label><input type="radio"/>自动登录</label> </div> </div> </div> <div class="form-group"> <div class="col-lg-1 col-lg-offset-1"> <input type="button" value="登录" class="btn"/> </div> </div> </form> </div> </div>
上一篇:React概念

下一篇:笔记:HTML实践规范

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表