menús
La mayoría de las páginas web tienen algún tipo de un menú.
En HTML, un menú se define a menudo en una lista desordenada <ul> (y peinado después), así:
<ul>
<li><a href="#">Home</a></li>
<li><a
href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> Si desea crear un menú horizontal de la lista anterior, agregue la .list-inline clase <ul> :
<ul class="list-inline"> Inténtalo tú mismo " O bien, puede mostrar el menú anterior con Bootstraps' Tabs and Pills (véase más adelante).
Nota: Véase el último ejemplo de esta página para encontrar la manera de hacer las pestañas y las píldoras conmutable / dinámico.
Pestañas
Las fichas se crean con <ul class="nav nav-tabs"> :
Consejo: también marcan la página actual con <li class="active"> .
El siguiente ejemplo crea pestañas de navegación:
Ejemplo
<ul class="nav nav-tabs">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Inténtalo tú mismo " Las fichas con menú desplegable
Pestañas también pueden contener menús desplegables.
El siguiente ejemplo añade un menú desplegable a "Menú 1":
Ejemplo
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Inténtalo tú mismo " Pills
Las píldoras se crean con <ul class="nav nav-pills"> . También marque la página actual con <li class="active"> :
Ejemplo
<ul class="nav nav-pills">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul> Inténtalo tú mismo " verticales Pills
Pills también se pueden visualizar verticalmente. Sólo tiene que añadir la .nav-stacked de clase:
Ejemplo
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Inténtalo tú mismo " Verticales Pills en una fila
Texto...
Texto...
Texto...
En el siguiente ejemplo, se coloca el menú píldora verticales dentro de la última columna. Así, en una gran pantalla el menú se mostrará a la derecha. Pero en una pequeña pantalla, el contenido se ajustará automáticamente en un diseño de una sola columna:
Ejemplo
<div class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li
class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div> Inténtalo tú mismo " Pills con el menú desplegable
Pills también pueden contener menús desplegables.
El siguiente ejemplo añade un menú desplegable a "Menú 1":
Ejemplo
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Inténtalo tú mismo " Centrados Tabs and Pills
Para el centro / justificar las pestañas y pills , utilice el .nav-justified clase.
Tenga en cuenta que en las pantallas más pequeñas que 768px, los elementos de la lista se apilan (contenido permanecerá centrado):
Ejemplo
<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu
1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu
3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills
nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Inténtalo tú mismo " Conmutable / Dynamic Tabs
CASA
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed no eiusmod tempor ut labore et dolore incididunt magna aliqua.
Para hacer el conmutable pestañas, agregar la data-toggle="tab" atributo para cada enlace. A continuación, añadir un .tab-pane clase con un identificador único para cada pestaña y se envuelven dentro de un <div> elemento con la clase .tab-content .
Si desea que las pestañas para aparecen y desaparecen al hacer clic sobre ellos, añadir el .fade clase para .tab-pane :
Ejemplo
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Inténtalo tú mismo " Conmutable / dinámicos Pills
El mismo código se aplica a las pills ; Sólo cambiar el atributo de conmutación de datos para data-toggle="pill" :
Ejemplo
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu
1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2"
class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 » Ejercicio 6»
Completar Bootstrap de navegación de referencia
Para una referencia completa de todas las clases de navegación, vaya a nuestra completa Bootstrap de navegación de referencia .
Para una referencia completa de todas las opciones de la ficha, métodos y eventos, visite nuestro Bootstrap JS Tab Referencia .