Question

我想像这样http://dota2.cyborgmatt.com/prizetracker/dotapits3

制作侧边栏

但不能这样做。我每次尝试都失败了。您可以单击侧栏文本，它可以在右侧部分向您打开。

我是新事物，谢谢你。

Answer 1

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

<强> 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>

使用bootstrap3制作补充工具栏

2 个答案: