【Bootstrap】html属性顺序的编码规范及表单

一时兴起，想开始写博客了，想保留这份激情，还是行动起来，来的实在。

这应该算是学习笔记或技术笔记类吧，很实用。

首先我们先来看下Bootstrap官方html属性顺序的编码规范：

• class
• id, name
• data-*
• src, for, type, href
• title, alt
• aria-*, role

其次让我们来看下Bootstrap表单：

这里的表单形式主要分为三类分别是基本实例、内联表单和水平排列的表单。

基本实例：

这里主要用到了.form-group、.form-control、.help-block;

.form-group和.form-control样式在表单中是十分常见的。

.help-block样式在表单中起着辅助文本的角色，

辅助文本：针对表单控件的“块（block）”级辅助文本。

[html] view plaincopy

1. <form role="form">  
2.   <div class="form-group">  
3.     <label for="exampleInputEmail1">Email address</label>  
4.     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">  
5.   </div>  
6.   <div class="form-group">  
7.     <label for="exampleInputPassword1">Password</label>  
8.     <input type="password" class="form-control" id="exampleInputPassword1" 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>  

内联表单：

在基本实例的基础上给form标签加上.form-inline样式，基本实例表单就变成了内联表单。

这里主要介绍下.sr-only、.input-group、.input-group-addon、.checkbox

.sr-only:假如你不想让dom元素显示在页面上这就是最好的选择。

.input-group和.input-group-addon是输入框组的混合使用，是不是很给力，如果你想在文本框两端都进行混合使用只需这样子写即可：

[html] view plaincopy

1. <div class="input-group">  
2.   <span class="input-group-addon">$</span>  
3.   <input type="text" class="form-control">  
4.   <span class="input-group-addon">0.00<span>  
5. </div>  

.checkbox:关于.checkbox还有个是.checkbox-inline样式。

[html] view plaincopy

1. <form class="form-inline" role="form">  
2.   <div class="form-group">  
3.     <label class="sr-only" for="exampleInputEmail2">Email address</label>  
4.     <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">  
5.   </div>  
6.   <div class="form-group">  
7.     <div class="input-group">  
8.       <div class="input-group-addon">@</div>  
9.       <input class="form-control" type="email" placeholder="Enter email">  
10.     </div>  
11.   </div>  
12.   <div class="form-group">  
13.     <label class="sr-only" for="exampleInputPassword2">Password</label>  
14.     <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">  
15.   </div>  
16.   <div class="checkbox">  
17.     <label>  
18.       <input type="checkbox"> Remember me  
19.     </label>  
20.   </div>  
21. </form>  

水平排列的表单：

给表单加上.form-horizontal样式就变成了不平排列的表单。

这里主要用到了.col-sm-*和.col-sm-offset-*，具体用法可以看Bootstrap官网的栅格系统。

[html] view plaincopy

1. <form class="form-horizontal" role="form">  
2.   <div class="form-group">  
3.     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>  
4.     <div class="col-sm-10">  
5.       <input type="email" class="form-control" id="inputEmail3" placeholder="Email">  
6.     </div>  
7.   </div>  
8.   <div class="form-group">  
9.     <label for="inputPassword3" class="col-sm-2 control-label">Password</label>  
10.     <div class="col-sm-10">  
11.       <input type="password" class="form-control" id="inputPassword3" placeholder="Password">  
12.     </div>  
13.   </div>  
14.   <div class="form-group">  
15.     <div class="col-sm-offset-2 col-sm-10">  
16.       <div class="checkbox">  
17.         <label>  
18.           <input type="checkbox"> Remember me  
19.         </label>  
20.       </div>  
21.     </div>  
22.   </div>  
23.   <div class="form-group">  
24.     <div class="col-sm-offset-2 col-sm-10">  
25.       <button type="submit" class="btn btn-default">Sign in</button>  
26.     </div>  
27.   </div>  
28. </form>  

实际项目中基本实例和水平排列表单会用得比较多，内联表单更多的会作为搜索条件出现，比如上面是搜索条件下面是一个table，哈哈，你懂的。

我们还会遇到一个问题，假如我们想要纯文本不要文本框这要怎么对齐呢？

这里就要用到静态控件了。

为<p>元素添加.form-control-static类即可。

[html] view plaincopy

1. <form class="form-horizontal" role="form">  
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">[e-mail]</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" placeholder="Password">  
12.     </div>  
13.   </div>  
14. </form>