Bootstrap教程笔记-JS插件3/3

学习bootstrap插件的时候，很多时候要看着版本2里面的介绍，不然多多少少的会懵逼一两次

Bootstrap-JS插件

bootstrap.js提供了各种各样的JS特效。如果只想要其中的某种特效，只要引种其中某一个单独的文件即可

一、模态框 modal.js

1.静态

结构为：(modal) > (modal-dialog) > (modal-content )> (modal-header + modal-body + modal-footer)

    

      

        

        
          

            
               ×
            
            
标题
          
          

            
中心内容
          
          

            关闭
            按钮
          
        

      

    

2.动态

在我们之前的静态基础上加上一个激活按钮即可,静态的ID要和按钮的data-target绑定

    
      激活按钮
    

3.尺寸

我们modal元素的下一层元素 modal-dialog就起到了控制尺寸大小的作用，在此基础上，还有两个状态，更大和更小

    

      

        

          ...
        
      
    

    

      

        

          ...
        
      
    

4.禁止动画效果

只要在modal标签元素中，去掉 fade 类即可

5.通过JS调用

modal元素添加属性tabindex="-1"

参数	类型	默认值	功能
keyboard	boolean	true	键盘上的 esc 键被按下时关闭模态框。
show	boolean	false	模态框初始化之后就立即显示出来

    $('#myModal').modal(参数)

二、下拉菜单 dropdown.js

见css组件-下拉菜单部分

三、滚动监听 scrollspy.js

只需将data-spy="scroll"添加到被监听的页面元素上（大部分情况是添加到body上），再用data-target=".navbar"将导航绑定。

    ...

    
...

必须为导航条中的链接指定相应的目标id。

   
       ...
       
home
       ...
   

    

        

            
home
            ...
        
    

四、标签页（选项卡）tab.js

1.html结构

要在a标签中的href属性或者data-target中指定目标内容

    

        
主页
        ...
        
新闻
    

在目标内容中写入相应的ID名

    

      
...
       ...
      
...
    

2.属性调用

在a标签中将data-toggle属性设置为：tab或者pill指定相应内容

    

      
首页
       ...
      
新闻
    

3.JavaScript调用

通过JavaScript启动标签页（每个标签都需要被单独激活），需要给导航添加一个ID值

    $('#myTab a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    })

五、工具提示 tooltip.js

1.html结构

a标签或者按钮标签,为data-toggle属性添加属性值tooltip

  苹果

2.激活

    $(function () {
      $('[data-toggle="tooltip"]').tooltip()
    })

3.方向

为data-placement属性添加left、right、top、bottom方向属性值

  苹果

六、弹出框 popover.js

1.基础代码

title属性添加标题，data-content属性添加文本内容，data-toggle绑定弹出框

    
      点我弹出/隐藏弹出框
    

2.激活

 $(function () {
      $('[data-toggle="popover"]').popover()
    })

3.方向

用法和工具提示一样：data-placement="left/right/top/bottom"

4.可消失的弹出框

为了更好的跨浏览器和跨平台效果，你必须使用 a 标签，不能使用 button 标签，并且，还必须包含 data-trigger="focus" 和 tabindex 属性。

    
     可消失的弹出框
    

七、折叠 collapse.js

data-toggle绑定collapse,如果是button则用data-target连接内容ID

    按钮
    按钮

内容类名为.collapse，ID值要和按钮响应。.well标签包裹着弹出的内容

    

      

        ...
      
    

八、轮播图 carousel.js

使用data属性可以很容易的控制轮播的位置。data-slide内可以包含prev 或 next，他们可以改变当前帧。另外，使用data-slide-to可以传递某个帧的下标，例如data-slide-to="2"，这样就可以直接跳转到这个指定的帧 -- 下标从0开始计算

    

       
      

        

        

        

      
      
      

        
1
        
2
        
3
      
      
      ‹
      ›