En Bulma podemos elegir el tamaño de las pestañas según nuestras necesidades. Bulma tiene pestañas principalmente en tres tamaños pequeño, mediano y grande. Para elegir el tamaño de las pestañas usamos la clase is-small, is-medium y is-large.
Clases de tamaño de pestañas Bulma:
- is-small-: Proporciona tamaño pequeño a las pestañas.
- is-medium-: Proporciona un tamaño medio a las pestañas.
- is-medium-: Proporciona un tamaño medio a las pestañas.
Sintaxis-:
<div class="tabs is-size"> ....... </div>
Ejemplo 1: Usaremos el modificador is-small para pestañas de tamaño pequeño.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Tab Size</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <div class="tabs is-small"> <ul> <li class="is-active"><a>GFG</a></li> <li><a>Course</a></li> <li><a>Practice</a></li> <li><a>Jobs</a></li> </ul> </div> </body> </html>
Producción-:
Tamaño de pestaña pequeño
Ejemplo 2: Usaremos el modificador is-medium para pestañas de tamaño mediano.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Tab Size</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <div class="tabs is-medium"> <ul> <li class="is-active"><a>GFG</a></li> <li><a>Course</a></li> <li><a>Practice</a></li> <li><a>Jobs</a></li> </ul> </div> </body> </html>
Producción-:
Tamaño de pestaña mediano
Ejemplo 3: Usaremos el modificador is-large para pestañas de gran tamaño.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Tab Size</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <div class="tabs is-large"> <ul> <li class="is-active"><a>GFG</a></li> <li><a>Course</a></li> <li><a>Practice</a></li> <li><a>Jobs</a></li> </ul> </div> </body> </html>
Producción-:
Tamaño de pestaña grande
Ejemplo 4: Uso de los tres tamaños en uno
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Tab Size</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <div class="tabs is-small"> <ul> <li class="is-active"><a>small</a></li> <li><a>Course</a></li> <li><a>Practice</a></li> <li><a>Jobs</a></li> </ul> </div> <div class="tabs is-medium"> <ul> <li class="is-active"><a>mediaum</a></li> <li><a>Course</a></li> <li><a>Practice</a></li> <li><a>Jobs</a></li> </ul> </div> <div class="tabs is-large"> <ul> <li class="is-active"><a>large</a></li> <li><a>Course</a></li> <li><a>Practice</a></li> <li><a>Jobs</a></li> </ul> </div> </body> </html>
Enlace de referencia: https://bulma.io/documentation/components/tabs/#sizes
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA