【前端】Vue中使用自适应屏幕响应式的导航栏NavBar组件_自适应导航代码

组件效果：
PC端：

手机端（下拉菜单）：

组件来源：BootstrapVue

1 安装

# With npm
npm install vue bootstrap-vue bootstrap

# With yarn
yarn add vue bootstrap-vue bootstrap
1
2
3
4
5

版本在package.json中修改为：

"bootstrap": "^4.6.1",
"bootstrap-vue": "^2.21.2",
1
2

执行npm install

2 配置

在main.js中添加

// app.js
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)


// app.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
1
2
3
4
5
6
7
8
9
10
11
12

3 代码

创建一个组件：

<template>
      <b-navbar toggleable="lg" type="dark" variant="dark" style="width:100%;" fixed="top">
        <div class="container">
            <b-navbar-brand href="#">我的主页</b-navbar-brand>
            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
            <b-collapse id="nav-collapse" is-nav>
            <b-navbar-nav>
                <b-nav-item href="#">首页</b-nav-item>
                <!-- <b-nav-item href="#" disabled>xxx</b-nav-item> -->
            </b-navbar-nav>

            <!-- Right aligned nav items -->
            <b-navbar-nav class="ml-auto">
                <b-nav-item href="#detail">详情</b-nav-item>
                <b-nav-item href="#skill">专业技能</b-nav-item>
                <b-nav-item href="#education">教育经历</b-nav-item>
                <b-nav-item href="#">联系我</b-nav-item>
                <b-nav-item-dropdown text="ME" right>
                    <b-dropdown-item href="#">登陆</b-dropdown-item>
                    <b-dropdown-item href="#">注册</b-dropdown-item>
                </b-nav-item-dropdown>
            </b-navbar-nav>
            </b-collapse>
        </div>
  </b-navbar>
</template>

<script>
export default {
    name:"Header"
}
</script>

<style>
  .container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  }
  @media (min-width: 768px) {
    .container {
      width: 750px;
    }
  }
  @media (min-width: 992px) {
    .container {
      width: 970px;
    }
  }
  @media (min-width: 1200px) {
    .container {
      width: 1170px;
    }
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

在其他页面中使用(注意路径引用)：

<template>
    <div class="index">
        <Header></Header>
        <!-- <div style="width:100%;height:56px"></div>
        <router-view></router-view> -->
    </div>
</template>
<script>
import Header from '../../components/f/Header.vue'
export default {
    name:'index',
    components:{
        Header
    }

}
</script>
<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20