Question

我有一个用例，按钮切换，我需要更改我的皮肤/主题。我不确定如何在bootstrap 4中正确实现它们（已通过他们的文档）。我的皮肤/主题更改涉及btn颜色，字体，背景颜色，悬停颜色，盒阴影和活动颜色。我有一个想法：为这些属性创建sass函数并基于css-selector返回它们。就像我可以将黑暗和光亮的选择器连接到它上面，然后返回适当的值。（灵感来自Angular Material）。或者还有其他方法来正确地做到这一点吗？

Answer 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＆amp; jQuery所以你有一些东西可以使用。它还有一个右下角的保管箱，可以选择各种风格：

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>

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

1 个答案: