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

Question

I'd like to apply Bootstrap classes globally to my website and not have all the website elements jump around as the Bootstrap classes get applied through jQuery.

For example, I'd like to make every h1 element have the Bootstrap classes text-center and border-bottom. To do this, I can use jQuery's .addClass() method to apply the appropriate Bootstrap classes to all matching elements. The problem is that every time a user goes to a different page on the website, the un-styled elements load first, then they jump around as the Bootstrap classes get applied. I'm assuming this happens because my jQuery script only runs after the page has finished loading.

To avoid this, I could just put the Bootstrap classes directly in the h1 element, like so: <h1 class="text-center border-bottom">...</h1>. Obviously this is not a good solution though because I don't want to have to "hard-code" the classes onto every h1 element across the site.

Is there a way to apply Bootstrap classes before loading/publishing the website so that the "jumping" of web page elements doesn't happen?

I'm currently hosting the website locally using XAMPP and I am using PHP to include the same header and footer across all pages. The header and footer contain the necessary Bootstrap styling and script resources.

Answer 1

What I like to do is wrap my HTML in a div, lets call it wrap. And in the page's head:

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

then in my 'CSS` file have

.wrap{display:block;}

Then in the footer defer the loading of my 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>

This will "hide" the contents of the page until the CSS is full loaded. I also compress all of my CSS into one file, which is easy as I developed a custom CMS and don't use wordpress, but that is a different conversation.