bootstrap之input-group&label样式

一、前言

现在开始介绍bootstrap的输入框组(input-group)和标签(label) 样式。

二、源码

1、input-groups.less

1.1、input-groups.less源码

 //
 // Input groups
 // --------------------------------------------------

 // Base styles
 // -------------------------
 .input-group {
   position: relative; // For dropdowns
   display: table;
   border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table

   // Undo padding and float of grid classes
   &[class*="col-"] {
     float: none;
     padding-left: 0;
     padding-right: 0;
   }

   .form-control {
     // Ensure that the input is always above the *appended* addon button for
     // proper border colors.
     position: relative;
     z-index: 2;

     // IE9 fubars the placeholder attribute in text inputs and the arrows on
     // select elements in input groups. To fix it, we float the input. Details:
     // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
     float: left;

     width: 100%;
     margin-bottom: 0;

     &:focus {
       z-index: 3;
     }
   }
 }

 // Sizing options
 //
 // Remix the default form control sizing classes into new ones for easier
 // manipulation.

 .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn > .btn {
   .input-lg();
 }
 .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon,
 .input-group-sm > .input-group-btn > .btn {
   .input-sm();
 }


 // Display as table-cell
 // -------------------------
 .input-group-addon,
 .input-group-btn,
 .input-group .form-control {
   display: table-cell;

   &:not(:first-child):not(:last-child) {
     border-radius: 0;
   }
 }
 // Addon and addon wrapper for buttons
 .input-group-addon,
 .input-group-btn {
   width: 1%;
   white-space: nowrap;
   vertical-align: middle; // Match the inputs
 }

 // Text input groups
 // -------------------------
 .input-group-addon {
   padding: @padding-base-vertical @padding-base-horizontal;
   font-size: @font-size-base;
   font-weight: normal;
   line-height: 1;
   color: @input-color;
   text-align: center;
   background-color: @input-group-addon-bg;
   border: 1px solid @input-group-addon-border-color;
   border-radius: @input-border-radius;

   // Sizing
   &.input-sm {
     padding: @padding-small-vertical @padding-small-horizontal;
     font-size: @font-size-small;
     border-radius: @input-border-radius-small;
   }
   &.input-lg {