Bootstrap 表单布局

bootstrap已经使用很久了，但是对于表单布局，尤其是HTML结构嵌套层次还有很多疑问。

所以又翻了一遍官网和资料，总结一下。

本文部分内容翻译自这里.

基本原则

Bootstrap表单控件自动获得一些全局样式，如所有textual <input>，<textarea>以及<select>带类的元素.form-control的宽度为100％。表单布局的基本规则如下;

  • 始终使用<form role="form">，有助于改善使用屏幕阅读器的人的可访问性
  • 用于最佳间距包装标签和表格控件 <div class="form-group">
  • 将类.form-control添加到所有文本<input>,<textarea>和<select>元素

表单垂直布局(vertical form)

垂直布局也是Bootstrap的默认布局，因为我们的浏览器默认的普通流就是从左到右(LTR)，从上到下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html> 
<html lang="en">  
<head>    
<title>My first Bootstrap page </title>    
<meta name="viewport" content="width=device-width, initialscale=1">    
<link href="CSS/bootstrap.min.css" rel="stylesheet">   
<link href="CSS/bootstrap-theme.min.css" rel="stylesheet">    
<script type="text/javascript" src="JS/bootstrap.min.js"></script> 
 </head> 
 <body>
<div class="container" style="max-width:600px;margin:60px auto;">
	<form role="form">
	   <div class="form-group">
	      <label for="name">First name</label>
	      <input type="name" class="form-control" id="fname" placeholder="Enter name">
	   <div class="form-group">

表单水平布局(horizontal form)

水平形式与垂直形式布局的不同之处在于标记量和表单的表示形式。在此表单中，布局标签浮动到输入字段的左侧。标签和输入字段都出现在同一行上。除默认规则外，水平表单的规则，

所有你需要做的就是添加.form-horizontal类的<form> 元素，.control-label类的所有<label>元素。使用Bootstrap的预定义网格类来对齐标签和表单控件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<div class="container" style="max-width:600px;padding:40px 20px;background:#ebeff2">
	<h3>Signup</h3>
	<form class="form-horizontal" role="form">
	   <div class="form-group">
	      <label for="name" class ="control-label col-sm-3">First name</label>
		<div class="col-sm-8">
	      <input type="name" class="form-control" id="name" placeholder="Enter name">
		</div>
	    </div>
	   <div class="form-group">
	      <label for="address" class ="control-label col-sm-3">Second name</label>
		<div class="col-sm-8">
	      <input type="address" class="form-control" id="address" placeholder="Enter address">
		</div>
	   <div class="form-group">
	      <label for="email" class ="control-label col-sm-3">Email</label>
		<div class="col-sm-8">
	      <input type="email" class="form-control" id="email" placeholder="Enter email">
		</div>
	    </div>
	   <div class="form-group">
	      <label for="pwd" class ="control-label col-sm-3">Password</label>
		<div class="col-sm-8">
	      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
		</div>
	    </div>
	   <div class="col-sm-offset-2 col-sm-8">
	     <button type="submit" class="btn btn-default">Register</button>
	   </div>
	</form>
</div>
  • 注意：label元素在水平布局中必须添加.control-label样式。

内联表单(inline form )

Bootstrap的内联表单布局可用于将表单控件并排放置在紧凑的布局中。在内联形式中，所有元素都是直线，左对齐，标签位于旁边。为此，您需要将.form-inline类添加到<form>元素。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form class="form-inline" role="form">
   <div class="form-group">
      <label for="name">Name</label>
	  <input type="name" class="form-control" id="name" placeholder="Enter name">
   </div>
   <div class="form-group">
      <label for="email">Email</label>
	  <input type="email" class="form-control" id="email" placeholder="Enter email">
 </div>
   <div class="form-group">
      <label for="pwd">Password</label>
	  <input type="password" class="form-control" id="pwd" placeholder="Enter password">
   </div>
   <button type="submit" class="btn btn-default">Register</button>
</form>

注意事项

  • .form-group类用于封装组中的多个控件 - 就像我们对标签和相应的文本框所做的那样。
  • .control-label和.form-control类分别用于设置标签和表单元素的样式。
  • 使用.input-group类可以相邻地关联多个控件。
  • 禁用或只读状态可用于控件 - Bootstrap将自动关联必要的样式，但是，所有控件都必须添加.form-control类。
  • 为了控制大小，可以使用.input-lg，.input-sm类。要控制组的大小，可以使用.form-group-lg或.form-group-sm类。
  • 要显示任何帮助文本，可以在单独的标签中使用.help-block类。这将以新的一行显示文本。

静态表单

经常需要静态展示表单信息，所以顺便总结一下静态表单的展示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

参考这里

表单元素校验状态

涉及.input-group-addon .has-feedback .form-control-feedback .has-success .help-block等。

这里有一个bootstrap-validation校验库就是使用这些class样式实现的.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

例子参考这里

bootstrap表格样式class

总结一下bootstrap表格样式class的id，以下内容来自bootstrap的forms.less文件。

表单元素标签样式

Bootstrap内部对如下的标签进行过样式的修饰。

fieldset

legend

label

input[type=”search”]

input[type=”radio”]

input[type=”checkbox”]

input[type=”file”]

input[type=”range”]

select[multiple]

select[size]

output

select

textarea

input[type=”text”]

input[type=”password”]

input[type=”datetime”]

input[type=”datetime-local”]

input[type=”date”]

input[type=”month”]

input[type=”time”]

input[type=”week”]

input[type=”number”]

input[type=”email”]

input[type=”url”]

input[type=”search”]

input[type=”tel”]

input[type=”color”]

表单样式class

.form-inline

.form-horizontal

.control-label

.form-control

  • focus
  • disabled
  • readonly

.form-control-static

静态表单展示使用

.form-group

  • .form-group-sm
  • .form-group-lg

.input-group (input-groups.less)

  • .input-group-addon

  • .input-group-btn

  • .input-sm

  • .input-lg

  • .input-group-lg
  • .input-group-sm

参考这里

.radio和.checkbox

  • .radio
  • .radio-inline
  • .checkbox
  • .checkbox-inline

参考这里

form-control的add-on系列

  • .has-feedback
  • .form-control-feedback
1
2
3
4
5
6
7
8
9
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

参考这里

.help-block

.help-block主要给表单做一些说明性的文字

<legend>和<fieldset>的使用

<legend>的使用

<legend>：主要用来添加表单标题说明的.

<fieldset>使用

<fieldset>标签平时使用比较少，主要用在，当表单元素比较多，不同的表单元素需要进行分组，这时比较方便，而且对于分组表单元素进行统一的禁用时。

注意：浏览器兼容性问题

1
2
> <fieldset disabled="disabled">内部的表单元素都被禁用</fieldset>
>

例子参考这里：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<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>Example of Bootstrap 3 Disabled Fieldsets</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<style type="text/css">
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <form class="form-horizontal">
        <legend>登录信息</legend>
        <fieldset disabled="disabled">
            <div class="form-group">
                <label for="inputEmail" class="control-label col-xs-2">Email</label>
                <div class="col-xs-10">
                    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="control-label col-xs-2">Password</label>
                <div class="col-xs-10">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                    <div class="checkbox">
                        <label><input type="checkbox"> Remember me</label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                    <button type="submit" class="btn btn-primary">Login</button>
                </div>
            </div>
        </fieldset>
    </form>
</div>
</body>
</html>

参考资料

http://stacktips.com/tutorials/bootstrap/vertical-horizontal-and-inline-form-example-in-bootstrap

https://v3.bootcss.com/css/#forms

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/

https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-forms.php