模态、下拉菜单 、切换标签页 区别 (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）