手机wap和html有什么区别,手机网页wap用Bootstrap还是jQuery Mobile

解决问题

Bootstrap是一个css框架,针对解决的问题有:

跨设备的网页响应式布局问题。随着手机、平板、各分辨率屏幕的出现,如何能够一套前端在所有设备上自由适应?

多人合作的前端布局和样式的规范问题

常用前端css组件,如按钮、连接、表单、表格、分页组件、下拉菜单、导航栏、ICON等等

常用JS前端组件(需要扩展js支持),如表单验证、Tips、Popup等等

jQuery Mobile是移动前端框架,包含js、html、css,提供一套完整的移动前端开发组件,可以比喻成Android开发框架,尽可能提供移动APP所具有的所有功能,针对解决的问题有:

移动网页APP所常用的组件,例如:手机导航栏、选项卡、底部菜单、列表、表单等各种组件,而这些与Bootstrap提供的组件有很大区别,jQuery Mobile提供的是类似手机APP的组件,只用于移动网页,而Bootstrap提供的是面向所有设备的组件,并没有对移动设备专门考虑,与移动APP的组件体验不一样。

网页页面之间转换效果

异步数据加载

功能

Bootstrap其核心主要是一个css样式框架,基于css 的Media Query功能实现了响应式布局,能够帮助前端开发人员快速布局、快速开发、合作开发。它必须借助jQuery类似的js框架来实现Ajax数据交互。

jQuery Mobile其核心是一个完整的WebAPP框架,加入了一个轻量级的jQuery可以实现Dom操作,在jQuery的基础上提供了一系列类似移动APP的Widget(视图组件),提供了一套不错的页面转场效果,可通过Ajax实现与后端数据交互。

适用场景

Bootstrap通常用于:展示网站的响应式布局开发,使得网站可以在不同设备上方便浏览;以及网站后台管理系统的前端CSS框架。

jQuery Mobile通常用于:期望接近移动APP体验的WebAPP,项目只运行在手机端,不用于电脑设备展示(虽然是可以展示的,但是效果不好)。

总结如果做跨设备响应式前端,选择Boostrap;如果仅作移动端,期望得到近似APP的WebAPP,使用jQuery Mobile。

如果做一个产品级的WebAPP,当前jQuery Mobile的能力并不能让你满意,自己开发响应式布局框架和WebApp组件是必然要走的路。

最近我们手机端网站想改版,打算用bootstrap做移动端开发的,但经过网上很多人的反馈来看boostrap比较大,他应该说是pc与移动一体自适应的情况下用,如果单纯的做移动站没必要,用这么臃肿的东西。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用BootstrapjQuery实现导航侧边栏的HTML代码示例: ```html <!DOCTYPE html> <html> <head> <title>Navigation Sidebar Example</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Bootstrap JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> /* Sidebar styling */ .sidebar { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidebar a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidebar a:hover { color: #f1f1f1; } .sidebar .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .openbtn { font-size: 20px; cursor: pointer; background-color: #111; color: white; padding: 10px 15px; border: none; } .openbtn:hover { background-color: #444; } /* Page content styling */ #main { transition: margin-left .5s; padding: 20px; } /* Responsive media query for smaller screens */ @media screen and (max-height: 450px) { .sidebar {padding-top: 15px;} .sidebar a {font-size: 18px;} } </style> </head> <body> <!-- Navigation sidebar --> <div id="mySidebar" class="sidebar"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <a href="#">Home</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Contact</a> </div> <!-- Page content --> <div id="main"> <button class="openbtn" onclick="openNav()">☰ Navigation</button> <h1>Welcome to my website!</h1> <p>This is an example of how to create a navigation sidebar using Bootstrap and jQuery.</p> </div> <script> // Open the sidebar function openNav() { document.getElementById("mySidebar").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } // Close the sidebar function closeNav() { document.getElementById("mySidebar").style.width = "0"; document.getElementById("main").style.marginLeft = "0"; } </script> </body> </html> ``` 这段代码实现了一个具有导航侧边栏的网页,点击“Navigation”按钮可以打开或关闭侧边栏。该示例使用了Bootstrap的CSS和JavaScript库以及jQuery库来实现导航侧边栏的样式和交互。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值