问如何将CSS类与jQuery Bootstrap4效果一起使用

EN

$('.click_me').on("click",function(){
    $(this).addClass("highlighted");
});
$('.click_me_1').on("click",function(){
    $(this).css("border","1px solid gold");
});

$('.click_me_effect').on("click",function(){
    $(this).effect( "highlight",{ color: "#008000" },3000,function(){
 	      $(this).addClass("highlighted");
        //Or you can use direct css method
        //$(this).css("border","1px solid gold");
     });
});

.click_me, .click_me_1, .click_me_effect {
    border: 1px solid #ddd;
    padding: 10px 15px;
    display: block;
    width: 225px;
    cursor: pointer;
    margin-bottom: 15px;
}
.click_me.highlighted, .click_me_effect.highlighted {
    border: 1px solid gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  
<div class="click_me">
Click Me - highlight through class
</div>

<div class="click_me_1">
Click Me - highlight through css()
</div>

<div class="click_me_effect">
 Click Me - highlight through effect and addClass
</div>