初学Bootstrap+JQuery后的响应式静态网页编写以及过程中遇到的一些问题

学习bootstrap时练习仿写了一个自适应页面

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。基于 HTML、CSS、JAVASCRIPT ,简洁灵活，使得 Web 开发更加快捷。

博主认为bootstrap的学习主要依靠查阅官方文档，虽然也有很多的教学视频，菜鸟教程等，但是不可能包括全部知识，如果想深入了解某个框架或技术，官方文档还是最可靠的。附上bootstrap官方链接bootstrap

遇到的问题

1. 导航栏( navbar-nav)对齐方法

不能在ul中添加justify-content-* 应该在其外层div上添加才能生效 并且在设置对齐方法以后 外边距等属性失效 不能同时设置

2. 设置滚动监听事件

使用data-spy="scroll"的元素需要将其position属性设置为relative才能起作用
设置active导航栏高亮显示为其他颜色的方法(原来高亮时为亮白色)
新建一个css样式 设置 active的颜色为其他颜色即可(滚动页面时可见高亮导航栏新增了active类，所以对其进行设置便可以改变)
ps:滚动监听事件设置详解
https://www.cnblogs.com/moqiutao/p/6568073.html

3. 折叠导航栏位置设置

最好不早用margin padding进行设置，因为一旦这样设置，缩小窗口自适应时导航栏将不会移动，一直固定在那个位置，直到折叠按钮出现。
解决方法 可以通过position利用其父容器进行设置，便可以随父容器一起移动

4. 媒体查询(其实就是自己坑自己)

查看bootstrap的css源代码时发现它是这么写的:@media (min-width){} 于是自己傻傻的就用啦，以为这是bootstrap简单的写法(自己坑自己)，其实不然，具体为什么我也不清楚
反正 按原生的写准没错!
@media screen and (min-width:800px){}

网页初始效果如下，由于代码太多博主就不一一粘贴啦，可点击下方链接获取代码

博主的github

点击 预览效果

ps：如果遇到网页不是下面截图的样子，可能与浏览器有关，可以换一个浏览器打开，或者将本浏览器的浏览数据清空再运行，博主深深踩坑，但是具体原因还不知晓。也可以去博主github将项目clone到本地按照博主github上的流程运行查看完好的网页效果

网页截图：