将bootstrap tab bar转换为手机大小的手风琴菜单

Question

有没有办法在不添加插件的情况下将bootstrap tab bar转换为手机大小的手风琴？

bootstrap垂直标签的示例： http://www.bootply.com/74926

Answer 1

此代码将帮助其正常工作只需添加BootStrap和Jquery文件的CDNS

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h3>Tabs</h3>
            <!-- tabs -->

            <div class="tabbable" id="accordion">
                <ul class="nav nav-tabs">
                    <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a></li>
                    <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a></li>
                    <!--<li><a href="#twee" data-toggle="collapse" data-parent="#accordion" data-target="#twee">Twee</a></li>-->
                </ul>


                <div class="panel panel-default">

                    <div id="collapse1" class="panel-collapse collapse in">
                        <div class="panel-body">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">

                    <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                    </div>
                </div>

            </div>
            <!-- /tabs -->

        </div>

    </div><!-- /row -->

</div>