静态控件

在表单中，当你需要在一个label元素的后面放置纯文本时，请在 <p>元素上添加.form-control-static类。如：

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

效果如图 2‑58所示：

图2-58 堆叠静态控件

静态控件同样适用于行内表单。如：

1. <form class="form-inline">
2.   <div class="form-group">
3.     <label class="sr-only">Email</label>
4.     <p class="form-control-static">email@example.com</p>
5.   </div>
6.   <div class="form-group">
7.     <label for="inputPassword2" class="sr-only">Password</label>
8.     <input type="password" class="form-control" id="inputPassword2">
9.   </div>
10.   <button type="submit" class="btn btn-default">Confirm identity</button>
11. </form>

效果如图 2‑59所示：

图2-59 行内静态控件

关于作者

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