Bootstrap3 表单

表单

Bootstrap 为表单和表单控件提供了一些全局样式，不需要添加任何辅助类，即可让表单使用默认布局。默认布局中，表单元素采用垂直布局，标签和输入框采用顶对齐方式。

Bootstrap 中创建表单的基本步骤如下：

• 为每个表单控件<input>、<textarea>和<select>元素添加 .form-control类；
• 把成对的 <label> 和表单控件包裹在 .form-group的 <div> 中；
• 将这些应用了.form-group类的 <div> 放到 <form> 中。

如，以下代码创建一个基本表单：

1. <form>
2.   <div class="form-group">
3.     <label for="email">Email address</label>
4.     <input type="email" class="form-control" id="email" placeholder="Email">
5.   </div>
6.   <div class="form-group">
7.     <label for="pass">Password</label>
8.     <input type="password" class="form-control" id="pass" placeholder="password">
9.   </div>
10.   <div class="form-group">
11.     <label for="exampleInputFile">File input</label>
12.     <input type="file" id="exampleInputFile">
13.     <p class="help-block">Example block-level help text here.</p>
14.   </div>
15.   <div class="checkbox">
16.     <label>
17.       <input type="checkbox"> Check me out
18.     </label>
19.   </div>
20.   <button type="submit" class="btn btn-default">Submit</button>
21. </form>

Bootstrap为.form-control类设置了 display: block，因此每个设置了.form-control类的表单控件都各自独占一行，并且宽度为100%;。效果如图 2‑47所示：

图2-47 表单的默认布局

在大多数情况下，每个控件独占一行的布局都工作地很好，但在实际应用中，有时候我们却需要在一行内放置多个控件。由于在栅格系统中，一行内可以放置多个列。因此，可以把控件放在栅格系统的列中，来实现在一行内放置多个控件。如：

1. <form>
2.   <div class="form-group">
3.     <div class="col-xs-3">
4.       <input type="text" class="form-control" placeholder=".col-xs-3">
5.     </div>
6.     <div class="col-xs-4">
7.       <input type="text" class="form-control" placeholder=".col-xs-4">
8.     </div>
9.     <div class="col-xs-5">
10.       <input type="text" class="form-control" placeholder=".col-xs-5">
11.     </div>
12.   </div>
13. </form>

效果如图 2‑48所示：

图2-48 一行多个控件

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。