Bootstrap 3.3.7学习笔记8

发现官方文档把我之前学习笔记里面的内容基本涵盖的挺好。只需要列出需要参考的章节再补上一些自己的理解就很不错了，所以let’s do it.
下一个内容是表单
知识点：

1. 关于.form-control,它的基本样式为

   .form-control {  display: block;  width: 100%;  height: 34px;  padding: 6px 12px;  font-size: 14px;  line-height: 1.42857143;  color: #555;  background-color: #fff;  background-image: none;  border: 1px solid #ccc;  border-radius: 4px;  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}

   可见除了宽度会盛满父元素的所有之外，高度也是有点高得吓人。所以它并不适用于一些checkbox之类的吧！input的type属性可能值：button, checkbox，file，hidden，image，password，radio，reset，submit，text。
   除了可以用在input标签上还可以在下拉菜单select以及textarea中出现。

2. .form-group是为了什么出现的类呢？我觉得是为了让表单中的各个控件能在纵向上合理排列，留出空隙而存在的。所以官方推荐将select，input，label，textarea都包括在一个<div class=”form-group”>中会更好看。
   另外在水平排列的form中，即

   <form class="form-horizontal">  <div class="form-group form-group-lg">    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>    <div class="col-sm-10">      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">    </div>  </div></form>

   通过添加 .form-group-lg 或 .form-group-sm 类，为 label +表单控件快速设置尺寸。如上面代码里那样，或者看这里。这里面还提到了.input-lg.input-sm两个更改select，textarea，input高度的类。

3. 鉴于官方文档没有给出textarea的例子，这里写一个

   <form role="form">  <div class="form-group">     /*? controls height*/    <textarea class="form-control" rows="?"></textarea>  </div></form> 

4. .checkbox,.radio是专门给label+checkbox以及label+radio组合控制格式的，比如对齐。它们的用法是

   <div class="checkbox">    <label>        <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">    </label></div><div class="radio">    <label>        <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">    </label></div>

   还有两个专门让checkbox和radio同行显示的类，但它们不是给div加上的，而是直接给label加的，这点有点奇怪。用法是：

   <form role="form">   <div class="form-group">    <label class="radio-inline">      <input name="gender" type="radio"  value="option1">男性    </label>    <label class="checkbox-inline">      <input type="checkbox"  value="option2">中性    </label>  </div></form>

5. bootstrap中的按钮都推荐使用button标签实现，而不用input中提到的reset，button， submit实现。
6. 虽然给fieldset打上disabled属性之后整块区域内的控件都不能被响应了，可是有一个bug，来源于原本的HTML5，具体表现就是如果fieldset设置了disabled，但legend标签并没有老老实实的按照规定用法来放，它把一些控件也包括在内之后，就会导致这些控件只是颜色变了，但还是对用户点击行为responsive的！