代码之家 › 专栏 › 技术社区 › KiraAG

使用bootstrap-4更改主题或外观

bootstrap-4 sass twitter-bootstrap

KiraAG · 技术社区 · 7 年前

我有一个用例,在按钮切换时,我需要更改我的皮肤/主题。我不知道如何在bootstrap 4中正确实现它们(已经阅读了它们的文档)。我的皮肤/主题更改涉及btn颜色、字体、背景色、悬停色、框阴影和活动颜色。我有一个想法:为这些属性创建sass函数,并基于css选择器返回它们。就像我可以将深色和浅色选择器连接到它,并返回正确的值一样。(灵感来自棱角材料)。或者有没有其他合适的方法?

1 回复 | 直到 7 年前

sunsetsurf 7 年前

您可以选择的一个方向是JS/jQuery。这不是指向引导程序4,但可以修改为指向引导程序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>