Bootstrap 테마 동적 변경 (link href)

1 개요[ | ]

부트스트랩 동적 테마 변경
Bootstrap 테마 동적 변경
Bootswatch 테마 동적 변경
jQuery Bootswatch 테마 동적 변경

2 예시 1[ | ]

<link rel='stylesheet' href='//unpkg.com/bootswatch/dist/darkly/bootstrap.min.css' />
<nav class="navbar navbar-dark bg-primary">
  <div class="container-fluid">
    <a class="navbar-brand">Hello</a>
  </div>
</nav>
<main>
  <section class="jumbotron text-center">
    <div class="container">
      <h1>Change Theme</h1>
      <p class="lead text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>
        <button type="button" class="btn-theme btn btn-secondary">flatly</button>
        <button type="button" class="btn-theme btn btn-secondary">darkly</button>
      </p>
    </div>
  </section>
</main>
<script src='//unpkg.com/jquery'></script>
<script src='//unpkg.com/bootstrap/dist/js/bootstrap.min.js'></script>
<script>
$('.btn-theme').click(function() {
  $('link[rel="stylesheet"][href$="/bootstrap.min.css"]').attr('href','//unpkg.com/bootswatch/dist/'+$(this).text()+'/bootstrap.min.css');
});
</script>

3 예시 2[ | ]

<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>

4 같이 보기[ | ]