如何使用 jQuery Mobile BootstrapTheme 插件为手机设计表单控件？

本文的目的是为使用 jQuery Mobile Bootstrap 主题插件的移动 Web 设计人员介绍一些表单或用户输入控件。这些基于 CSS 的 UI 控件非常有吸引力且具有交互性，可帮助开发人员构建漂亮的应用程序。

要设计和实现插件，请从链接下载所需的预编译文件或库并将其保存在您的工作文件夹中。编码时应注意文件路径名。

注意：请在以下所有代码中包含“head”部分，如第一个示例中实现的，用于插件的相关库包含，如上所示。

示例 1：以下代码演示了使用上述插件的特定类的一些 UI 表单控件。请参阅输出图像以更好地了解控件。

HTML

  

    
    
  
    
    
    
      
    
      
    
    
      
    
    
           

  

    

        

            

                jQuery Mobile Bootstrap Theme - user form controls
            
             
        
  
        
                
            

                
                

                    Text Input:
                    
                
                
                

                    Textarea:
                                        
                
                  
                
                

                    Search Input:
                    
                
                  
                
                

                    Toggle switch:
                    
                    Off
                    On
                    
                
                  
                
                

                    Slider:
                    
                
                  
                
                

                    

                        
Choose food of your choice:
                        
                        Pastas
  
                        
                        Pizzas
  
                        
                        Mexican Enchilada
  
                        
                        Indian Biryani
                    
                
                  
                
                

                    

                        

                            
                                Cancel
                             
                        
                        

                            
                                Submit
                            
                        
                    
                
            
  
        
    

  

输出：

示例 2：

html

    

    

       
jQuery Mobile Bootstrap Theme
                
    
    

  
      
                
  
      

         

        
Choose a sport:
        
        Hockey
  
        
        Badminton
  
        
        Tennis
  
        
        Football
           
        
  
        

        

        
Select Gender:
        
        Male
        
        Female
                              
        
        
  
        

        
                  Choose country:
                                    
          India
          Australia
          China
          Japan
        
        
                    
            
         
    
    

输出：

示例 3：以下代码显示了一些用于移动 UI 设计的按钮。

html

    

      

        
jQuery Mobile Bootstrap Theme Buttons
                
       
       
                
                
        Star button
        Search
         
               Check
         
                Info
         
                Download
          
                Delete
         
       
    

输出：

示例 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”是代码中使用的目标文件。开发人员可以根据需要包含文件名。

html

    

    
    
  
    
    
    
      
    
      
    
    
      
    
    
           

  

    

        

            
jQuery Mobile Bootstrap Theme - Navigation
                
        
  
        
    
            

                

                

                
Yes
                
No
                
Maybe
                
                
            
            

  
            

                
                        left
                
                       right                    
            
  
            
                 
                up
                down
            
  
            

                left                   
            
  
            
                 
                
                        right                   
            
  
                

                
                         down
            
              
        
    

    

输出：