form-inline水平排列
input-lg输入框变大 input-sm输入框变小
颜色设置
表单的各种伪类
表单
<form class=""></form>
.form-inline
<div class=""></div>
.form-group
.has-success 代表状态
.has-warning
.has-error
<input class="" />
.form-cotrol
.input-lg
.input-sm
<label class=""></label>
.sr-only 标签消失
.control-label
form-inline :表单元素一行显示
input-lg:输入框更大
inout-sm:输入框更小
form->form-inline 它的所有元素是内联的,向左对齐的,标签是并排的,水平排版 div->form-group 将label和input(或其他)组合成一个组件 input->input-lg/sm 改变输入框大小 html5特性: placeholder 给用户输入一个提示 input->form-control 圆角方框发光 label->sr-only 取消提示信息 label-> control-label 可更改相关样。
bootstrap中的表达:
bootstrap给HTML大部分表单都设置了默认样式,我们可以给表单添加相应类名,以实现表单的水平排列,个性化定制等。
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" >
</div>
<div class="form-group">
<select class="form-control"></select>
</div>
<div class="form-group">
<input type="textarea" class="form-control">
</div>
</form>
jsp中input-lg、input-sm类不明显或不起作用
给类名form-group的div添加类has-error等类,并给label标签添加control-label类名后,jsp不起作用
form->form-inline 它的所有元素是内联的,向左对齐的,标签是并排的,水平排版 div->form-group 将label和input(或其他)组合成一个组件 input->input-lg/sm 改变输入框大小 html5特性: placeholder 给用户输入一个提示 input->form-control 圆角方框发光 label->sr-only 取消提示信息 label-> control-label 可更改相关样
bootstrap中的表达:
bootstrap给HTML大部分表单都设置了默认样式,我们可以给表单添加相应类名,以实现表单的水平排列,个性化定制等。
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" >
</div>
<div class="form-group">
<select class="form-control"></select>
</div>
<div class="form-group">
<input type="textarea" class="form-control">
</div>
</form>
jsp中input-lg、input-sm类不明显或不起作用
给类名form-group的div添加类has-error等类,并给label标签添加control-label类名后,jsp不起作用
bootstrap表单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link href="201658254038徐梓洲(Boostrap)/css/bootstrap.min.css"rel="stylesheet"/> <link href="201658254038徐梓洲(Boostrap)/css/bootstrap-theme.css" rel="stylesheet"/> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <form class="form-inline"> <div class="form-group"> <label for="">这是一个输入框:</label> <input type="text" placeholder="这是一个输入框"class="form-control"> </div> <div class="form-group has-warning"> <label for="">这是一个输入框:</label> <select class="form-control" name=""id=""> <option value="">背景</option> <option value="">djfhdj</option> <option value="">djfdfg</option> </select> </div> <div class="form-group has-error"> <label for="">这是一个输入框:</label> <textarea class="form-control " name="" id="" cols="30" rows="10"></textarea> </div> </form> </body> </html>
class="form-control" 组件加特效
<div class="form-group"></div>
<form class="form-inline"></form> /*form里面的容器水平排列
3
2
1
Bootstrap——表单(1): html5特性: placeholder 给用户输入一个提示</br> form->form-inline 它的所有元素是内联的,向左对齐的,标签是并排的,水平排版</br> div->form-group 将label和input(或其他)组合成一个组件</br> input->input-lg/sm 改变输入框大小</br> input->form-control 圆角方框发光</br> label->sr-only 取消提示信息</br> label-> control-label 可更改相关样式</br> div ->form-group ->has-successs/waring has-error等可改变颜色 (label等元素中要有control-label)</br>