HTML+CSS+JS代码按照相应的格式，便可呈现以下的效果，在文章中能直接演示并且切换查看代码，相当的方便，不过要注意的是，因为是直接在页面中的，可能会受到当前页面样式对示例的影响。
This is a normal paragraph without any contextual classes.
A paragraph with .text-primary class.
A paragraph with .text-success class.
A paragraph with .text-info class.
A paragraph with .text-warning class.
A paragraph with .text-danger class.
A paragraph with .text-gray class.
A paragraph with .text-dark class.
<p>This is a normal paragraph without any contextual classes.</p>
<p class="text-primary">A paragraph with .text-primary class.</p>
<p class="text-success">A paragraph with .text-success class.</p>
<p class="text-info">A paragraph with .text-info class.</p>
<p class="text-warning">A paragraph with .text-warning class.</p>
<p class="text-danger">A paragraph with .text-danger class.</p>
<p class="text-gray">A paragraph with .text-gray class.</p>
<p class="text-dark">A paragraph with .text-dark class.</p>
.text-primary { color: #2196F3; }
.text-success { color: #4CAF50; }
.text-info { color: #29B6F6; }
.text-warning { color: #FF9800; }
.text-danger { color: #F44336; }
.text-purple { color: #6D5CAE; }
.text-teal { color: #00BFA5; }
.text-gray { color: #bbbbbb; }
.text-dark { color: #424242; }
.text-white { color: #ffffff; }
$('.sidenav.dropable > li > a').click(function(e){
if ( 0 == $(this).next("ul").size() || 0 == $(this).next("ul:hidden").size() ) {
return;
}
e.preventDefault();
$(this).parents(".sidenav").find("ul").not(":hidden").slideUp(300);
$(this).next("ul").slideDown(300);
});