模态、下拉菜单 、切换标签页 区别 (Bootstrap)

模态和切换标签页 ： 用的是data-toggle和data-target这两个属性

---

下拉菜单：用的是data-toggle

---

---

<ul class="nav nav-tabs">    <li class="active"><a data-toggle="tab" data-target="#haitao">xuhaitao</a></li>    <li>        <a data-toggle="tab" data-target="#haihuan">xuhaihuan</a>    </li>    <li><a data-toggle="tab" data-target="#hairu">xuhairu</a></li>    <li><a data-toggle="tab" data-target="#guozhu">xuguozhu</a></li></ul><div class="tab-content">    <div class="tab-pane active" id="haitao">        xuhaitao    </div>    <div class="tab-pane" id="haihuan">        xuhaihuan    </div>    <div class="tab-pane" id="hairu">        xuhairu    </div>    <div class="tab-pane" id="guozhu">        xuguozhuuu    </div></div><div class="space-30"></div><div class="space-30"></div><ul class="nav nav-tabs">    <li class="active"><a>chengyujie</a></li>    <li>        <a data-toggle="dropdown">xuhaitao</a>        <ul class="dropdown-menu">            <li><a>aaaa</a></li>            <li><a>bbbb</a></li>            <li><a>cccc</a></li>            <li><a>dddd</a></li>        </ul>    </li>    <li><a>xuhaihuan</a></li>    <li><a>xuhairu</a></li>    <li><a>xuguozhu</a></li></ul><div class="page-header"></div><div class="space-30"></div><ul class="nav nav-tabs">    <li class="active"><a>xuhaitao</a></li>    <li><a data-toggle="modal" data-target="#juanjuan">xuhaihuan</a></li>    <li><a>xuhairu</a></li>    <li><a>xuguozhu</a></li>    <li><a>xuguoming</a></li></ul><div class="modal fadeInDown" id="juanjuan">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">                <h3>这是一个模态对话框</h3>            </div>            <div class="modal-body">                <form>                    <div class="form-group">                        <label>用户名：</label>                        <input type="text" class="form-control" name="username"/>                    </div>                    <div class="form-group">                        <label>密码：</label>                        <input type="text" class="form-control" name="username"/>                    </div>                    <div class="form-group">                        <label>地址：</label>                        <input type="text" class="form-control" name="username"/>                    </div>                    <div class="form-group">                        <label>手机号：</label>                        <input type="text" class="form-control" name="username"/>                    </div>                </form>            </div>            <div class="modal-footer">                <a class="btn btn-primary" data-dismiss="modal">取消</a><a class="btn btn-primary">确定</a>            </div>        </div>    </div></div>

---

---

FR:海涛高软（QQ技术交流群：386476712）