SOURCE

(function(){
  // 所有带有叉叉的警告框
	var alertsDismissible = Array.prototype.slice.call(document.querySelectorAll('.alert-dismissible'));
  alertsDismissible.forEach(function(alertDismissible){
    var close = alertDismissible.querySelector('.close');
    if (!close){
      return ;
    }
    // 绑定点击事件，
    close.onclick = function(){
      alertDismissible.classList.remove('show');
      setTimeout(function(){
        alertDismissible.parentElement.removeChild(alertDismissible);
      },500)
    };
  });
})();

  <div class="alert alert-warning alert-dismissible show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below. <a href="" class="alert-link">this is a link</a>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

  <div class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>Holy guacamole!</strong> You should check in on some of those fields below. <a href="" class="alert-link">this is a link</a>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

// 全局颜色变量 没什么好说的
$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);
// global colors

// 警告框的内边距和外边距，边框圆角半径
$alert-margin-bottom: 1rem;
$alert-padding-x: 1.25rem;
$alert-padding-y: .75rem;
$alert-border-radius: .25rem;

// 各种警告框的颜色级别，用于和全局颜色变量组合，生成特定亮度的颜色
// 负数的值表示亮度被提高，看上去会更淡一点。正数的值表示亮度被降低，更上去会更深一点
$alert-background-color-level: -10;
$alert-border-color-level: -6;
$alert-front-color-level: 6;

// 从原始颜色和级别生成颜色，负数会生成更淡的颜色，正数会生成更深的颜色
@function theme-color-level($color-name, $level){
  $base-color : if($level < 0, #fff, #000);
  $level : abs($level);
  @return mix($base-color, map-get($theme-colors, $color-name), $level * 8% )
}

.alert{
  position: relative;
  padding: $alert-padding-y $alert-padding-x;
  margin-bottom: $alert-margin-bottom;
}

.alert-dismissible{
  .close{
    position: absolute;
    right: 0; top: 0;
    padding: $alert-padding-y $alert-padding-x/ 2;
    margin: 0;
  }
}

// 从全局颜色生成警告框的样式类
@each $color-name, $color-value in $theme-colors{
  .alert-#{$color-name}{
    $front-color:theme-color-level($color-name, $alert-front-color-level);
    color: theme-color-level($color-name, $alert-front-color-level);
    background: theme-color-level($color-name, $alert-background-color-level);
    .alert-link{
      color: darken($front-color, 10%);
      font-weight: 700;
      text-decoration: none;
    }
    hr{
      border: 0;
      border-top: 1px solid theme-color-level($color-name, $alert-border-color-level );
    }
  }
}

// 渐入渐出工具类
.fade{
  transition: opacity ease .5s;
  opacity: 0;
  &.show{
    opacity: 1;
  }
}

// 关闭的那个叉叉的样式
.close{
  font-size: 1.5rem;
  line-height: 1rem;
  opacity: .5;
  &:hover, &:focus{
    opacity: .7;
  }
}
// 给用户友好的交互体验
.close:not(disabled):not(.disabled){
  cursor: pointer;
}
// 清除按钮的默认背景色 默认的内边距
button.close{
  padding:0;
  border: 0;
  background: transparent;
}