【vue】用vue-cli+bootstarp手动写一个响应式的导航条

一、应用场景

在很多时候，我们的网站都是要求设计成响应式

也就是网站可以适应于 PC 端、平板和手机端

关于响应式的设计网上有很多教程，大致分为两种：

1.使用一套代码，利用媒体查询来适配不同的屏幕

2.使用两套代码，根据用户的终端不同切加载不同的代码来适配

两种方法各有优势和劣势，自己根据项目需求来确定具体使用哪种方法

本篇博客介绍第一种方法，利用 bootstarp 的栅格系统 + 一些媒体查询来完成网站的响应式设计

如果不知道 vue-cli 项目如何引入 jquery 和 bootstarp 的请参考：vue-cli引入jquery和bootstarp

二、响应式的导航条

bootstarp 给我们提供了很多种导航条的样式，但是普遍的就是样式特别的简单，而且想要在 bootstarp 提供的导航条上面嵌套自己想要的结构和样式不是特别的方便，所以我就自己动手写了一个响应式的导航条（实现方法完全小白式）

我们先看下实现的的效果：

PC端（屏幕尺寸 >= 997px）