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

Posted 2023-05-08

【中文标题】如何在发布/加载网页之前全局应用 Bootstrap 样式类

【英文标题】：How to apply Bootstrap styling classes globally before publishing/loading a web page

【发布时间】：2019-09-11 23:52:08

【问题描述】：

我想将 Bootstrap 类全局应用到我的网站，而不是让所有网站元素在通过 jQuery 应用 Bootstrap 类时跳来跳去。

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

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

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

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

【参考方案1】：

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

<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，但这是一个不同的对话。