Bulma es un marco CSS de desarrollo front-end de código abierto que se está volviendo más popular día a día. Es un marco increíble y actúa como una alternativa al marco Bootstrap. El conocimiento básico de CSS es más que suficiente para comenzar con este marco. Dado que Bulma se basa en Flexbox, responde por naturaleza.
Bulma es un marco poderoso y puede producir algunos resultados impresionantes. Contiene 40 archivos .sass (extensión CSS) donde cada archivo maneja diferentes componentes de la interfaz. La mejor parte de este marco es que es simple y su sintaxis es muy consistente para comprenderlo rápidamente.
Solo necesitamos un único archivo CSS para, para empezar, el marco de Bulma. Para comenzar, necesitamos instalar el archivo . CSS o instale los archivos .sass. En la plantilla Bulma Starter, entenderemos cómo crear una página simple con texto en la parte superior.
Consulte el artículo Introducción de Bulma para obtener más detalles.
Ejemplo 1: Este ejemplo demuestra la plantilla de inicio básica de Bulma CSS.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Starter Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>GFG Bulma starter template</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <section class="section"> <div class="container"> <h1 class="title"> Hey GeeksforGeeks! </h1> <p class="subtitle"> This is my <strong>Bulma</strong> template </p> </div> </section> </body> </html>
Salida :
Plantilla de inicio de Bulma
Ejemplo 2: Este ejemplo demuestra la plantilla básica de Bulma CSS Starter.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Starter Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>GFG Bulma starter template</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> </head> <body> <section class="section"> <div class="container"> <h1 class="title"> <p class="has-text-success"> GeeksforGeeks </p> </h1> <p class="subtitle"> <strong> GeeksforGeeks A Computer Science portal for geeks. <br> It contains well written, well thought and well explained <br> computer science and programming articles. </strong> </p> </div> </section> </body> </html>
Salida :
Plantilla de inicio de Bulma
Referencia: https://bulma.io/documentation/overview/start/#starter-template
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA