bootstrap2bootstrap3的用法区别概述(四)

 

注:本篇涉及JavaScript插件在2和3中区别

 

一 、模态框(对话框)

  1. 当无需写js调用对话框时,2和3都可以通过按钮或者链接,设置data-toggle=”modal”, data-target=”#foo”或者href=”#foo”来启动。

  2.  3中为模态对话框添加了尺寸设置。

  3. 用来监听自己代码的事件名称变化,形如2中的show到3中是show.bs.modal。


二 、下拉菜单

  1.  3中多了4个事件,可供用户调用函数,show.bs.dropdown、hide.bs.dropdown等等。



三 、标签页

  1.   直接用标记实现tab的2和3基本一样,<ul>加类nav nav-tabs,<li>加data-toggle="tab"href="#tab1",一般情况下第一个<li>有自定义的active类,用来区分当前为选中标签,tab页内容部分必须包含在类为tab-content的div中,每个tab子内容加类tab-pane,且默认第一个有active类id="tab1"。

  2.   3中给tab切换时添加了过渡效果,第一个子tab内容可以加类fade 、in,后面几个加fade即可。