Bootstrap 테마 동적 변경

by JM note

HTML

<link id='bs' data-n='0' rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.1/flatly/bootstrap.min.css'>

<div class="jumbotron">
  <h1 class="display-4">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Change Theme</a>
  </p>
</div>

<script src='//unpkg.com/jquery/dist/jquery.min.js'></script>
<script src='//unpkg.com/bootstrap/dist/js/bootstrap.min.js'></script>
<script>
$('.btn-primary').click(function() {
  var t = ['flatly','darkly','cerulean','cyborg']
  var n = $('#bs').data('n')+1
  $('#bs').data('n',n).attr('href','//cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.1/'+t[n%4]+'/bootstrap.min.css')
})
</script>