[导读]

MDBootstrap是基于Vue.js开发的一套前端框架，拥有美观大气的界面效果，友好的交互体验，更棒的是对于移动端也有很好的兼容性。先给大家看下演示demo的运行，后面将围绕项目的制作过程，依次来展示导航栏、图片轮播图、表格、数据库交互等各方面的详细实现过程。

MDBootstrap图片与文本内容编辑、演示Demo运行

效果图第一章：演示项目快速启动① 资源获取② 安装依赖③ 启动项目④ 演示 Demo：Web端、移动端兼容性效果展示第二章：MDBootstrap 图片与文本内容编辑① 目录结构介绍② 图片文本编辑演示

[ 文章推荐 ]

Python地图篇 - 使用pyecharts绘制世界地图、中国地图、省级地图、市级地图实例详解

效果图

这是个移动端、web端的合并效果图展示图。

演示domo的导航栏里有很多组件的效果图，这是一个图片轮播的效果。

这是移动端表格的效果。

这个是本次图文编辑演示的效果图。

第一章：演示项目快速启动

① 资源获取

项目获取：

小蓝枣的资源仓库

目录结构如下：

② 安装依赖

cd进入项目包位置，可以通过cmd的方式快捷进入。

通过npm install命令来安装依赖。

没有npm的话可以通过下面的文章来进行安装：

npm的安装过程演示

③ 启动项目

使用npm start命令来启动项目。

启动后给出访问信息。

访问环境，看到这个页面就是正常启动了

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

npm run demo可以查看演示demo。

如果之前的运行框没关，这里会起一个新的端口来提供访问。

我查看了里面一个表格的样式。

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

第二章：MDBootstrap 图片与文本内容编辑

① 目录结构介绍

demo：演示demo目录

node_modules：构建Vue所需要的库

index.html：程序的主文件

assets：静态资源存放路径

App.vue：根组件，所有别的组件都镶嵌其中

main.js：用于渲染App.vue组件，并镶嵌dom中

components：其它组件存放目录

② 图片文本编辑演示

首先在静态资源文件夹里插入一个图片。

然后修改Home.vue图片的路径为刚才的图片。

再修改HelloWorld.vue的内容为Hello World即可。

重新刷新下页面就可以看到效果啦，注意这里是修改npm start命令启动的项目，不是演示demo哈。

喜欢的点个赞❤吧！

如果觉得《移动端也能兼容的web页面制作1：MDBootstrap演示Demo运行演示》对你有帮助，请点赞、收藏，并留下你的观点哦！