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

MDBootstrap圖片與文本內(nèi)容編輯、演示Demo運行

• 效果圖
• 第一章：演示項目快速啟動
• ① 資源獲取
• ② 安裝依賴
• ③ 啟動項目
• ④ 演示 Demo：Web端、移動端兼容性效果展示
• 第二章：MDBootstrap 圖片與文本內(nèi)容編輯
• ① 目錄結構介紹
• ② 圖片文本編輯演示

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

效果圖

這是個移動端、web 端的合并效果圖展示圖。

演示 domo 的導航欄里有很多組件的效果圖，這是一個圖片輪播的效果。

這是移動端表格的效果。

這個是本次圖文編輯演示的效果圖。

第一章：演示項目快速啟動

① 資源獲取

項目獲取：
小藍棗的資源倉庫

目錄結構如下：

② 安裝依賴

cd 進入項目包位置，可以通過 cmd 的方式快捷進入。

通過 npm install 命令來安裝依賴。
沒有 npm 的話可以通過下面的文章來進行安裝：
npm 的安裝過程演示

③ 啟動項目

使用 npm start 命令來啟動項目。

啟動后給出訪問信息。

訪問環(huán)境，看到這個頁面就是正常啟動了

④ 演示 Demo：Web端、移動端兼容性效果展示

npm run demo 可以查看演示 demo。

如果之前的運行框沒關，這里會起一個新的端口來提供訪問。

我查看了里面一個表格的樣式。

手機端效果圖，可以看到有很好的兼容性。

第二章：MDBootstrap 圖片與文本內(nèi)容編輯

① 目錄結構介紹

demo：演示 demo 目錄
node_modules：構建 Vue 所需要的庫
index.html：程序的主文件
assets：靜態(tài)資源存放路徑
App.vue：根組件，所有別的組件都鑲嵌其中
main.js：用于渲染 App.vue 組件，并鑲嵌 dom 中
components：其它組件存放目錄

② 圖片文本編輯演示

首先在靜態(tài)資源文件夾里插入一個圖片。

然后修改 Home.vue 圖片的路徑為剛才的圖片。

再修改 HelloWorld.vue 的內(nèi)容為 Hello World 即可。

重新刷新下頁面就可以看到效果啦，注意這里是修改 npm start 命令啟動的項目，不是演示 demo 哈。

喜歡的點個贊?吧！

總結

以上是生活随笔為你收集整理的移动端也能兼容的web页面制作1：MDBootstrap演示Demo运行演示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。