移动端也能兼容的web页面制作1:MDBootstrap演示Demo运行演示

简介: 移动端也能兼容的web页面制作1:MDBootstrap演示Demo运行演示

效果图

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

d3e66ce3ddc24291b541455080b6d06d.png

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

84492cb3143f445f98d6964268c1461a.png

这是移动端表格的效果。

500d60ea7fc44c78a64aa7d4c141b4a0.jpg

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

3ce1e1b82b1241a6bf2039ce4f2ad679.png


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

① 资源获取

项目获取:

小蓝枣的资源仓库


目录结构如下:

e087fbf9b0fd4b8bba682059e1803466.png


② 安装依赖

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

e061081e25644d9dbc9432994048a896.png

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

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

npm 的安装过程演示

43cf667585f04b4e9b28641c42b7bc2a.png


③ 启动项目

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

6dcd69e8555445c8be62e1add08567e8.png

启动后给出访问信息。

b0a3d716f8d44d10bbb073e21ee8ffcc.png

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

48e60420d5114d52b7a579ae2b9dc89b.png


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

npm run demo 可以查看演示 demo。

72e01edd9e424835aa7064e1736ce2ff.png

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

b556f3caf9be44a99ee2ff32bd13103b.png

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

327a54dc9fb448709be4cf81060cd3cc.png

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

500d60ea7fc44c78a64aa7d4c141b4a0.jpg


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


① 目录结构介绍


demo:演示 demo 目录

node_modules:构建 Vue 所需要的库

index.html:程序的主文件

assets:静态资源存放路径

App.vue:根组件,所有别的组件都镶嵌其中

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

components:其它组件存放目录


c972ef53b8134adf9ca0bdad9db297c7.png


② 图片文本编辑演示


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

1864fad414bf455b8dac3fb789b8c2ff.png

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

cd064db2d84d42f9935ab5267966aba4.png

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

44d715b18e484717b87fff7933fc0bdd.png

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

3ce1e1b82b1241a6bf2039ce4f2ad679.png

喜欢的点个赞❤吧!


目录
相关文章
|
25天前
|
消息中间件 监控
RabbitMQ的Web管理页面
RabbitMQ的Web管理页面
20 0
|
1月前
|
自然语言处理 Java 数据库连接
掌握JSP页面编程:动态生成Web内容
【4月更文挑战第3天】Java Server Pages (JSP) 是一种用于创建动态Web内容的Java技术,它结合HTML并允许在页面中嵌入Java代码。JSP支持代码片段、表达式语言(EL)和JSTL标签库,简化动态内容生成。当服务器接收到请求时,执行JSP中的Java代码并将结果嵌入HTML返回给客户端。示例展示了如何显示当前日期和时间。JSP可与Servlet、JavaBeans、数据库等结合,用于构建功能丰富的交互式Web应用。
掌握JSP页面编程:动态生成Web内容
|
2月前
|
机器学习/深度学习 人工智能 前端开发
机器学习PAI常见问题之web ui 项目启动后页面打不开如何解决
PAI(平台为智能,Platform for Artificial Intelligence)是阿里云提供的一个全面的人工智能开发平台,旨在为开发者提供机器学习、深度学习等人工智能技术的模型训练、优化和部署服务。以下是PAI平台使用中的一些常见问题及其答案汇总,帮助用户解决在使用过程中遇到的问题。
|
4月前
|
IDE Linux 开发工具
如何在Linux运行RStudio Server并实现Web浏览器远程访问
如何在Linux运行RStudio Server并实现Web浏览器远程访问
82 0
|
8天前
|
编解码 前端开发 JavaScript
【Web 前端】移动端适配方案有哪些?
【4月更文挑战第22天】【Web 前端】移动端适配方案有哪些?
|
21天前
|
Ubuntu Linux 网络安全
在Amazon Web Services中使用R语言运行模拟
在Amazon Web Services中使用R语言运行模拟
|
2月前
|
缓存 NoSQL Redis
在Python Web开发过程中:数据库与缓存,除了Redis是内存数据库以外,还有哪些原因使其运行速度快?
Redis在Python Web开发中快速的原因:内存存储、多样化数据结构(如字符串、哈希、列表等)简化数据模型,单线程处理提高效率,结合非阻塞I/O;RDB和AOF提供持久化保障;TCP+二进制协议减少网络开销;管道技术提升通信效率。这些设计使Redis能高效处理高并发请求。
19 3
|
2月前
|
设计模式 前端开发 Shell
Python生成Web页面Web框架
Python生成Web页面Web框架
17 0
|
2月前
|
编解码 前端开发 UED
Web前端开发中的移动端适配与响应式设计
【2月更文挑战第11天】 对于现代 Web 前端开发而言,移动端适配与响应式设计是至关重要的技术环节。移动设备的普及使得用户更多地通过手机或平板设备访问网站,因此,如何有效地适配各种屏幕尺寸并提供良好的用户体验成为了前端开发者需要面对的重要问题。本文将介绍移动端适配与响应式设计的基本原理,并结合实际案例探讨其在前端开发中的应用。
|
3月前
|
JavaScript 前端开发 API
「深入探究Web页面生命周期:DOMContentLoaded、load、beforeunload和unload事件」
在 Web 开发中,了解页面生命周期是非常重要的。页面生命周期定义了页面从加载到卸载的整个过程,包括各种事件和阶段。在本文中,我们将详细介绍四个关键事件:DOMContentLoaded、load、beforeunload 和 unload。我们将探讨这些事件的属性、API、应用场景,并提供一些代码示例和参考资料。