如何应用Bootstrap Sidebar&边栏折叠菜单

时间:2016-06-10 11:55:14

标签: html css twitter-bootstrap

如何应用Bootstrap Sidebar&边栏折叠菜单

<ul class="nav nav-sidebar">
    <li>
        <a data-toggle="collapse" href="#collapseTwo"  aria-expanded="true"  data-parent="#accordion" > 
            <i class="glyphicon glyphicon-info-sign"></i>
            About Us
        </a>
    </li>
    <li>
        <ul id="collapseTwo" class="collapse">
            <li>
                <a href="<?php base_url() ?>Quote">Quote</a>
            </li>
            <br/>
            <li>
                <a href="<?php base_url() ?>Aboutus">About Us Page Content</a>    
            </li>
        </ul>
    </li>
</ul>

所以如何应用Bootstrap Sidebar&amp;补充工具栏仅折叠菜单

1 个答案:

答案 0 :(得分:1)

试试这段代码

<强> HTML

<ul id="nav">
    <li><a href="Home">Home</a></li>
    <li><a href="#">Products [+]</a>
        <ul>
            <li><a href="Products">All Products</a></li>
            <li><a href="#">Product1 [+]</a>
                <ul>
                    <li><a href="Product1">Product1</a></li>
                </ul>
            </li>
            <li><a href="#">Product2 [+]</a>
                <ul>
                    <li><a href="Product2">Product2</a></li>
                </ul>
            </li>                    
        </ul>
    </li>
    <li><a href="Services">Services [+]</a>
        <ul>
            <li><a href="service1">Service 1</a></li>
            <li><a href="service2">Service 2</a></li>
            <li><a href="service3">Service 3</a></li>
        </ul>
    </li>
    <li><a href="Support">Support</a></li>
    <li><a href="Contact">Contact</a></li>
</ul>

<强> demo