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

一、应用场景

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

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

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

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

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

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

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

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

二、响应式的导航条

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

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

PC端(屏幕尺寸 >= 997px)

平板、手机端效果(屏幕尺寸 < 997px)

【vue】用vue-cli+bootstarp手动写一个响应式的导航条_第1张图片

【vue】用vue-cli+bootstarp手动写一个响应式的导航条_第2张图片

OK,看完要实现的效果以后,下面开始实现!

三、实现

1.新建一个Header.vue,大致布局如下:

2.实现思路

原本我是想用一套 html 结构通过媒体查询或者 bootstarp 的一些辅助类来实现在不同的屏幕上显示不同的样式

后来发现写媒体查询还不如写两个导航方便,然后就写了两个导航栏,利用 bootstarp 的响应式实用工具来控制在不同的屏幕显示不同的导航条

PC端的导航条适用于屏幕尺寸大于997px的屏幕,手机端的导航条适用于屏幕尺寸小于997px的屏幕,然后分别写样式即可

3.使用的东西

其实写起来PC端的样式还是挺麻烦的,因为写的效果比较好点,手机端就比较方便了

主要使用到的东西就是 bootstarp 的辅助类

.container——固定宽度容器 相当于margin: 0 auto

.container-fuild——100%宽度容器

.text-center——文本居中

.center-block——块居中

.hidden-xs——在手机端隐藏

.visible-xs——在手机端显示

.collapse——折叠插件

OK,到此响应式的导航条就封装完成了,大概有350行代码轻松搞定!

下载地址:vue-cli+bootstarp响应式导航栏

下载后请注意修改22行和48行的logo图片地址

你可能感兴趣的:(vue,plugins)