使用 bootstrap-4 更改主题或皮肤答案

【问题标题】：change themes or skins with bootstrap-4使用 bootstrap-4 更改主题或皮肤
【发布时间】：2018-09-26 22:03:29
【问题描述】：

我有一个用例，在按钮切换时，我需要更改我的皮肤/主题。我不确定如何在 bootstrap 4 中正确实现它们（已经阅读了他们的文档）。我的皮肤/主题更改涉及 btn-colors、fonts、background-color、hover-color、box-shadow 和 active-color。我有一个想法：为这些属性创建 sass 函数并基于 css-selector 返回它们。就像我可以附加深色和浅色选择器一样，并返回正确的值。（灵感来自 Angular Material）。或者有没有其他方法可以正确地做到这一点？

【问题讨论】：

标签： twitter-bootstrap sass bootstrap-4

【解决方案1】：

您可以选择的一个方向是 JS/jQuery。这并不指向 Bootstrap 4，但可以修改为这样做。

我确实找到了一个与 SASS 相关的问题，您可能会觉得相关，switching bootstrap theme dynamically for the entire website 。

基本流程是……

为您的 CSS 链接提供一个 ID：

<link href="css/bootstrap.min.css" rel="stylesheet" id="ref-css">

您可以使用复选框切换：

<input type="checkbox" id="toggle-event" data-toggle="toggle" data-on="Light" data-off="Dark">

编写一些 jQuery 以在更改时切换 css 文件：

  $(function() {
      $('#toggle-event').change(function() {
        if ($(this).prop('checked')) {
          $("#ref-css").attr("href", "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/united/bootstrap.min.css");
        }else{
          $("#ref-css").attr("href", "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/slate/bootstrap.min.css");
        }
      })
    })

这是完整的 HTML 和 jQuery，因此您可以使用一些东西。它的右上角还有一个 Dropbox 供您选择各种样式：

jQuery(function($) {
  $('#theme-button ul a').click(function() {
    if ($(this).attr('name') != 'current') {
      var urlbeg = 'https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/'
      var urlend = '/bootstrap.min.css'
      var themeurl = urlbeg + $(this).text().toLowerCase() + urlend;
      var link = $('link[rel="stylesheet"][href$="/bootstrap.min.css"]').attr('href', themeurl);

      $('#theme-button ul a[name="current"]').text($(this).text());
    }
  });
});

$(function() {
  $('#toggle-event').change(function() {
    if ($(this).prop('checked')) {
      $("#ref-css").attr("href", "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/united/bootstrap.min.css");
    } else {
      $("#ref-css").attr("href", "https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/slate/bootstrap.min.css");
    }
  })
})

<html lang="en">

<head>
  <!-- To switch themes, go to https://www.bootstrapcdn.com/bootswatch/?theme=0 -->
  <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" id="ref-css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
  <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>

<body>
  <div class="navbar navbar-default navbar-static-top">
    <div class="container-fluid">
      <a class="navbar-brand">Bootswatch Theme Changer</a>
      <div class="nav navbar-nav pull-right">
        <li id="theme-button" class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Change Theme <b class="caret"></b></a>
          <ul class="dropdown-menu ">
            <li><a href="#" name="current">Cerulean</a></li>
            <li class="divider"></li>
            <li><a href="#" name="cerulean">Cerulean</a></li>
            <li><a href="#" name="cosmo">Cosmo</a></li>
            <li><a href="#" name="cyborg">Cyborg</a></li>
            <li><a href="#" name="darkly">Darkly</a></li>
            <li><a href="#" name="flatly">Flatly</a></li>
          </ul>
        </li>
      </div>
    </div>
  </div>

  <a href="#" class="btn btn-primary">Sample Btn</a>
  <br><br>
  <input type="checkbox" id="toggle-event" data-toggle="toggle" data-on="Light" data-off="Dark">

  <div class="box effect1">
    <h1>Lorem ipsum</h1>
  </div>

  <p>Vestibulum sit amet ipsum lacus. Aliquam nisl enim&hellip; tristique tempus placerat at, posuere in lectus. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Nulla vel magna sit amet dui <a href='#'>lobortis</a>    commodo vitae vel nulla. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium
    sem orci aliquet mauris. </p>
  <div class="box">
    <p>Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Vestibulum sit amet ipsum lacus… Suspendisse potenti. Nulla auctor eleifend 23rd of May turpis consequat pharetra.</p>
  </div>
  <p>Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, <a href='#'>iaculis pretium</a> sem orci aliquet mauris. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Curabitur consectetur; faucibus
    nisl ac varius. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Nulla lobortis tempus commodo. </p>
  <h2>Curabitur consectetur</h2>
  <p>Nulla lobortis tempus commodo? Suspendisse potenti. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh (iaculis pretium sem orci aliquet mauris). Suspendisse potenti H<sub>2</sub>0. </p>
  <ul>
    <li>Sed dapibus, lectus sit amet adipiscing egestas</li>
    <li>Sed dapibus, lectus sit amet adipiscing egestas</li>
    <li>Vestibulum sit amet ipsum lacus</li>
  </ul>
  <h2>Purus lectus venenatis urna</h2>
  <p>Nulla lobortis tempus commodo? Nulla lobortis tempus <strong>commodo</strong>. Fusce ac sodales <code>.generate()</code> magna. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Maecenas sit <q cite='http://www.heydonworks.com'>amet tellus nec mi gravida posuere</q>    non pretium magna. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. </p>

</body>

</html>

【讨论】：

感谢您的链接和评论伙伴。由于我们也在寻找 angular-workaround ，因此我们正在研究更多。