移动端JavaScript框架结合Twitter Bootstrap

Question

在我的一个网站中，我使用Twitter Bootstrap 2.3。我喜欢它的响应式行为和移动设备中的媒体查询。但是它缺乏移动特性（特别是链接列表视图）。因此，我需要使用一个框架来处理我的网站的移动版本。

经过一些研究，我发现jquery mobile、sensa touch、jqtouch、iui、mobilize.js、zepto都是可能的候选框架。

您会推荐哪个适用于移动页面的javascript框架/插件，可以很好地与twitter bootstrap配合使用？

可能相关的问题有：
类似于jqm的Bootstrap列表视图
twitter-bootstrap vs jquery-mobile
如何使用jQuery Mobile与Bootstrap

- trante

---

请问您想了解Bootstrap适用于所有人，以及Bootstrap + jQuery Mobile（或其他替代方案）适用于移动设备观看者的内容吗？ - David Taiaroa

Answer 1

我认为使用Twitter的Bootstrap（3）可以构建移动界面。是的，你是对的，链接列表将会缺失。也许先查看http://getbootstrap.com/components/#list-group。当然，您需要编写一些代码来处理操作。

其他要考虑的点：导航和页面结构。像jQuery mobile这样的框架在一个URL上提供更多页面，请参见：http://jquerymobile.com/demos/1.0a2/#docs/pages/docs-navmodel.html，而Sencha则使用MVC方法。考虑使用http://getbootstrap.com/javascript/#tabs（或者也许是http://getbootstrap.com/javascript/#scrollspy）来模拟这种结构。

还需阅读：Twitter Bootstrap Navbar: [左按钮 -— 中间文本 -— 右按钮]? II

其他示例，参见：如何制作一个JS水平内容幻灯片从px到%的响应式，由@boblet设计的漂亮界面，很好地适应了移动设备，现在可以看到：http://bootply.com/73715。David Panzarella开始设计一个带有图标的简洁移动设备导航栏：Bootstrap 3 RC2 Navbar with Multiple Collapses 另外，可以在这里找到一种替代的移动设备导航结构：使用Twitter Bootstrap 2.x在移动设备上切换侧边栏

祝你好运

- Bass Jobsen

Answer 2

如果你准备好同时使用Bootstrap和其他几个框架，那么请确保你对jQuery、JavaScript和CSS有扎实的知识。

每个框架都有自己强制执行样式等的方式，因此如果你要将多个平台组合在一起，通常会遇到问题，例如期望的框架样式未被应用。

我建议你坚持使用jQuery Mobile。jQuery Mobile 1.3具有很多响应式设计概念。在发布说明中，他们已经提到他们正在努力支持响应式设计。阅读jQuery Mobile提供的官方文档。这将为你提供一个良好的开端。

免责声明：我只使用过Twitter Bootstrap和jQuery Mobile。但我听说其他移动框架不如jQuery Mobile灵活。另外，请记住，与jQuery Mobile相比，Sencha Touch非常快速，但对于绝对初学者来说可能有些困难。

- Jay Mayu

Answer 3

我会推荐使用iUI，因为我正在使用它（嘿嘿），而且它就像一块空白画布，你可以在上面“绘制”任何你想要的东西。 JQuery Mobile 或 Sencha 都很不错，但是它们带有许多按钮和 UI 元素，您可能不需要这些元素用于网站。如果您想要为移动网站提供自定义外观，当所有东西都是预定义的时，它甚至会变得混乱。

据我所知，Zepto 只是一个更轻的 JQuery，所以它并不能解决您所链接的列表视图问题...

请尝试我的iUI v2项目Emy，您可以在此处尝试： http://www.emy-library.org/demos/ 仍有一些错误需要修复，但我离最初的发布非常接近。与 iUI 相比的主要区别包括 HTML5 语法、自定义动画、完整文档和 WindowsPhone 支持。 http://www.emy-library.org/documentation/1.0/getting-started.html

干杯！

- Remi Grumeau