1、模态框

1 
      2 Launch the modal 3  4 
     
       5     
      
        6         
       
         7             
        
          8                 
          9                     ×10                 11                 
         
Title
12             
        
13             
        
         14                 
         
I'm Body
15             
        
16 17             
        
         18                 
         ok19                 
         cancel20             
        
21 22         
       
23     
      
24 
     

通过data-target指定按钮的动作，通过data-dismiss来指定要关闭的view

 

在div中设置modal-dialog的class时，可以同时指定modal-lg,modal-sm来显示大、迷你的模态框，如果不指定则显示介于大和迷你之间的普通模态框

 

动态修改modal窗口的内容:具体操作就是窗口弹出的时候，①得到要显示的内容，是通过data方法，参数为（'whatever'）来得到，②得到p标签，③p标签设置内容，通过html方法来设置

1 Launch the modal 5  6 
     
       7     
      
        8         
       
         9             
        
         10                 
         11                     ×12                 13                 
         
Title
14             
        
15             
        
         16                 
         
I'm Body
17             
        
18 19             
        
         20                 
         ok21                 
         cancel22             
        
23 24         
       
25     
      
26 
     

1 $(document).ready(function () {2     $('#myModal').on('show.bs.modal', function () {3         var btn = $('#buttonLaunch');4         var text = btn.data('whatever');5         $('#MODALBODY').html(text);6     })7 })

 

 

2、下拉菜单

 

1 
     
       2  3     
       4         Button Triger 5          6      7  8     
      
        9         
       
TypeA
10         
       
hello
11         
       
hello
12         
       
13         
       
TypeB
14         
       
hello
15         
       
hello
16     
      
17 
     

 

3、滚动监听

 

 

4、标签页

 

1 
     
       2     
       3     
      
        4         
        5         
       
 6             Home 7         
 8         
       
 9             Profile10         
11         
       
12             Setting13         
14     
      
15 16     
      
       17         
       
        18             Home jkakflajsklfjkadsfjkash19         
       
20         
       
        21             Porfile klasjkdjfjaszkjahfzhangzhonglei22         
       
23         
       
        24             Setting aklsjjkadskalldskunyasha25         
       
26 27     
      
     

5、工具提示

1  Tooltip on left2 3     Tooltip on top4 5     Tooltip on bottom6 7     Tooltip on right

 

6、弹出框

 

 

1     5         点我弹出/隐藏弹出框6     

 

<h1>注意这里需要在js中进行一下配置，否则是不会生效的</h1>

 

$(document).ready(function () {    $("[data-toggle=popover]").popover();    $("[data-toggle=tooltip]").tooltip();})

 

7、警告框

 

     
              hello        
                  ×            
     

 

8、按钮

 

9、collapse

        collapse with id                collapse with href        
     
        
      
                   hello world        
      
    
     

 

10、carousel(旋转木马)

 

 

     
    
      
        
               
       
            
        
            
        
            
        
        
       
        
               
       
            
        
                
                         
         
                    
          
恭喜闪闪女士
                    
          
荣获全国比赛一等奖
                
         
            
        
            
        
                
                         
         
                    
          
恭喜kunyashaw
                    
          
荣获全国比赛一等奖
                
         
            
        
            
        
                
                         
         
                    
          
恭喜z
                    
          
荣获全国比赛一等奖
                
         
            
        
        
       
        
               
                               Previous                
                               Next