[ 導讀 ]
MDBootstrap 是基于 Vue.js 開發的一套前端框架，擁有美觀大氣的界面效果，友好的交互體驗，更棒的是對于移動端也有很好的兼容性。先給大家看下演示 demo 的運行，后面將圍繞項目的制作過程，依次來展示導航欄、圖片輪播圖、表格、數據庫交互等各方面的詳細實現過程。

MDBootstrap 導航欄、背景圖片設置

• 效果圖
• 第一章：背景圖片設置
• ① 放置圖片
• ② 引入圖片
• ③ 圖片蒙層
• 第二章：導航欄設置
• ① 基礎導航欄添加
• ② 下拉菜單
• ③ 菜單跳轉
• 第三章：其它
• ① 源代碼
• ② 高亮語法設置：vetur插件安裝

[ 系列文章 ]
移動端也能兼容的 web 頁面制作1：MDBootstrap 演示 Demo 運行演示

[ 文章推薦 ]
Python 地圖篇 - 使用 pyecharts 繪制世界地圖、中國地圖、省級地圖、市級地圖實例詳解

效果圖

先給大家看下移動端和 web 端效果對比圖。

這是 web 端的效果展示圖。

這個是移動端的展示圖。

第一章：背景圖片設置

① 放置圖片

首先在靜態資源文件夾里放入兩張背景圖片。

② 引入圖片

可以引用本地文件，也可以引用網上的圖片。
我們這里使用 Home.vue 文件，使用前最好復制下做個備份。

可以看到文字部分是看不清的，這里我們加個蒙層來解決問題，還可以提高背景的視覺效果。

③ 圖片蒙層

這個是 rgba-purple-light 亮紫色的特效。

可以看到效果比之前好了很多。

第二章：導航欄設置

① 基礎導航欄添加

因為導航欄一直要存在頁面中，所以我設置了將導航欄添加到 App.vue 里，和 <router-view/> 并列在其上面，后面主要內容都會在導航欄的下面進行切換。

因為有深色背景，這里用 dark 主題，字體是白色的，如果背景為淺色，可以用 light 主題，字體為黑色。

<mdb-navbar position="top" dark transparent scrolling><mdb-navbar-brand href="#">小藍棗演示</mdb-navbar-brand><mdb-navbar-toggler><mdb-navbar-nav><mdb-nav-item href="#" waves-fixed>主頁</mdb-nav-item><mdb-nav-item href="#" waves-fixed>工具</mdb-nav-item><mdb-nav-item href="#" waves-fixed>報表</mdb-nav-item></mdb-navbar-nav><form><mdb-input type="text" class="text-white" placeholder="搜索" aria-label="搜索" label navInputwaves waves-fixed /></form></mdb-navbar-toggler> </mdb-navbar>

這個是導航欄的效果，還包含個搜索項。

這個是手機端展開的效果。

② 下拉菜單

添加個下拉菜單的效果，可以將一些小的菜單合并到里面，保持整體的簡潔美觀。

<mdb-dropdown tag="li" class="nav-item"><mdb-dropdown-toggle slot="toggle" tag="a" navLink waves-fixed>其它</mdb-dropdown-toggle><mdb-dropdown-menu><mdb-dropdown-item>工作</mdb-dropdown-item><mdb-dropdown-item>學習</mdb-dropdown-item><div class="dropdown-divider"></div><mdb-dropdown-item>交流</mdb-dropdown-item></mdb-dropdown-menu> </mdb-dropdown>

其中 <div class="dropdown-divider"></div> 是個分割線的效果

③ 菜單跳轉

首先在 router.js 里引入我新增的組件 Blog.vue，這個相當于一個新的頁面。

然后菜單的屬性里，加個 to="blog" 就能指向對應的連接。

效果如下：

第三章：其它

① 源代碼

這個是 Home.vue 的代碼。

<template><div><div style="height: 110vh"><div class="view intro-2" style="height: 100vh"><div class="full-bg-img"><div class="mask rgba-purple-light"><div class="container flex-center"><div class="white-text text-center"><h2>Welcome to home</h2><h4>歡迎回家</h4><p>樂觀的心態看待世界，世間處處是快樂；以平靜的心態看待事物，你會看到事物的兩面，其實，時時刻刻我們都在分享快樂，有時，只是因為你沒有細心品味罷了。</p></div></div></div></div></div><p class="m-5">我小時候，身為軍人的父親長年在外地工作，于是撫養我的重任便落到母親身上。四歲那年的一個夏夜，一向身體棒得像只小老虎的我，偏偏因熱傷風和盜汗引發了高燒，渾身燙得像個火球一般。母親嚇壞了，連忙用自行車載著我，拼命往醫院趕。從醫院返回時，已經是子夜時分。靜謐的小鎮街道早已一片漆黑，地面上卻依舊像蒸籠一般濕熱。離我家還有十來分鐘路程，而且還要經過一個百余米長、坑坑洼洼的下坡路。我家在城鄉接合部，當時周圍沒有路燈。鼻腔里滿是濕潤的泥土芬芳，耳畔伴著路兩側田野里蛐蛐和田雞此起彼伏的叫聲，眼前不時掠過一兩只螢火蟲和蝙蝠。悶熱的夜幕中，卻不見往昔月亮那熟悉的身影，母親只能借著零散微弱的星光，慢慢地騎著車。在老家，年輕的母親因為膽子大而出名，可我的小手卻依稀觸摸到她胳膊光潔皮膚上冒出罕見的雞皮疙瘩。她一向車技不錯，可當時自行車居然連續搖晃起來。我早已嚇得縮成一團，見母親這樣，更是渾身哆嗦著，只得緊緊摟住她。轉眼就到那段下坡路了，母親準備下車推著走。這時，身后突然打來兩道近光燈，雖然不是很刺眼明亮，卻也把眼前黑漆漆坑坑洼洼有些積水的路面，頓時照得亮堂清晰起來。</p><img alt="a duck" src="../assets/duck.jpg"><HelloWorld msg="Welcome to Your MDB Vue.js App"/><Blog/></div></div> </template><script>import HelloWorld from '@/components/HelloWorld.vue';export default {name: "Home",components: {HelloWorld}}; </script><style scoped>.view {background: url("../assets/background1.jpg") no-repeat center center;background-size: cover;height: 100%;} </style>

這個是 App.vue 的代碼。

<template><div id="app"><mdb-navbar position="top" dark transparent scrolling><mdb-navbar-brand href="#">小藍棗演示</mdb-navbar-brand><mdb-navbar-toggler><mdb-navbar-nav><mdb-nav-item to="/" waves-fixed>主頁</mdb-nav-item><mdb-nav-item to="blog" waves-fixed>工具</mdb-nav-item><mdb-nav-item href="#" waves-fixed>報表</mdb-nav-item><mdb-dropdown tag="li" class="nav-item"><mdb-dropdown-toggle slot="toggle" tag="a" navLink waves-fixed>其它</mdb-dropdown-toggle><mdb-dropdown-menu><mdb-dropdown-item>工作</mdb-dropdown-item><mdb-dropdown-item>學習</mdb-dropdown-item><div class="dropdown-divider"></div><mdb-dropdown-item>交流</mdb-dropdown-item></mdb-dropdown-menu></mdb-dropdown></mdb-navbar-nav><form><mdb-input type="text" class="text-white" placeholder="搜索" aria-label="搜索" label navInputwaves waves-fixed /></form></mdb-navbar-toggler></mdb-navbar><router-view/></div> </template><script>import {mdbNavbar,mdbNavItem,mdbNavbarNav,mdbNavbarToggler,mdbInput,mdbNavbarBrand,mdbDropdown,mdbDropdownItem,mdbDropdownMenu,mdbDropdownToggle} from "mdbvue";export default {name: "Home",components: {mdbNavbar,mdbNavItem,mdbNavbarNav,mdbNavbarToggler,mdbInput,mdbNavbarBrand,mdbDropdown,mdbDropdownItem,mdbDropdownMenu,mdbDropdownToggle}}; </script><style lang="scss"> @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');#app {font-family: 'Roboto', Helvetica, Arial, sans-serif;margin-top: 0px;text-align: center;color: #2c3e50; } </style><style scoped>.navbar .dropdown-menu a:hover {color: inherit !important;}</style>

② 高亮語法設置：vetur插件安裝

通過拓展商店搜索 @id:octref.vetur 可以搜索到 vetur 插件。

通過菜單如圖所示菜單或快捷鍵即可打開拓展商店。

回到程序里看已經有高亮語法了。

喜歡的點個贊?吧！

總結

以上是生活随笔為你收集整理的移动端也能兼容的web页面制作2：导航栏、背景图片设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。