用bootstrap4和jq写一个自动判断当前环境

好的，我可以帮你写一个简单的示例代码。首先需要引入Bootstrap 4和jQuery的CDN链接，如下所示：

<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">

<!-- jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Bootstrap 4 JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>

接下来，我们可以使用jQuery编写一个函数来自动判断当前环境，并返回对应的接口地址，代码如下所示：

function getApiUrl() {
  var apiUrl;
  if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
    apiUrl = '/api/development'; // 如果当前域名是localhost或者127.0.0.1，则是开发环境
  } else {
    apiUrl = '/api/production'; // 否则是生产环境
  }
  return apiUrl;
}

在上面的代码中，我们使用`location.hostname`来获取当前域名，如果当前域名是localhost或者127.0.0.1，则认为当前环境是开发环境，否则认为是生产环境。根据当前环境返回对应的接口地址。

如果你想在页面加载时自动请求对应的接口，并将请求结果显示在页面上，可以在页面中添加一个按钮和一个显示请求结果的元素，代码如下所示：

<button id="btn-request" class="btn btn-primary">请求接口</button>
<div id="result"></div>

$(function() {
  $('#btn-request').click(function() {
    var apiUrl = getApiUrl(); // 获取当前环境对应的接口地址
    $.ajax({
      url: apiUrl,
      type: 'GET',
      success: function(response) {
        $('#result').text(JSON.stringify(response)); // 将请求结果显示在页面上
      },
      error: function(error) {
        $('#result').text('请求接口失败：' + error.statusText); // 将错误信息显示在页面上
      }
    });
  });
});

在上面的代码中，我们在按钮被点击时调用`getApiUrl()`函数来获取当前环境对应的接口地址，并使用`$.ajax()`方法发送GET请求，并根据请求结果将其显示在页面上。

希望这个简单的示例代码可以帮到你，如果有其他问题，欢迎继续提问。