السبت، 6 أغسطس 2016

Tabs


Tabs

Tabs

<div>
    @*nav-tabs*@
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#homeTab" data-toggle="tab">Home</a>
        </li>

        <li>
            <a href="#contactTab" data-toggle="tab">Contact</a>
        </li>

        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">
                <b class="caret"></b>
                Locations
            </a>
            <ul class="dropdown-menu">
                <li>
                    <a href="#egyptTab" data-toggle="tab">Egypt</a>
                </li>
                <li>
                    <a href="#usaTab" data-toggle="tab">USA</a>
                </li>
            </ul>
        </li>
    </ul>
    @*nav-tabs*@

    <div class="tab-content">

        <div id="homeTab" class="tab-pane active">
            <h3>Home Page</h3>
            <p>Home page content</p>
        </div>

        <div id="contactTab" class="tab-pane">
            <h3>Contact Page</h3>
            <p>Contact page content</p>
        </div>

        <div id="egyptTab" class="tab-pane">
            <h3>Egypt Page</h3>
            <p>Egypt page content</p>
        </div>

        <div id="usaTab" class="tab-pane">
            <h3>Usa Page</h3>
            <p>Usa page content</p>
        </div>
    </div>
</div>


ليست هناك تعليقات:

إرسال تعليق

يسعدني إرسال تعليقاتكم وأسئلتكم واقتراحاتكم