Bulma El tamaño del contenido es un componente importante que se ha utilizado para definir el tamaño del contenido. Hay algunas etiquetas predefinidas para el contenido basadas en que esta clase establece el tamaño del contenido.
Clase de tamaño de contenido de Bulma:
- is-small: esta clase establece el tamaño del contenido pequeño.
- is-normal: esta clase establece el tamaño del contenido normal, que es el predeterminado.
- is-medium: esta clase establece el tamaño medio del contenido.
- is-large: esta clase establece el tamaño del contenido grande.
Sintaxis:
<div class="content Size class"> .... </div>
El siguiente ejemplo ilustra los tamaños de contenido de Bulma:
Ejemplo: En este ejemplo, mostraremos 4 tamaños diferentes del mismo contenido.
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success" > GeeksforGeeks </h1> <b>Bulma Content Size</b> <div class="has-text-left ml-4"> <div class="content is-small"> <h1>Small Size Content:</h1> <p> Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. </p> </div> <div class="content is-normal"> <h1>Normal Size Content:</h1> <p> Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. </p> </div> <div class="content is-medium"> <h1>Medium Size Content:</h1> <p> Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. </p> </div> <div class="content is-large"> <h1>Large Size Content:</h1> <p> Bulma is an Open source CSS framework developed by Jeremy Thomas. This framework is based on the CSS Flexbox property. </p> </div> </div> </body> </html>
Producción:
Tamaños de contenido de Bulma
Referencia: https://bulma.io/documentation/elements/content/#sizes
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA