如何在發布/加載網頁之前全局應用Bootstrap樣式類

Question

我想將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樣式和腳本資源。

Answer 1

我喜歡做的是將我的HTML包裝在div中，讓我們稱之為包裝。 在頁面的頭部：

<style>.wrap{display:none;}</style>

然后在我的'CSS`文件中

.wrap{display: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，但這是一個不同的對話。