Создание боковой панели с bootstrap3

Question

Я хочу сделать врезку как этот http://dota2.cyborgmatt.com/prizetracker/dotapits3

, но не смог этого сделать. Каждый раз я пробовал и терпел неудачу. Вы можете щелкнуть по тексту боковой панели и открыть его в правой части.

Я новый вид вещей, спасибо.

Answer 1

Если вы уже используете Bootstrap, вы можете использовать испеченные компоненты. Взгляните на http://getbootstrap.com/components/#nav, и вы готовы к работе. Также вы можете проанализировать код, используемый в вашем примере, и посмотреть, как это делается. Это довольно просто.

EDIT: Я вертел что-то: 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> 

Answer 2

Я создал врезку для начальной загрузки, потому что я не нашел то, что я искал в интернете, вот код

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> 

Приведен пример le результата в этом Bootply