表单布局

垂直或基本表单

基本的表单结构时BootStrap自带的,创建基本表单的步骤如下:

  • 向父<form>元素添加role = “form”
  • 为了获取最佳的间距,把标签和控件放在一个div.form-group中,div放在父form下;
  • 向所有的文本元素<input><textarea><select>添加.form-control
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta charset="utf-8">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body> <form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" name="name-text" placeholder="请输入你的名称">
</div>
</form> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

添加了form-controlClass的input会和label分为两行,并且获得焦点时会有蓝色的边框样式。

内联表单

内联表单中所有的元素都是内联的,标签都是并排的

  • <form>标签中添加classfrom-inline;
  • 每个表单需要被包含在div.form-group,checkbox可以包含在div.checkbox,radio可以包含在div.radio;
  • 默认情况下,bootstrap中的inputselecttextarea有100%宽度,使用内联表单时,可以设置表单控件的宽度来设置;
  • 对标签描述添加sr-only可以隐藏标签描述。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta charset="utf-8">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body> <form class="form-inline" role="form">
<div class="form-group">
<label class = "sr-only" for="name">名称</label>
<input type="text" class="form-control" id="name" name="name-text" placeholder="请输入你的名称" style="width: 170px">
</div>
<div class="form-group">
<input type="file" name="inputfile" style="width: 170px">
</div>
<label>
<input type="checkbox" class="checkbox">请打勾
</label>
</form> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

水平表单

  • 向父<form>添加类form-horizontal;
  • 把标签和空间放在一个 div,form-group<div>中;
  • 向标签添加class control-label.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta charset="utf-8">
<!-- 引入 Bootstrap -->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body> <!--父元素添加form-horizontal类-->
<form class="form-horizontal" role="form"> <!--标签和控件放在一个带有 class .form-group 的 <div> 中-->
<div class="form-group"> <!--向标签添加 class .control-label。-->
<label for="username" class="col-sm-2 control-label">名字:</label> <!--控制表单的宽度-->
<div class="col-sm-3">
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
</div> <div class="form-group">
<label for="password" class="col-sm-2 control-label">密码:</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
</div> <div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">请记住我
</label>
</div>
</div>
</div> <div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

支持表单的控件

bootstrap支持常见的表单控件,主要是input,textarea,checkbox,radio和select。

输入框(input)

Bootstrap提供了对所有原生的HTML5的input类型的支持,包括:textpassworddatetimedatetime-localdatemonthtimeweeknumberurlsearchtelcolor

文本框(Textarea)

需要进行多行的输入时,则可以使用文本框textarea。必要时改变rows属性(较少的行 = 较少的盒子,较多的行 = 较多的盒子)。

复选框(Checkbox)和单选框(Radio)

  • 创建表单时,如果想让用户从列表中选择若干选项时,请使用checkbox。如果想限制用户只能选择一个选项,就使用radion
  • 对于一些列的复选框和单选框使用Checkbox-inline或radio-inlie,控制它们显示在同一行上。
      <label class="checkbox-inline">
<input type="radio" name="optionsRadiosinline" id="optionsRaios1" value="option1" >选项1
</label>
<label class="checkbox-inline"> <!--设置checked属性来表示默认被选中-->
<input type="radio" name="optionsRadiosinline" id="optionsRaios2" value="option2" checked="">选项2
</label>

选择框(select)

想让用户从多个选项中进行选择,但是默认的情况下只能选择一个选项时,则使用选择框

  • 使用<select>展示列表选项
  • 使用multiple=“multiple”允许用户选择多个选项

静态控件

当在一个水平表单标签后放置纯文本时,在<p>上使用form-control-static

表单控件状态

  • :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上)时,输入框的轮廓会被移除,同时应用box-shadow。
  • 禁用输入框input,要想禁用一个输入框input,只需要简单的添加disable属性,就会禁用输入框,还会改变输入框的样式和鼠标悬停的样式。
  • 禁用字段集fieldset,对<fieldset>添加disable属性来禁用<fieldset>内的所有控件。
  • 验证状态,对父元素
    简单的添加has-waringhas-errorhas-success即可使用验证状态。
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">禁用</label>
<div class="col-sm-10"> <!--通过对<input>标签简单的添加disbale属性,就能禁止该控件-->
<input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled>
</div>
</div> <!--对<fieldset>添加disabled属性禁用<fieldset>内的所有组件-->
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput" class="col-sm-2 control-label">禁用输入(Fieldset disabled)</label>
<div class="col-sm-10">
<input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
</div>
</div>
<div class="form-group">
<label for="disabledSelect" class="col-sm-2 control-label">禁用选择菜单(Fieldset disabled)</label>
<div class="col-sm-10">
<select id="disabledSelect" class="form-control">
<option>禁止选择</option>
</select>
</div>
</div>
</fieldset> <!--对父元素添加has-success类用于成功消息的验证样式-->
<div class="form-group has-success">
<label class="col-sm-2 control-label" for="inputSuccess">输入成功</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSuccess">
</div>
</div> <!--对父元素添加has-warning类用于警告消息的验证样式-->
<div class="form-group has-warning">
<label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputWarning">
</div>
</div> <!--对父元素添加has-error类用错误消息的验证样式-->
<div class="form-group has-error">
<label class="col-sm-2 control-label" for="inputError">输入错误</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputError">
</div>
</div>
</form>

表单控件的大小

使用input-lg(lg可以替换成md、sm下同)和col-lg-*来设置表单的高度和宽度。

表单帮助文本

表单控件可以在输入框上有一个块级的帮助文本,为了添加一个占用整个宽度的内容快, 在input后使用help-block

      <form role="form">
<span>帮助文本实例</span>
<input class="form-control" type="text">
<p class="help-block">一个较长的文本,超过一行,需要扩展到下一行</p>
</form>