Menú de la barra lateral de Bootstrap y navigation de la barra lateral

Estoy usando bootstrap y simplemente creo que quería crear un website receptivo, por eso me presiono para usar bootstrap.

Lo que quiero hacer es algo así como en la foto. (NOTA: no toda la página, sino solo la barra lateral con los icons.) Eso es exactamente lo que quiero en mi barra lateral. Vería muchas templates que se parecen a la foto (la barra lateral) pero nada es realmente lo mismo que lo que quiero que suceda.

¿Alguien puede ayudarme, por favor?

sidebarnav

El Bootstrap clásico no tiene un componente de barra lateral incluido, debes buildlo tú mismo. Si quieres comenzar más fácilmente, te mostraré un ejemplo rápido de código.

Entonces, toma un botín en el CSS:

#wrapper { padding-left: 250px; transition: all 0.4s ease 0s; } #sidebar-wrapper { margin-left: -250px; left: 250px; width: 250px; background: #000; position: fixed; height: 100%; overflow-y: auto; z-index: 1000; transition: all 0.4s ease 0s; } #page-content-wrapper { width: 100%; } .sidebar-nav { position: absolute; top: 0; width: 250px; list-style: none; margin: 0; padding: 0; } .sidebar-nav li { line-height: 40px; text-indent: 20px; } .sidebar-nav li a { color: #999999; display: block; text-decoration: none; } .sidebar-nav li a:hover { color: #fff; background: rgba(255,255,255,0.2); text-decoration: none; } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 65px; line-height: 60px; font-size: 18px; } .sidebar-nav > .sidebar-brand a { color: #999999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } .content-header { height: 65px; line-height: 65px; } .content-header h1 { margin: 0; margin-left: 20px; line-height: 65px; display: inline-block; } #menu-toggle { display: none; } .inset { padding: 20px; } @media (max-width:767px) { #wrapper { padding-left: 0; } #sidebar-wrapper { left: 0; } #wrapper.active { position: relative; left: 250px; } #wrapper.active #sidebar-wrapper { left: 250px; width: 250px; transition: all 0.4s ease 0s; } #menu-toggle { display: inline-block; } .inset { padding: 15px; } } 

y la parte HTML de la barra lateral:

 <!-- Sidebar --> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li class="sidebar-brand"><a href="#">Start Bootstrap</a> </li> <li><a href="#">Dashboard</a> </li> <li><a href="#">Shortcuts</a> </li> <li><a href="#">Overview</a> </li> <li><a href="#">Events</a> </li> <li><a href="#">About</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">Contact</a> </li> </ul> </div> 

Espero que te ayude!

Este HTML estaría debajo de la barra de navigation superior donde comienza su cuerpo de contenido.

 <div class= "row"> <div class="col-xs-3"> <!-- this is your sidebar area --> <div class= "container">image </div> <div class= "container">heading </div> </div> <div class= "col-xs-9"> <!-- this is the rest of your content area --> </div> </div> 

bootstrap tiene una barra lateral incorporada

 nav-sidebar 

En realidad, hay una plantilla en el sitio de arranque, obviamente para que se vea como la que está por encima de la necesidad de personalizar un poco.

si buscas glifos adicionales como el ejemplo anterior, puedes echar un vistazo a font-awesome