SOURCE

(function(){
  var dropdowns = document.querySelectorAll('.dropdown');
  dropdowns = Array.prototype.slice.call(dropdowns);
  dropdowns.forEach(function(dropdown){
    var toggler = dropdown.querySelector('.dropdown-toggle');
    var menu = dropdown.querySelector('.dropdown-menu');
    toggler.onclick = function(){
      console.log('xx');
      menu.classList.toggle('show');
    };
  });
})();

<div class="dropdown">
  <button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button> 
  <div class="dropdown-menu show" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</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);
// Color contrast
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$yiq-contrasted-threshold: 150 !default;

// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark: $gray-900 !default;
$yiq-text-light: $white !default;
@function color-yiq($color) {
  $r: red($color);
  $g: green($color);
  $b: blue($color);

  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;

  @if ($yiq >= $yiq-contrasted-threshold) {
    @return $yiq-text-dark;
  } @else {
    @return $yiq-text-light;
  }
}

//reset
body{
  background: #fff;
}
a{
  color: $primary;
  text-decoration: none;
  &.hover, &:hover{
    text-decoration: underline;
  }
}
// 按钮的基本样式 大概就是定义一下内边距，清除下浏览器的默认背景
.btn{
  display: inline-block;
  padding: .75rem 1rem;
  vertical-align: middle;
  text-align: center;
  line-height: 1;
  word-wrap: break-word;
  background: transparent;
  border-radius: .25rem;
  outline: 0;
  // 和用户交互有关的样式
  &.disabled{
    opacity: .5;
  }
  &:not(.disabled):not(:disabled){
    &:hover, &.hover{
      cursor: pointer;
    }
    &:active, &.active{
      box-shadow: inset 0 3px 3px 0 rgba(#000, .125);
    }
  }
}

// 生成各种颜色的按钮
@each $color-name, $color-value in $theme-colors{
  .btn-#{$color-name}{
    background: $color-value;
    color: color-yiq($color-value);
    // 和用户交互有关的样式
    &:not(.disabled):not(:disabled){
      &:focus, &.focus{
        box-shadow: 0 0 0 .25rem rgba($color-value, .125);
      }
      &:hover, &.hover{
        background: darken($color-value, 10%);
        color: color-yiq(darken($color-value, 10%));
      }
    }
  }
}

// 以上是按钮的基本样式



// 下面是下拉菜单的核心部分
.dropdown{
  position: relative;
}
// 画一个 caret
.dropdown-toggle::after{
  position: relative;
  top: -0.15em;
  content: "";
  box-sizing: border-box;
  display: inline-block;
  width: 0; height: 0;
  margin-left: .3em;
  border-top: .3em solid #fff;
  border-bottom: 0;
  border-left: .3em solid transparent;
  border-right: .3em solid transparent;
}
.dropdown-menu{
  position: absolute;
  top: 100%;left: 0;
  flex-direction: column;
  display: none;
  border-radius: .25rem;
  border: 1px solid rgba(#000, .125);
  background: #fff;
  z-index: 1;
  &.show{
    display: flex;
  }
}
.dropdown-item{
  padding: .25rem .5rem;
  box-sizing: border-box;
  color: $gray-900;
  min-width: 100%;
  &.hover, &:hover{
    color: darken($gray-900, 5%);
    background: $gray-100;
  }
}