Comienza con Bulma

Sep 16, 2025

Cómo

[dieciséis] (Crédito de la imagen: Bulma)

¿Quieres empezar a usar Bulma? Estás en el lugar correcto. Bulma es un marco popular de CSS con un simple sistema de cuadrícula FlexBox. Se diferencia de otros marcos al tomar un enfoque más ligero y, incluir a ningún JavaScript, dejando esa decisión enteramente al desarrollador (para explorar otras opciones, consulte nuestra selección de la selección de la mejores marcos de CSS ).

En este tutorial, demostraremos cómo instalar Bulma y construirá un sitio web con sus diversas clases. Para probar cuán versátiles se encuentran las clases en Bulma, se ha construido toda la página Tutorial sin escribir una sola línea de CSS. ¿Quieres otras opciones? Prueba un excelente Creador de sitios web . Y para asegurarse de que su sitio se ejecute en su mejor momento, elija la derecha Alojamiento web Servicio.

Haga clic para descargar los archivos tutoriales.

Generar CSS es el evento web más caliente en la ciudad. Del 20-22 septiembre puede recoger un boleto por medio precio usando el código Flashsale5. Haga clic en la imagen para obtener más información.

01. Comienza

Crea un nuevo directorio, y dentro de él, crea un index.html expediente. Abra este archivo en un editor de código y cree un documento HTML de inicio simple, con un DOCTYPE HTML y una etiqueta de RESPUESTOS.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; cabeza y gt;
& lt; meta name = "viewport" content =
"Ancho = ancho de dispositivo, escala inicial = 1" & gt;
& lt; title & gt; Título de la página & LT; / Title & GT;
& lt; / cabeza y gt;
& lt; cuerpo y gt;
& lt; / body & gt;
& lt; / html & gt;

02. Instalar Bulma

Usando Bulma, la casilla es tan rápida como agregar un solo archivo CSS. Uso del CDN Agregue un enlace en el HTML. Si es necesario cambiar las variables y tener más control sobre el marco, NPM Instalar Bulma se puede utilizar (ver el documentación completa ). Para la experiencia completa, también se debe incluir la fuente impresionante 5.

 & lt; link rel = "stylesheet" href = "https://cdnjs.cloudflae.com/ajax/libs/bulma/0.7.5/css/bulma.min.csss" & gt;
& lt; script defer src = "https://use.fontawesome.com/releses/v5.3.1/js/all.js" & gt; & lt; / script & gt;

03. construir una página

Dentro de la etiqueta del cuerpo, crea un elemento de sección y un div que la clase envase . Dentro del contenedor, crea un H1 con la clase. título Entonces un párrafo con la clase. subtitular . Por ahora, ingrese 'Hello World' en el título y algún texto en el párrafo. Ahora tenemos la plantilla de inicio básica para Bulma.

 & lt; Sección Class = "Sección" & GT;
& lt; div clase = "contenedor" y gt;
& lt; H1 Class = "Título" & GT;
Hola Mundo
& lt; / h1 & gt;
& lt; p Class = "Subtitle" & GT;
Este es el arranque básico.
Plantilla para Bulma
& lt; / p & gt;
& lt; / DIV & GT;
& lt; / Sección y GT;

04. Crea una barra de héroe superior.

Haz una nueva sección por encima de la anterior, y en lugar de la clase. sección , dale la clase héroe . La clase de héroe permite la creación de un banner de ancho completo, con una variedad de opciones que controlan su altura. Dentro de esta nueva sección crea un div con la clase. cuerpo de héroe y luego un envase Esto mantendrá el contenido.

 & lt; Sección Class = "Hero" & GT;
& lt; div clase = "héroe-cuerpo" & gt;
& lt; div clase = "contenedor" & gt; ... & lt; / DIV & GT;
& lt; / DIV & GT;
& lt; / DIV & GT;

05. Añadir título y subtítulos.

Dentro del contenedor DIV, agregue una etiqueta H1 y H2 con las clases título y subtitular . Estas son clases de tipografía que aumentarán el tamaño de su contenido. Bulma es inteligente para saber cuándo se combinan un título y subtítulos, y los acercarán a los acercados.

06. Añadir un salpicaduras de color

Añadir la clase es-primario a la sección del héroe. Esto aplicará el color primario al fondo, y cambiará el texto a la variante más ligera. En vez de primario De información De éxito De advertencia De peligro De ligero y oscuro también puede ser elegido

 & lt; Sección Class = "Hero is-Primary" & GT;

07. Dividir el contenido en columnas.

El primer área de contenido del sitio web se divide en dos columnas. Haga una nueva sección con la sección de la clase y agregue un contenedor. Para configurar las columnas, se agrega un div con columnas clase. Cada columna se agrega dentro del contenedor principal. Las columnas se espaciarán por igual en el espacio disponible con una pequeña brecha entre a menos que se especifique.

Si tiene mucho contenido, asegúrese de respaldar sus activos en un almacenamiento de nubes confiable.

 & lt; Sección Class = "Sección" & GT;
& lt; div clase = "contenedor" y gt;
& lt; div clase = "columnas is-vcentered" & gt;
& lt; div clase = "columna" & gt;
...
& lt; / DIV & GT;
& lt; div clase = "columna" & gt;
...
& lt; / DIV & GT;
& lt; / DIV & GT;
& lt; / DIV & GT;
& lt; / Sección y GT;

08. Crear imágenes receptivas.

La segunda columna contendrá una imagen. Envuelva la imagen en un elemento de figura y, si es posible, proporcione la clase de una clase de la relación de aspecto de la imagen. En el ejemplo, 16by9 ha sido utilizado (ver el Lista completa de ratios disponibles ).

 & lt; div clase = "columna" & gt;
& lt; figura clase = "image is-16by9" & gt;
& lt; img src = "img / dog.jpg" & gt;
& lt; / figura & gt;
& lt; / DIV & GT;

09. Sugerir acción con botones.

La clase de botón crea botones coloridos y se puede aplicar. & lt; a & gt; elementos o & lt; Button & GT; elementos en los formuladores. Dos botones a la primera columna y aplicarlos los modificadores de color. Si usa más de un botón, envíales en un div con la clase botones , que corrige la brecha y permite la aplicación de clases como grupo.

 & lt; div clase = "botones" & gt;
& lt; una clase = "botón es-info" & gt;
Averiguar más y lt; / a & gt;
& lt; una clase = "botón is-danger está definido" & gt;
Compre ahora & lt; / a & gt;
& lt; / DIV & GT;

10. Crear contenido en caja

Agregue una nueva sección en la parte inferior de la página con tres columnas. Dentro de las columnas, se agrega un elemento de caja. Los elementos de la caja son recipientes simples con un borde a su alrededor que los separan desde el fondo de una página.

 & lt; div clase = "columna" & gt;
& lt; div class = "box" & gt;
Prueba
& lt; / DIV & GT;
& lt; / DIV & GT;

11. Use cajas icónicas.

Bulma se integra con la fuente impresionante 5, pero es compatible con todas las bibliotecas de fuentes y tiene clases para llamar a los iconos más disponibles. Dentro de cada caja, agregue un contenedor de contenido, seguido de un elemento de intervalo con la clase icono . Dentro del lapso, use un & lt; i & gt; Elemento para llamar a las clases requeridas para el icono deseado. Los iconos se colorean de la misma manera que el texto.

 & lt; div clase = "contenido" & gt;
& lt; span class = "icon" & gt;
& lt; i clase = "fas fa-lg fa-home
Has-TEXT-Success "& gt; & lt; / i & gt; / i & gt;
& lt; / span & gt;
& lt; div class = "title is-size-6" & gt; ... & lt; / div & gt;
& lt; div class = "subtitle es-size-6" & gt; ... & lt; / div & gt;
& lt; / DIV & GT;

12. ser audaz

Cree una nueva sección de héroe de dos columnas en la parte inferior de la página, dando una is-info clase a la sección. Para un efecto interesante, también aplica el es negrita Clase a esta sección para un gradiente sutil. Este modificador funciona con los siete de los colores principales.

13. Cambia los niveles.

Los niveles son una excelente manera de asegurarse de que los elementos se centren verticalmente en una fila. Dentro de una nueva sección en la parte inferior de la página, agregue un div con la clase de nivel y nido dentro de los elementos de cuatro niveles. Cualquier contenido agregado dentro de un elemento de nivel estará alineado verticalmente.

 & lt; div clase = "nivel" & gt;
& lt; div class = "Level-item tiene-centrado-centrado" & gt;
...
& lt; / DIV & GT;
& lt; div class = "Level-item tiene-centrado-centrado" & gt;
...
& lt; / DIV & GT;
& lt; / DIV & GT;

14. Añadir y controlar formularios.

Para agregar un formulario a la parte inferior de la página, haga una nueva sección de héroe de dos columnas con es-primario . Dividí en dos columnas, y en la columna derecha, crea un campo clase. La clase de campo se utiliza para agrupar varias entradas de forma juntas, asegurando que estén espaciadas adecuadamente. Cada entrada también debe envolverse en un individuo .control clase.

 & lt; div clase = "campo" & gt;
& lt; div clase = "Control tiene-Icons-Izd
Has-Icons-Right "& GT;
& lt; entrada clase = "entrada" tipo = "correo electrónico"
Placeholder = "Su correo electrónico" & GT;
& lt; span class = "icon is-small
is-izquierda "& gt;
& lt; i clase = "fas fa-envolvimiento" & gt; & lt; / i & gt; / i & gt; / i & gt;
& lt; / span & gt;
& lt; / DIV & GT;
& lt; / DIV & GT;

15. Dar feedback de los usuarios.

Una vez enviado un formulario, debe devolver un mensaje a los usuarios para que sepan lo que sucede a continuación. Aunque Bulma no puede controlar cuando se mostrará este mensaje, la parte frontal se puede construir con la clase de mensaje.

 & lt; Artículo clase = "mensaje is-info" & gt;
& lt; div class = "Mensaje-encabezado" y GT;
& lt; p & gt; gracias! & lt; / p & gt;
& lt; / DIV & GT;
& lt; div clase = "Mensaje-cuerpo" y GT;
... & lt; / DIV & GT;
& lt; / Artículo & gt;

16. Añadir un pie de página

La clase de pie de página flexible permite agregar cualquier elemento en la parte inferior de una página, proporcionando un lugar para información de derechos de autor y navegación inferior, además de traer un final al sitio web.

 & lt; Footer Class = "Footer" & GT;
& lt; div clase = "contenido tiene-centrado en el texto" & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / DIV & GT;
& lt; / footer & gt;

17. Personalizar las variables

La mayoría de los proyectos, más allá de los prototipos, tendrán un requisito para trabajar con una marca de marca y colores. De manera similar, es seguro asumir que un diseñador deberá cambiar las fuentes, los colores u otros aspectos de Bulma. Una parte importante de Bulma es que es personalizable y modular. Los módulos no solo pueden importarse selectivamente, pero se pueden cambiar hasta 415 variables de SASS en el marco.

El uso de variables significa establecer un nuevo color, ya que la primaria cambiará ese color en todo el marco de Bulma para ese proyecto. Establecer esto puede ser complicado al principio, pero se han proporcionado guías usando Tres métodos diferentes En la documentación.

Este artículo se publicó originalmente en el número 289 de la revista Creative Web Design Design Diseñador web . Comprar emito 289 o Suscríbete aquí .

Leer más:

5 estudios de caso inspiradores de diseño web
Las mejores herramientas de diseño de la UI.
Diseño de sitio web minimalista maestro

Comienza con Bulma

01. Comienza

02. Instalar Bulma

03. construir una página

04. Crea una barra de héroe superior.

05. Añadir título y subtítulos.

06. Añadir un salpicaduras de color

07. Dividir el contenido en columnas.

08. Crear imágenes receptivas.

09. Sugerir acción con botones.

10. Crear contenido en caja

11. Use cajas icónicas.

12. ser audaz

13. Cambia los niveles.

14. Añadir y controlar formularios.

15. Dar feedback de los usuarios.

16. Añadir un pie de página

17. Personalizar las variables

Cómo - Artículos más populares

Cómo usar las imágenes de referencia: 13 consejos esenciales para los artistas

Explore la visualización de datos con p5.js

Todo lo que necesita saber sobre la división de código JavaScript

Comienza con WebVR

Cómo capturar la luz con aceites

Haz una exposición doble en Photoshop

Uso de herramientas de vectores: Enfoque de un diseñador web

Cómo obtener su modelo de ZBrush en Maya

Categorías