【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

<form role="form">  

  <div class="form-group">  

    <label for="exampleInputEmail1">Email address</label>  

    <input type=
4000
"email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">  

  </div>  

  <div class="form-group">  

    <label for="exampleInputPassword1">Password</label>  

    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">  

  </div>  

  <div class="form-group">  

    <label for="exampleInputFile">File input</label>  

    <input type="file" id="exampleInputFile">  

    <p class="help-block">Example block-level help text here.</p>  

  </div>  

  <div class="checkbox">  

    <label>  

      <input type="checkbox"> Check me out  

    </label>  

  </div>  

  <button type="submit" class="btn btn-default">Submit</button>  

</form>  

内联表单：

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

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

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

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

[html] view
plaincopy

<div class="input-group">  

  <span class="input-group-addon">$</span>  

  <input type="text" class="form-control">  

  <span class="input-group-addon">0.00<span>  

</div>  

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

[html] view
plaincopy

<form class="form-inline" role="form">  

  <div class="form-group">  

    <label class="sr-only" for="exampleInputEmail2">Email address</label>  

    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">  

  </div>  

  <div class="form-group">  

    <div class="input-group">  

      <div class="input-group-addon">@</div>  

      <input class="form-control" type="email" placeholder="Enter email">  

    </div>  

  </div>  

  <div class="form-group">  

    <label class="sr-only" for="exampleInputPassword2">Password</label>  

    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">  

  </div>  

  <div class="checkbox">  

    <label>  

      <input type="checkbox"> Remember me  

    </label>  

  </div>  

</form>  

水平排列的表单：

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

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

[html] view
plaincopy

<form class="form-horizontal" role="form">  

  <div class="form-group">  

    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>  

    <div class="col-sm-10">  

      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">  

    </div>  

  </div>  

  <div class="form-group">  

    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>  

    <div class="col-sm-10">  

      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">  

    </div>  

  </div>  

  <div class="form-group">  

    <div class="col-sm-offset-2 col-sm-10">  

      <div class="checkbox">  

        <label>  

          <input type="checkbox"> Remember me  

        </label>  

      </div>  

    </div>  

  </div>  

  <div class="form-group">  

    <div class="col-sm-offset-2 col-sm-10">  

      <button type="submit" class="btn btn-default">Sign in</button>  

    </div>  

  </div>  

</form>  

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

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

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

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

[html] view
plaincopy

<form class="form-horizontal" role="form">  

  <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>