Bootstrap自带的那些常用插件。

模态框

模态框的HTML代码放置的位置

务必将模态框的HTML代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。

HTML代码：

       Launch demo modal
     
     
  
      
    
       
      
        
        
         ×        
         
Modal title
      
        
      
        
                 ...      
        
      
        
        
         Close        
         Save changes      
        
    
       
  
      
     

注意：

• 通过为模态框设置 .bs-example-modal-lg和 .bs-example-modal-sm来控制模态框的大小。
• 通过 .fade类来控制模态框弹出时的动画效果（淡入淡出效果）。
• 通过在 .modal-bodydiv中设置 .row可以使用Bootstrap的栅格系统。

调用方式：

1.通过data属性

通过在一个触发弹出模态框的元素（例如：按钮）上添加 data-toggle="modal"属性，然后设置 data-target="#foo"属性或 href="#foo"属性，用来指向被控制的模态框。

显示模态框

2.通过JS代码调用

$('#myModal').modal("show");  // 显示$('#myModal').modal("hide")   // 隐藏

常用参数：

名称	可选值	默认值	描述
backdrop	true/false/'static'	true	false表示有没有遮罩层，'static'表示点击遮罩层不关闭模态框
keyboard	true/false	true	键盘上的 esc 键被按下时关闭模态框。
show	true/false	true	模态框初始化之后就立即显示出来。

方法：

$('#myModal').modal({  keyboard: false})

轮播图

HTML代码：

     
  
        
      
    
       
    
       
    
       
  
      
  
        
      
    
       
      
              
        
                 ...      
        
    
       
    
       
      
              
        
                 ...      
        
    
       
    ...  
      
  
        
              Previous    
              Next  
     

可以在为图片添加介绍信息：

     
  
        
      
    
       
...
    
       
...
  
      
     

方法：

设置切换间隔为2秒，默认是5秒。

$('.carousel').carousel({  interval: 2000})