关于原生Html+CSS+JavaScript 页面模块编写head navbar footer 模块一种笔记

1.工具就 Visual Studio Code 简单快速

2.CSS 部分采用 Bootstrap v5 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 前端工具库。 | Bootstrap 中文网 (bootcss.com) ​​​​​​​ https://v5.bootcss.com/Bootrap 复制就好

<!-- 新 Bootstrap5 核心 CSS 文件 -->
   <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">

<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
   <script src="./bootstrap/js/bootstrap.bundle.min.js"></script>

bootstrap-5.3.0-alpha1-dist.zip

3.HTML部分 插到body 前面就好，这是个底部的模块，其就同理

<div class="footer1"></div>

4.Javascript 部可写成文件或内置在网页中，footer.html就是网页模块部份，.footer1就是插入div那里的

<script>
      fetch("footer.html").then(res=>res.text()).then(res=>{
        document.querySelector(".footer1").innerHTML = res
      }) 
      
    </script>

5.footer.html代码部分

<footer class="py-3 my-4">
        <ul class="nav justify-content-center border-bottom pb-3 mb-3">
          <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">首页</a></li>
          <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">分类</a></li>
          <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">列表</a></li>
          <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">问题</a></li>
          <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">我们</a></li>
        </ul>
        <p class="text-center text-muted">&copy; 2023 Blue Power PC</p>
      </footer>