Bulma Content se usa para hacer la tarea de contenido en la web, como si no puedes usar CSS o cuando solo quieres usar etiquetas HTML directamente, usa el contenido como contenedor. Puede manejar casi cualquier etiqueta HTML como HTML <p> , <ul> , <ol> , <dl> , <h1> a <h6> , <blockquote> , <em> , <strong> , <table> , < etiquetas tr> , <th> y <td>.
Clase de contenido de Bulma:
- Ejemplo de Bulma Full: Este es el uso del contenido de Bulma como contenedor en página completa.
- Alternativas de listas ordenadas de contenido de Bulma: la alternativa de lista ordenada de contenido de Bulma se utiliza para especificar el tipo de orden que desea mostrar.
- Tamaños de contenido de Bulma: El tamaño de contenido de Bulma es un componente importante que se ha utilizado para definir el tamaño del contenido.
- Variables de Bulma: la variable de contenido de Bulma se utiliza para manipular la interfaz de contenido como el color, el peso, etc.
Sintaxis:
<div class="content is-normal"> .... </div>
El siguiente ejemplo ilustra el contenido de Bulma:
Ejemplo 1:
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</b> <div class="has-text-left ml-4"> <div class="content is-small"> <h1>Bulma 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> </body> </html>
Producción:
Ejemplo 2:
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</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="container"> <div class="columns has-text-left ml-6"> <div class="column content"> <ol class="is-lower-alpha"> <li>HTML</li> <li>CSS</li> <li>JS</li> </ol> </div> <div class="column content"> <ol class="is-lower-roman"> <li>HTML</li> <li>CSS</li> <li>JS</li> </ol> </div> </div> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/elements/content/
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA