使用 HTML、Bootstrap 和 jQuery 实现主题定制设置

首先，需要在 HTML 文件中引入 Bootstrap 和 jQuery 的库文件：

<!-- 引入 Bootstrap 库文件 -->
<link rel='stylesheet' href='https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css'>
<script src='https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-beta3/js/bootstrap.min.js'></script>

<!-- 引入 jQuery 库文件 -->
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'></script>

接着，可以使用 Bootstrap 的表单组件来创建一个设置表单：

<div class='container'>
  <h1>主题设置</h1>
  
  <form>
    <!-- 主题颜色 -->
    <div class='mb-3'>
      <label for='theme-color' class='form-label'>主题颜色</label>
      <input type='color' class='form-control' id='theme-color'>
    </div>
    
    <!-- 字体大小 -->
    <div class='mb-3'>
      <label for='font-size' class='form-label'>字体大小</label>
      <input type='range' class='form-range' min='12' max='24' step='1' id='font-size'>
    </div>
    
    <!-- 是否显示背景图 -->
    <div class='mb-3 form-check'>
      <input type='checkbox' class='form-check-input' id='show-bg'>
      <label class='form-check-label' for='show-bg'>显示背景图</label>
    </div>
    
    <!-- 提交按钮 -->
    <button type='submit' class='btn btn-primary'>保存</button>
  </form>
</div>

接下来，可以使用 jQuery 来监听表单提交事件，获取表单数据，并根据用户的选择来改变网页样式：

<script>
  $(function() {
    // 监听表单提交事件
    $('form').submit(function(event) {
      event.preventDefault();  // 阻止表单提交
      
      // 获取表单数据
      var themeColor = $('#theme-color').val();
      var fontSize = $('#font-size').val() + 'px';
      var showBg = $('#show-bg').prop('checked');
      
      // 根据用户的选择来改变网页样式
      $('body').css('background-color', themeColor);
      $('body').css('font-size', fontSize);
      if (showBg) {
        $('body').css('background-image', 'url('bg.jpg')');
      } else {
        $('body').css('background-image', 'none');
      }
    });
  });
</script>

最后，用户在表单中选择主题颜色、字体大小和是否显示背景图后，点击保存按钮即可保存设置并实时改变网页样式。