Bulma es un marco CSS de código abierto que proporciona componentes prediseñados que se pueden combinar para crear sitios web y aplicaciones web receptivos. En Bulma, podemos alinear la lista de pestañas en el centro, derecha e izquierda.
Clases de alineación de pestañas de Bulma:
- is-centered: Esta clase se utiliza para centrar la lista de la pestaña.
- is-left: Esta clase se utiliza para alinear la lista de la pestaña de la izquierda.
- is-right: Esta clase se utiliza para alinear la lista de la pestaña de la izquierda.
Sintaxis:
<div class="tabs is-centered">
...
</div>
Ejemplo 1: En el siguiente ejemplo, usamos is-centered para hacer la posición de las pestañas en el centro.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Tabs Alignment</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h2 class="is-size-2 has-text-success"> GeeksforGeeks </h2> <b>Bulma Tabs Alignment</b><br> <div class="tabs is-centered"> <ul> <li class="is-active"><a>GFG</a></li> <li><a>Courses</a></li> <li><a>Practice</a></li> <li><a>Jobs</a></li> </ul> </div> </body> </html>
Producción:
Alineación de la pestaña central de Bulma
Ejemplo 2: En el siguiente ejemplo, usamos is-left para hacer la posición de las pestañas a la izquierda.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Tabs Alignment</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <h2 class="is-size-2 has-text-success"> GeeksforGeeks </h2> <b>Bulma Tabs Alignment</b><br> <div class="tabs is-left"> <ul> <li class="is-active"><a>GFG</a></li> <li><a>Courses</a></li> <li><a>Practice</a></li> <li><a>Jobs</a></li> </ul> </div> </body> </html>
Producción:
Alineación a la izquierda de la etiqueta de Bulma
Ejemplo 3: En el siguiente ejemplo, usamos is-right para hacer la posición de las pestañas a la derecha.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Tabs Alignment</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h2 class="is-size-2 has-text-success"> GeeksforGeeks </h2> <b>Bulma Tabs Alignment</b><br> <div class="tabs is-right"> <ul> <li class="is-active"><a>GFG</a></li> <li><a>Courses</a></li> <li><a>Practice</a></li> <li><a>Jobs</a></li> </ul> </div> </body> </html>
Producción:
Alineación derecha de las pestañas de Bulma
Referencia: https://bulma.io/documentation/components/tabs/
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA