📌  相关文章
📜  如何使用 jQuery Mobile BootstrapTheme 插件为手机设计表单控件?

📅  最后修改于: 2021-11-24 05:43:06             🧑  作者: Mango

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

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

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

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

HTML


  

    
    
  
    
    
    
      
    
      
    
    
      
    
    
           

  

    
        
            

                jQuery Mobile Bootstrap Theme - user form controls             

                      
           
                             
                                 
                                                          
                                 
                                                          
                                                    
                                                          
                                                    
                                                          
                                                    
                                                          
                                                    
                    
                        Choose food of your choice:                                                                                                                                                                                                                                      
                
                                                    
                    
                        
                                                      
                        
                                                     
                    
                
            
           
    
  


html



    
    
       

jQuery Mobile Bootstrap Theme

                     
    
         
                          
         
        Choose a sport:                                                                                             
        
           
        
        Select Gender:                                                                            
        
           
                          
                                 
         
    
    


html


    
      
        

jQuery Mobile Bootstrap Theme Buttons

                        
       
                                          Star button         Search                          Check                           Info                           Download                            Delete          
       
    


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


    

    
    
  
    
    
    
      
    
      
    
    
      
    
    
           

  

    
        
            

jQuery Mobile Bootstrap Theme - Navigation

                         
           
                 
                
                
                    
  • Yes
  •                 
  • No
  •                 
  • Maybe
  •                 
                
            
            
               
                                         left                                         right                                 
               
                                  up                 down             
               
                left                                
               
                                                           right                                
                   
                                          down             
                       
    
    


输出:

示例 2:

html




    
    
       

jQuery Mobile Bootstrap Theme

                     
    
         
                          
         
        Choose a sport:                                                                                             
        
           
        
        Select Gender:                                                                            
        
           
                          
                                 
         
    
    

输出:

示例 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             
                       
    
    

输出: