Pastillas y pastillas Bootstrap
Menús
La mayoría de las páginas web tienen algún tipo de menú.
En HTML, un menú a menudo se define en una lista desordenada <ul>(y luego se le da estilo), 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-inlineclase a <ul>:
<ul class="list-inline">
O puede mostrar el menú de arriba con las pestañas y píldoras de Bootstraps (ver más abajo).
Nota: Vea el último ejemplo en esta página para saber cómo hacer que las pestañas y las píldoras se puedan alternar/dinámicas.
Pestañas
Las pestañas se crean con <ul class="nav nav-tabs">:
Sugerencia: marque también 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>
Pestañas con menú desplegable
Las pestañas también pueden contener menús desplegables.
El siguiente ejemplo agrega un menú desplegable al "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>
Pastillas
Las pastillas 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>
pastillas verticales
Las píldoras también se pueden mostrar verticalmente. Solo agrega la .nav-stackedclase:
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>
Píldoras verticales en una fila
Texto...
Texto...
Texto...
El siguiente ejemplo coloca el menú de píldora vertical dentro de la última columna. Entonces, en una pantalla grande, el menú se mostrará a la derecha. Pero en una pantalla pequeña, el contenido se ajustará automáticamente a 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>
Pastillas con menú desplegable
Las píldoras también pueden contener menús desplegables.
El siguiente ejemplo agrega un menú desplegable al "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>
Pestañas y píldoras centradas
Para centrar/justificar las pestañas y pastillas, utilice la .nav-justifiedclase.
Tenga en cuenta que en las pantallas de menos de 768 px, los elementos de la lista se apilan (el 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>
Fichas alternables/dinámicas
CASA
El dolor en sí es importante, pero el dolor aumenta con el proceso de adipiscencia, pero le doy tiempo para reducirlo para que haga un gran trabajo y dolor.
Para que las pestañas se puedan alternar, agregue el data-toggle="tab"atributo a cada enlace. Luego agregue una .tab-paneclase con una ID única para cada pestaña y envuélvala dentro de un
<div>elemento con clase .tab-content.
Si desea que las pestañas aparezcan y desaparezcan al hacer clic en ellas, agregue la
.fadeclase a .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>
Píldoras conmutables/dinámicas
El mismo código se aplica a las píldoras; solo cambie el atributo de alternancia de datos a 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>
Referencia completa de navegación de Bootstrap
Para obtener una referencia completa de todas las clases de navegación, vaya a nuestra completa Referencia de navegación de Bootstrap .
Para obtener una referencia completa de todas las opciones de pestañas, métodos y eventos, vaya a nuestra Referencia de pestañas de Bootstrap JS .