[导读]
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运行演示》对你有帮助,请点赞、收藏,并留下你的观点哦!