这篇文章主要讲解了“Bootstrap实现基本的输入框组实例”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Bootstrap实现基本的输入框组实例”吧！

专注于为中小企业提供成都做网站、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业共和免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了数千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

通过向输入域添加前缀和后缀的内容，可以向用户输入添加公共的元素。例如，可以添加美元符号，或者在 Twitter 用户名前添加 @，或者应用程序接口所需要的其他公共的元素。

向 .form-control 添加前缀或后缀元素的步骤如下：

• 把前缀或后缀元素放在一个带有 class .input-group 的

  中。

• 接着，在相同的

  内，在 class 为 .input-group-addon 的 内放置额外的内容。

• 把该 放置在 元素的前面或者后面。

为了保持跨浏览器的兼容性，请避免使用 元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class，输入框组是一个孤立的组件。

基本的输入框组

下面的实例演示了基本的输入框组：
实例

    
        
            @
            
        
        

        
            
            .00
        
        

        
            $
            
            .00
        
    

结果如下所示：

输入框组的大小

您可以通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm）来改变输入框组的大小。输入框中的内容会自动调整大小。

下面的实例演示了这点：

实例

    
        
            @
            
        
        

        
            @
            
        
        

        
            @
            
        
    

结果如下所示：

复选框和单选插件

您可以把复选框和单选插件作为输入框组的前缀或者后缀元素，如下面的实例所示：

实例

结果如下所示：

按钮插件

您也可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加 .input-group-addon class，您需要使用 class .input-group-btn 来包裹按钮。这是必需的，因为默认的浏览器样式不会被重写。下面的实例演示了这点：

实例

    
        
            
                
                    
                        Go!
                    
                    
                
            
            

            
                
                    
                    
                        Go!
                    
                
            
        
    

结果如下所示：

带有下拉菜单的按钮

在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可，如下面的实例所示：

实例

    
        
            
                
                    
                        下拉菜单                            
                        
                        
                            

                                功能
                            
                            

                                另一个功能
                            
                            

                                其他
                            
                            
                            

                                分离的链接
                            
                        
                    
                    
                
            
            

            
                
                    
                    
                        下拉菜单                            
                        
                        
                            

                                功能
                            
                            

                                另一个功能
                            
                            

                                其他
                            
                            
                            

                                分离的链接
                            
                        
                    
                
            
        
    

结果如下所示：

分割的下拉菜单按钮

在输入框组中添加带有下拉菜单的分割按钮，使用与下拉菜单按钮大致相同的样式，但是对下拉菜单添加了主要的功能，如下面的实例所示：

实例

    
        
            
                
                    
                        下拉菜单
                        
                            
                            切换下拉菜单
                        
                        
                            

                                功能
                            
                            

                                另一个功能
                            
                            

                                其他
                            
                            
                            

                                分离的链接
                            
                        
                    
                    
                
            
            

            
                
                    
                    
                        下拉菜单
                        
                            
                            切换下拉菜单
                        
                        
                            

                                功能
                            
                            

                                另一个功能
                            
                            

                                其他
                            
                            
                            

                                分离的链接
                            
                        
                    
                
            
        
    

结果如下所示：

感谢各位的阅读，以上就是“Bootstrap实现基本的输入框组实例”的内容了，经过本文的学习后，相信大家对Bootstrap实现基本的输入框组实例这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

分享题目：Bootstrap实现基本的输入框组实例
文章出自：http://www.tsicrk.com/article/pihiej.html

其他资讯

• mac版360极速浏览器怎样安装猫爪（imac装windows速度）
• 电脑开不了网络设置路由器设置
• 深入浅出Redis缓存储存的实现原理（redis缓存储存原理）
• 云PaaS向容器生态系统的演变之路
• 红帽Linux使用指南：安装Shadowsocks服务(红帽linux安装影梭)

• 

  网站建设专属方案

• 

  网站定制化设计

• 

  7X24小时服务

• 

  N对管家服务

让你的专属顾问为你服务

立即联系