En Bulma , las etiquetas son muy útiles. Se puede utilizar para adjuntar información a un bloque u otro componente. Las etiquetas están disponibles principalmente en tres tamaños normal, mediano y grande. El tamaño predeterminado de las etiquetas es normal, el modificador is -normal se usa si tenemos que restablecer el tamaño de la etiqueta a normal.
Etiquetas de Bulma Clases de tamaño:
- is-normal: Es el tamaño por defecto de las etiquetas.
- is-medium: Se utiliza para dar un tamaño mediano a las etiquetas.
- is-large: Se utiliza para dar un tamaño grande a las etiquetas.
Sintaxis:
<li class="tag Tags-Size-class"> ...... </li>
Ejemplo 1: El siguiente código demuestra las clases i s-normal,is-medium,is-large del tamaño de etiqueta de Bulma.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Tag Size</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <li class="tag is-primary is-normal"> GeeksforGeeks </li> <li class="tag is-primary is-medium"> GeeksforGeeks </li> <li class="tag is-primary is-large"> GeeksforGeeks </li> </body> </html>
Producción:
Tamaño de etiqueta de Bulma
Ejemplo 2: También podemos cambiar el tamaño de la etiqueta a la vez.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Tag Size</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <h1 class="title is-5">All Tags of Normal Size</h1> <!-- All tags will be of normal size --> <div class="tags are-normal"> <li class="tag is-primary"> GeeksforGeeks </li> <li class="tag is-primary"> GeeksforGeeks </li> <li class="tag is-primary"> GeeksforGeeks </li> </div> <h1 class="title is-5"> All Tags of Medium Size </h1> <!-- All tags will be of medium size --> <div class="tags are-medium"> <li class="tag is-primary"> GeeksforGeeks </li> <li class="tag is-primary"> GeeksforGeeks </li> <li class="tag is-primary"> GeeksforGeeks </li> </div> <h1 class="title is-5"> All Tags of Large Size </h1> <!-- All tags will be of large size --> <div class="tags are-large"> <li class="tag is-primary"> GeeksforGeeks </li> <li class="tag is-primary"> GeeksforGeeks </li> <li class="tag is-primary"> GeeksforGeeks </li> </div> </body> </html>
Producción:
Tamaño de etiqueta de Bulma
Enlace de referencia: https://bulma.io/documentation/elements/tag/#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