SOURCE

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="http://salpadding-img.nos-eastchina1.126.net/image/jpg/timg3.jpg" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Go somewhere</a>
  </div>
</div>

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

// 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
a{
  color: $primary;
  text-decoration: none;
  &:hover, &:focus{
    text-decoration: underline;
  }
}
ul, ol{
  list-style: none;
}
.list-group{
  display: flex;
  flex-direction: column;
  padding: 0;  
  margin: 0;
}
.list-group-item{
  margin: 0;
  margin-bottom: -1px;
  padding: .75rem 1.25rem;
  border: 1px solid rgba(#000, .125);
  
}
$card-spacer-x: 1.25rem;
$card-spacer-y: .75rem;
.card{
  display: flex;
  flex-direction: column;
  background: #fff;
  
  border: 1px solid rgba(#000, .125);
  border-radius: .25rem;
  > list-group:first-child{
    list-group-item:first-child{
      border-top-left-radius: .25rem;
      border-top-right-radius: .25rem;
    }
  }
  > list-group:last-child{
    list-group-item:last-child{
      border-bottom-left-radius: .25rem;
      border-bottom-right-radius: .25rem;
    }
  }
}
.card-header{
  padding: $card-spacer-y $card-spacer-x;
  background: rgba(#000, .03);
  border-bottom: 1px solid rgba(#000, .125);
  &:first-child{
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0 ;
  }
}
.card-footer{
  padding: $card-spacer-y $card-spacer-x;
  background: rgba(#000, .03);
  border-bottom: 1px solid rgba(#000, .125);
  &:last-child{
    border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
  }  
}
.card-body{
  padding: $card-spacer-y $card-spacer-x;
  flex: 1 1 auto;
}
.card-title{
  margin-bottom: $card-spacer-y;
}
.card-subtitle{
  margin-top: -$card-spacer-y / 2;
  color: $gray-600;
}
.card-link{
  &:hover{
    text-decoration: none;
  }
  + .card-link{
    margin-left: $card-spacer-x;
  }
}
.card-img{
  width: 100%;
  border-radius: .25rem;
}
.card-img-top{
  // 防止图片被拉伸
  width: 100%;
  border-radius: .25rem .25rem 0 0 ;
}
.card-img-bottom{
  width: 100%;
  border-radius: 0 0 .25rem .25rem;
}
.card-img-overlay{
  position: absolute;
  top:0;bottom:0;left:0;right:0;
  padding: $card-spacer-x;
}