使用bootstrap3制作补充工具栏

Question

我想像这样制作边栏http://dota2.cyborgmatt.com/prizetracker/dotapits3

但是做不到。 每次我尝试失败。 您可以单击以显示侧边栏文本，它可以在右侧部分打开。

我是新人，谢谢。

Answer 1

我为引导程序创建了一个侧边栏，因为我没有找到我在互联网上搜索的内容，这是代码

CSS

#wrapper {
    margin-left: 200px;
}

#sidebar-wrapper {
    width: 200px;
    background: #555;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}

#sidebar-wrapper .logo {
    text-transform: uppercase;
    color: #FFF;
    text-align: center;
    padding: 15px 0;
    font-size: 36px;
    font-weight: bold;
    border-bottom: 1px solid #666;
}

#sidebar-wrapper .nav.nav-pills.nav-stacked {
    margin-top: 30px;
}

#sidebar-wrapper .nav.nav-pills.nav-stacked li {

}

#sidebar-wrapper .nav.nav-pills.nav-stacked li a {
    color: #FFF;
}

#sidebar-wrapper .nav.nav-pills.nav-stacked li a:hover {
    background: #333;
}



**HTML**

<div id="sidebar-wrapper">
    <div class="logo">
        LOGO
    </div>
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#"><span class="glyphicon glyphicon-th-list"></span> Produits</a></li>
        <li><a href=""><span class="glyphicon glyphicon-user"></span> Clients</a></li>
        <li><a href=""><span class="glyphicon glyphicon-calendar"></span> Réservations</a></li>
        <li><a href=""><span class="glyphicon glyphicon-shopping-cart"></span> Commandes</a></li>
        <li><a href=""><span class="glyphicon glyphicon-envelope"></span> Messages</a></li>
    </ul>
</div>

这是此Bootply中结果的示例

Answer 2

如果您已经在使用Bootstrap，则可以使用内置组件。 看看http://getbootstrap.com/components/#nav ，您就可以开始了。 您还可以分析示例中使用的代码，并查看其完成方式。 这很简单。

编辑：我摆弄一些东西： http : //jsfiddle.net/Ltyuxy7h/6/

<div class="row">
    <div class="col-xs-2">
        <ul class="nav>
            <li><a href="#">Testlink</a></li>
            <li><a href="#">Testlink</a></li>
            <li><a href="#">Testlink</a></li>
            <li><a href="#">Testlink</a></li>
            <li><a href="#">Testlink</a></li>
            <li><a href="#">Testlink</a></li>
        </ul>
    </div>
    <div class="col-xs-10">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </div>
</div>