Bootstrap 4 navegadores
Menús de navegación
Si desea crear un menú horizontal simple, agregue la
.navclase a un <ul>elemento, seguido de .nav-item
para cada uno <li>y agregue la .nav-linkclase a sus enlaces:
Ejemplo
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Navegación alineada
Agregue la .justify-content-centerclase para centrar la navegación y la .justify-content-endclase para alinear la navegación a la derecha.
Ejemplo
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
Navegación vertical
Agregue la .flex-columnclase para crear una navegación vertical:
Ejemplo
<ul class="nav
flex-column">
Pestañas
Convierta el menú de navegación en pestañas de navegación con la .nav-tabsclase. Agregue la .activeclase al enlace activo/actual. Si desea que las pestañas se puedan alternar, vea el último ejemplo en esta página.
Ejemplo
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Pastillas
Convierta el menú de navegación en píldoras de navegación con la .nav-pillsclase. Si desea que las píldoras se puedan alternar, vea el último ejemplo en esta página.
Ejemplo
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Pestañas/píldoras justificadas
Justifique las pestañas/pastillas con la .nav-justifiedclase (igual ancho):
Ejemplo
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
Pastillas con menú desplegable
Ejemplo
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Pestañas con menú desplegable
Ejemplo
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</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
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="tab"
href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Píldoras conmutables/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.
El mismo código se aplica a las píldoras; solo cambie el atributo de alternancia de datos a data-toggle="pill":
Ejemplo
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link"
data-toggle="pill" href="#menu1">Menu 1</a>
</li>
<li
class="nav-item">
<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Referencia completa de Bootstrap 4 Nav
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 4 JS .