如何在发布/加载网页之前全局应用Bootstrap样式类

Posted 2023-02-25

我想将Bootstrap类全局应用到我的网站，并且当通过jQuery应用Bootstrap类时，没有所有网站元素跳转。

例如，我想让每个h1元素都有Bootstrap类text-center和border-bottom。为此，我可以使用jQuery的.addClass()方法将适当的Bootstrap类应用于所有匹配元素。问题是每次用户访问网站上的不同页面时，首先会加载未设置样式的元素，然后在应用Bootstrap类时跳转。我假设发生这种情况是因为我的jQuery脚本仅在页面加载完成后运行。

为了避免这种情况，我可以将Bootstrap类直接放在h1元素中，如下所示：<h1 class="text-center border-bottom">...</h1>。显然，这不是一个好的解决方案，因为我不想将类“硬编码”到整个站点的每个h1元素上。

有没有办法在加载/发布网站之前应用Bootstrap类，以便不会发生网页元素的“跳跃”？

我目前正在使用XAMPP在本地托管该网站，我使用php在所有页面中包含相同的页眉和页脚。页眉和页脚包含必要的Bootstrap样式和脚本资源。

答案

我喜欢做的是将我的html包装在div中，让我们称之为包装。在页面的头部：

<style>.wrapdisplay:none;</style>

然后在我的'CSS`文件中

.wrapdisplay:block;

然后在页脚defer加载我的CSS：

<noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="compressed.css" />
    </noscript>
    <script>
      var loadDeferredStyles = function() 
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      ;
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(function()  window.setTimeout(loadDeferredStyles, 0); );
      else window.addEventListener('load', loadDeferredStyles);
    </script>

这将“隐藏”页面的内容，直到CSS完全加载。我还将我的所有CSS压缩成一个文件，这很简单，因为我开发了一个自定义CMS并且不使用wordpress，但这是一个不同的对话。