Twitter Bootstrap 中的数据切换属性

data-toggle 是 Bootstrap 中定义的 HTML-5 数据属性。使用它的好处是，您可以选择一个类或一个 id 并将元素与特定的小部件连接起来。例如，如果您选择一个元素并将 data-toggle 的属性指定为“折叠”，那么您基本上是通过使用 Bootstrap 在几分钟内使您的 div 可折叠。

此属性有 7 个值。

1. data-toggle = “collapse”当你想隐藏某个部分，让它只有在点击一个div时才出现时使用。假设 div 是一个按钮，因此当单击该按钮时，您要折叠的部分出现并使用该按钮重新出现。

例子：

HTML

 

    
        Data Toggle - Collapse example
    
 
    
 
    
 
    
    
 
    
    

 

    Welcome To GFG
    
        Learn More
    
     
    
        GeeksforGeeks is a computer science
        portal where you can learn
        programming. It is a platform
        where you can practice multiple
        languages content and many more.
    

 

输出：

通过 JavaScript –

Javascript

$('.collapse').collapse()

2. data-toggle = “dropdown”这可以添加到一个按钮来创建一个切换下拉菜单。

HTML

 

    
        Data Toggle - Collapse example
    
 
    
 
    
 
    
    
 
    
    

 

    Welcome To GFG
    
        
            Programming Languages
            
        
         
        
            C++
            Python
            R
            Java
        
    

 

输出：

通过 JavaScript –

Javascript

$('.dropdown-toggle').dropdown()

3. data-toggle = “modal” Modal是当事件发生时在页面顶部显示的对话框/弹出窗口。例如，当单击按钮时，会出现一个弹出窗口。

HTML

 

    
        Data Toggle - Collapse example
    
 
    
 
    
 
    
    
 
    
    

 

    Welcome To GFG
 
    
        Click here!
    
 
    
    
        
 
            
            
                
 
                    
                        Welcome!
                    
                
 
                
                     
                     

                        GeeksforGeeks is a computer
                        science portal where you can
                        learn programming. It is a
                        platform where you can practice
                        multiple languages content and
                        many more.
                    
 
 
                
 
                
                    
                        Go to GFG
                    
                     
                    
                        Close
                    
                
            
        
    

 

输出：

通过 JavaScript-

Javascript

$("#myModal").modal()

4. data-toggle = “scrollspy” Scrollspy 用于根据滚动位置更新/突出显示导航链接。当您向下滚动时，该特定部分的导航会突出显示。

HTML

 

    
        Bootstrap Example
    
 
    
    
 
    
 
    
    
 
    
    
 
    
        body {
            position: relative;
        }
 
        #about {
            padding-top: 50px;
            height: 500px;
            color: #fff;
            background-color: #510707;
        }
 
        #team {
            padding-top: 50px;
            height: 500px;
            color: #fff;
            background-color: #492020;
        }
 
        #Contact {
            padding-top: 50px;
            height: 500px;
            color: #fff;
            background-color: #165f8b;
        }
    
 

 

 
    
        
            
                
                    
                    
                    
                    
                    
                    
                
                GFG
            
            
                
                    
                        
                            About
                        
                        
                            Team
                        
                        
                            Contact
                        
                    
                
            
        
    
 
    
        About
         
         

            GeeksforGeeks is a computer
            science portal where you can
            learn programming. It is a
            platform where you can practice
            multiple languages content and
            many more.
        
 
 
    
 
    
        The team
         
         

            GeeksforGeeks is a computer
            science portal where you can
            learn programming. It is a
            platform where you can practice
            multiple languages content and
            many more.
        
 
 
    
    
        Contact Us!
         
         

            GeeksforGeeks is a computer
            science portal where you can
            learn programming. It is a
            platform where you can practice
            multiple languages content and
            many more.
        
 
 
    

 

输出：

通过 JavaScript-

Javascript

$('body').scrollspy({target: ".navbar"})

5. data-toggle = “tab”用于导航链接与其内容之间的平滑过渡。

HTML

 

    Bootstrap Example
    
    
 
    
 
    
    
 
    
    

 

    
        
            
                Home
            
            
                About
            
            
                Team
            
            Contact
            
        
 
        
            
                HOME
                 
                 

                    GeeksforGeeks is a computer
                    science portal where you can
                    learn programming. It is a
                    platform where you can practice
                    multiple languages content and
                    many more.
                
 
 
            
            
                ABOUT
                 
                 

                    GeeksforGeeks is a computer
                    science portal where you can
                    learn programming. It is a
                    platform where you can practice
                    multiple languages content and
                    many more.
                
 
 
            
            
                TEAM
                 
                 

                    GeeksforGeeks is a computer
                    science portal where you can
                    learn programming. It is a
                    platform where you can practice
                    multiple languages content and
                    many more.
                
 
 
            
            
                CONTACT
                 
                 

                    GeeksforGeeks is a computer
                    science portal where you can
                    learn programming. It is a
                    platform where you can practice
                    multiple languages content and
                    many more.
                
 
 
            
        
    

 

输出：

通过 JavaScript-

Javascript

$('.nav-tabs a').click(function(){
  $(this).tab('show');
})
 
 
$('.nav-tabs a[href="#home"]').tab('show')
 
$('.nav-tabs a:home').tab('show')
 
$('.nav-tabs a:team').tab('show')

6. data-toggle = “tooltip”用于在用户悬停在div上时创建一个小弹窗。

HTML

 

    Bootstrap Example
    
    
 
    
 
    
    
 
    
    

 

 
    
        Hover over me!
    
 
    
        
        
            Hi, welcome!
        
    

 

输出：

通过 JavaScript-

Javascript

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
 
// Select a specified element
$('#myTooltip').tooltip();

7. data-toggle = “popover”和tooltip很像，区别只是可以容纳更多的文字，可以有标题。

HTML

 

    Bootstrap Example
    
    
 
    
 
    
    
 
    
    

 

 
    
        Popover on bottom
    

 

输出：

支持的浏览器：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器