Bootstrap 3.3.7学习笔记8

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