bootstrap2和bootstrap3的用法区别概述（四）

bootstrap2和bootstrap3的用法区别概述（四）

 

注：本篇涉及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等等。

2. 
   

三 、标签页

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即可。