青松008
bootstrap之form样式

一、前言

现在开始介绍bootstrap的表单(forms)样式。
二、源码

1、forms.less

1.1、forms.less源码

 //
 // Forms(表单)
 // --------------------------------------------------

 // Normalize non-controls(定制非表单控件)
 //
 // Restyle and baseline non-control form elements.
 fieldset {
   padding: 0;
   margin: 0;
   border: 0;
   // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
   // so we reset that to ensure it behaves more like a standard block element.
   // See https://github.com/twbs/bootstrap/issues/12359.
   min-width: 0;
 }

 legend {
   display: block;
   width: 100%;
   padding: 0;
   margin-bottom: @line-height-computed;
   font-size: (@font-size-base * 1.5);
   line-height: inherit;
   color: @legend-color;
   border: 0;
   border-bottom: 1px solid @legend-border-color;
 }

 label {
   display: inline-block;
   max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
   margin-bottom: 5px;
   font-weight: bold;
 }

 // Normalize form controls(定制表单控件)
 //
 // While most of our form styles require extra classes, some basic normalization
 // is required to ensure optimum display with or without those classes to better
 // address browser inconsistencies.

 // Override content-box in Normalize (* isn't specific enough)
 input[type="search"] {
   .box-sizing(border-box);
 }

 // Position radios and checkboxes better
 input[type="radio"],
 input[type="checkbox"] {
   margin: 4px 0 0;
   margin-top: 1px \9; // IE8-9
   line-height: normal;
 }
 input[type="file"] {
   display: block;
 }

 // Make range inputs behave like textual form controls
 input[type="range"] {
   display: block;
   width: 100%;
 }

 // Make multiple select elements height not fixed
 select[multiple],
 select[size] {
   height: auto;
 }

 // Focus for file, radio, and checkbox
 input[type="file"]:focus,
 input[type="radio"]:focus,
 input[type="checkbox"]:focus {
   .tab-focus();
 }

 // Adjust output element
 output {
   display: block;
   padding-top: (@padding-base-vertical + 1);
   font-size: @font-size-base;
   line-height: @line-height-base;
   color: @input-color;
 }

 // Common form controls(普通的表单控件)
 //
 // Shared size and type resets for form controls. Apply `.form-control` to any
 // of the following form controls:
 //
 // select
 // textarea
 // input[type="text"]
 // input[type="password"]
 // input[type="datetime"]
 // input[type="datetime-local"]
 // input[type="date"]
 // input[type="month"]
 // input[type="time"]
 // input[type="week"]
 // input[type="number"]
 // input[type="email"]
 // input[type="url"]
 // input[type="search"]
 // input[type="tel"]
 // input[type="color"]
 .form-control {
   display: block;
   width: 100%;
   height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   padding: @padding-base-vertical @padding-base-horizontal;
   font-size: @font-size-base;
   line-height: @line-height-base;
   color: @input-color;
   background-color: @input-bg;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 1px solid @input-border;
   border-radius: @input-border-radius; // Note: This has no effect on s in CSS.
   .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
   .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");

   // Customize the `:focus` state to imitate native WebKit styles.
   .form-control-focus();

   // Placeholder
   .placeholder();

   // Unstyle the caret on `