本文的目的是为使用 jQuery Mobile Bootstrap 主题插件的移动 Web 设计人员介绍一些表单或用户输入控件。这些基于 CSS 的 UI 控件非常有吸引力且具有交互性,可帮助开发人员构建漂亮的应用程序。
要设计和实现插件,请从链接下载所需的预编译文件或库并将其保存在您的工作文件夹中。编码时应注意文件路径名。
注意:请在以下所有代码中包含“head”部分,如第一个示例中实现的,用于插件的相关库包含,如上所示。
示例 1:以下代码演示了使用上述插件的特定类的一些 UI 表单控件。请参阅输出图像以更好地了解控件。
HTML
jQuery Mobile Bootstrap Theme - user form controls
html
jQuery Mobile Bootstrap Theme
html
html
jQuery Mobile Bootstrap Theme Listviews
- Gear list item
- list item 1
- Info style list item
- list item 1
- checkbox list item
- list item 1
- Grid style list item
- list item 1
- Alert list item
- list item 1
- Refresh list item
- list item 1
html
输出:
示例 2:
html
jQuery Mobile Bootstrap Theme
输出:
示例 3:以下代码显示了一些用于移动 UI 设计的按钮。
输出:
示例 4:以下代码显示了一些用于移动设计的列表视图。
html
jQuery Mobile Bootstrap Theme Listviews
- Gear list item
- list item 1
- Info style list item
- list item 1
- checkbox list item
- list item 1
- Grid style list item
- list item 1
- Alert list item
- list item 1
- Refresh list item
- list item 1
输出:
示例 5:以下示例显示了用于移动设计的各种导航控件。 “yourFile.html”是代码中使用的目标文件。开发人员可以根据需要包含文件名。
输出: