TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear la navegación Bootstrap 5?

9

El componente de navegación en Bootstrap se usa para crear una lista de enlaces con diferentes estilos. Básicamente, los enlaces de la lista se utilizan como menú de navegación. En este tutorial, exploremos diferentes estilos de enlaces que se pueden crear con el componente de navegación Bootstrap 5.

Tutorial de Bootstrap 5 Navs

  1. Crear enlaces de navegación básicos
  2. Vertical no
  3. Pestañas con navegación
  4. Agregar píldoras en nav
  5. Navegación con pastillas y alineación justificada
  6. Navegación receptiva
  7. Navegación con menú desplegable
  8. Nav con pestaña vertical y pastilla

1 Enlaces de navegación básicos

La navegación básica y predeterminada se verá a continuación:

El código para la navegación básica es el siguiente:

<ul class="nav"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

A continuación se muestran las clases utilizadas para crear el componente de navegación predeterminado:

  • Toda la navegación es una lista desordenada que utiliza la clase ".nav".
  • Cada
  • La etiqueta representa un elemento de navegación que utiliza la clase ".nav-item".
  • Dentro
  • etiqueta, la etiqueta de anclaje se utiliza para crear el enlace en el texto real utilizando la clase ".nav-link".

El contenido de nav se puede alinear al centro y a la derecha usando clases adicionales dentro

etiqueta de la siguiente manera:

  • <ul class = "nav justify-content-center”> – para alineación central.
  • <ul class = “nav justify-content-end”> – para alineación final o derecha.
  • <ul class = “nav nav-fill”>: rellena todo el ancho horizontal.
  • <ul class = “nav nav-justified”>: rellene todo el ancho horizontal con cada enlace de navegación que tenga el mismo ancho.

2 navegación vertical

Puede usar la clase "columna flexible" para hacer que todo el contenido de navegación esté alineado en enlaces verticales en lugar de horizontales, como se muestra a continuación:

Y el código para crear el componente de navegación vertical está a continuación:

<ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

3 Crear pestañas con Nav

También puede crear fácilmente contenido con pestañas usando la clase ".nav-tabs" dentro

etiqueta como a continuación:

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

La clase ".nav-tabs" convertirá la navegación predeterminada en una pestaña como la siguiente:

¿Cómo crear la navegación Bootstrap 5?

4 Agregar píldoras en Nav

Puede agregar píldoras, recuadro con el color de fondo principal, a los enlaces usando la clase ".nav-píldoras".

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

El resultado en el navegador se verá a continuación:

¿Cómo crear la navegación Bootstrap 5?

5 Navegación con pastillas y alineación justificada

Si desea que los elementos de navegación se justifiquen al ancho completo, agregue la clase ".nav-fill" como se muestra a continuación:

<ul class="nav nav-pills nav-fill"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

Producirá el siguiente resultado:

¿Cómo crear la navegación Bootstrap 5?

6 Componente de navegación receptiva

A partir de ahora, los componentes de navegación creados no responden y debe agregar clases de utilidad flexbox adicionales para que responda. Por ejemplo, podemos hacerlo flexible desde los dispositivos de tamaño mediano usando la clase ".flex-md-row" como se muestra a continuación:

<ul class="nav nav-pills flex-column flex-md-row"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

7 Agregar menú desplegable en Nav

Use la clase ".dropdown" para insertar un menú desplegable y luego los elementos del menú usando las clases ".dropdown-menu" y ".dropdown-item".

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> <a class="dropdown-item" href="#">Link 4</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Link 5</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 6</a> </li> </ul>

El componente de navegación desplegable con píldoras se verá a continuación:

¿Cómo crear la navegación Bootstrap 5?

8 Nav con pestañas verticales y píldoras

También puede usar el diseño de cuadrícula y crear un contenido con pestañas verticales usando el componente de navegación con píldoras.

<div class="row"> <div class="col-3"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"> <a class="nav-link active" id="v-pills-tab1-tab" data-toggle="pill" href="#v-pills-tab1" role="tab" aria-controls="v-pills-tab1" aria-expanded="true">TAB 1</a> <a class="nav-link" id="v-pills-tab2-tab" data-toggle="pill" href="#v-pills-tab2" role="tab" aria-controls="v-pills-tab2" aria-expanded="true">TAB 2</a> <a class="nav-link" id="v-pills-tab3-tab" data-toggle="pill" href="#v-pills-tab3" role="tab" aria-controls="v-pills-tab3" aria-expanded="true">TAB 3</a> <a class="nav-link" id="v-pills-tab4-tab" data-toggle="pill" href="#v-pills-tab4" role="tab" aria-controls="v-pills-tab4" aria-expanded="true">TAB 4</a> </div> </div> <div class="col-9"> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-tab1" role="tabpanel" aria-labelledby="v-pills-home-tab">Here is a content for tab 1.</div> <div class="tab-pane fade" id="v-pills-tab2" role="tabpanel" aria-labelledby="v-pills-tab2-tab">Here is a content for tab 2.</div> <div class="tab-pane fade" id="v-pills-tab3" role="tabpanel" aria-labelledby="v-pills-tab3-tab">Here is a content for tab 3.</div> <div class="tab-pane fade" id="v-pills-tab4" role="tabpanel" aria-labelledby="v-pills-tab4-tab">Here is a content for tab 4.</div> </div> </div> </div>

Producirá el siguiente resultado en el navegador:

¿Cómo crear la navegación Bootstrap 5?

Consulte el tutorial sobre el componente de la barra de navegación Bootstrap  para obtener más información sobre la barra de navegación.


Aprenda Bootstrap 5 (índice )


Fuente de grabación: webnots.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More