BootStarp4實做入門

12. 讓HTML可以被引入

  1. 如果開始覺得HTML檔太大,想要做適當的切割引入,那麼,可以試試此單元作法。
  2. 這個功能基本上無關BootStrap
  3. 請在 <head> 中加入:
    <script src="https://www.w3schools.com/lib/w3.js"></script>
  4. 或者將該檔案下載,存入js目錄下,並引入之亦可:

    <script src="js/w3.js"></script>
  5. 接著在</body>之前加入

    <!-- Optional JavaScript -->
    <script>
        w3.includeHTML();
    </script>
  6. 這樣就完成基本步驟了!

  7. 將整個 <ul class="navbar-nav m-auto"> 剪下,建立一個 nav.html 檔並貼入剛剛剪下的內容,並儲存。

  8. 在原來的位置貼入以下語法即可引入 nav.html

    <div w3-include-html="nav.html"></div>
  9. 原本 .m-auto<ul>中,請將之移到 <div> 中,以便讓引入的區塊可以置中。

    <div w3-include-html="nav.html" class="m-auto"></div>