SOURCE

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control disabled" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.


//
// Color system
//

// stylelint-disable
$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;

$grays: () !default;
$grays: map-merge((
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
), $grays);

$blue:    #007bff !default;
$indigo:  #6610f2 !default;
$purple:  #6f42c1 !default;
$pink:    #e83e8c !default;
$red:     #dc3545 !default;
$orange:  #fd7e14 !default;
$yellow:  #ffc107 !default;
$green:   #28a745 !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

$colors: () !default;
$colors: map-merge((
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
), $colors);

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

$theme-colors: () !default;
$theme-colors: map-merge((
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
), $theme-colors);
// reset
label{
  display: inline-block;
  margin-bottom: .5rem;
}
.form-group{
  margin-bottom: 1rem;
}
.form-check{
  
}

//  输入框美化
.form-control{
  display: block;
  width: 100%;
  padding: .375rem .7rem;
  border-radius: .25rem;
  border: 1px solid rgba(#000, .125);
  font-size: 1rem; line-height: 1;
  color: $gray-700;
  background-clip: padding-box;
  background: #fff;
  outline: 0;
  // 内阴影效果
  box-shadow: inset 0 1px 1px 0 rgba(#000, .075);
  // 提高交互友好性
  transition: border-color .15 ease-in-out, box-shadow .15s ease-in-out;
  &:not(.disabled):not(:disabled){
    &:focus, &.focus{
      border-color: lighten($primary, 25%);
      box-shadow: 0 0 0 .2rem rgba($primary, .25);
      // 去掉浏览器的默认样式
      outline: 0;
    }
  }
  // 美化占位文字
  &::placeholder{
    color: $gray-600;
    opacity: .5;
  }
  // 禁用输入框加上灰色背景
  &:disabled, &.disabled{
    background: $gray-200;
    opacity: 1;
  }
}

// 多选框和单选框美化
.form-check{
  position: relative;
  display: block;
  padding-left: 1.25rem;
}
.form-check-input{
  position: absolute;
  margin-left: - 1.25rem;
  margin-top: .3rem;
  &:disabled + label{
    color: $gray-600;
  }
}
.form-check-label{
  margin-bottom: 0;
}


// 淡化小提示
.form-text{
  display: block;
  margin-top: .25rem;
}
.text-muted{
  color: $gray-600;
}

form{
  width: 300px;
}