Scribd
Cargar
158 vistas7 páginas

Getting Started With Bulma - Bulma - Free, Open Source, and Modern CSS Framework Based On Flexbox (Es)

Este documento proporciona una introducción a Bulma, un marco CSS gratuito y de código abierto basado en Flexbox. Explica tres formas de comenzar con Bulma: 1) usando npm para instalar el paquete, 2) vinculando al CDN de jsDelivr, o 3) descargando desde GitHub. También incluye una plantilla HTML de inicio y recomienda incluir Font Awesome para iconos.

Cargado por

Enrique Mingorro
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
158 vistas7 páginas

Getting Started With Bulma - Bulma - Free, Open Source, and Modern CSS Framework Based On Flexbox (Es)

Este documento proporciona una introducción a Bulma, un marco CSS gratuito y de código abierto basado en Flexbox. Explica tres formas de comenzar con Bulma: 1) usando npm para instalar el paquete, 2) vinculando al CDN de jsDelivr, o 3) descargando desde GitHub. También incluye una plantilla HTML de inicio y recomienda incluir Font Awesome para iconos.

Cargado por

Enrique Mingorro
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 7

29/7/2020 Comenzando con Bulma | Bulma: marco CSS gratuito, de código abierto y moderno basado en Flexbox

¡Bulma 0.9.0 está fuera! Con soporte RTL y ayudantes de Notas de la versión : descárguelo
espaciado . ahora

Hogar / Documentación / Visión general / comienzo

Comenzando con Bulma


Solo necesita 1 archivo CSS para usar Bulma
Oferta por tiempo
limitado: obtenga 10
imágenes gratuitas de
Adobe Stock.
anuncios a través de carbono

comienzo Clases de CSS Sintaxis de modificadores Modularidad Sensibilidad

Colores Las funciones Mixins

Hay varias formas de comenzar con Bulma. Tu también puedes:

1. use npm para instalar el paquete Bulma


2. use el CDN jsDelivr para vincular a la hoja de estilo Bulma
3. use el repositorio de GitHub para obtener la última versión de desarrollo

1 Use NPM (recomendado) :


Copiar
npm install bulma

2 Utilice el CDN de jsDelivr https://www.jsdelivr.com/package/npm/bulma

3 Descargar desde el repositorio


https://github.com/jgthms/bulma/tree/master/css

https://bulma.io/documentation/overview/start/ 1/7
29/7/2020 Comenzando con Bulma | Bulma: marco CSS gratuito, de código abierto y moderno basado en Flexbox

Iconos de Font Awesome

Si desea utilizar iconos con Bulma, no olvide incluir Font Awesome 5 :


Copiar
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js">
</script>

Requisitos del código


Para que Bulma funcione correctamente, debe hacer que su página web responda .

1 Usa el doctype HTML5


Copiar
<!DOCTYPE html>

2 Agregue la metaetiqueta de ventana gráfica receptiva


Copiar
<meta name="viewport" content="width=device-width, initial-scale=1">

Plantilla de inicio
Si desea comenzar de inmediato , puede usar esta plantilla de inicio HTML . Simplemente copie / pegue
este código en un archivo y guárdelo en su computadora.
EX AMPLE

Copiar
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
<section class="section">

https://bulma.io/documentation/overview/start/ 2/7
29/7/2020 Comenzando con Bulma | Bulma: marco CSS gratuito, de código abierto y moderno basado en Flexbox

<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with <strong>Bulma</strong>!
</p>
</div>
</section>
</body>
</html>

bulma-start
bulma-start es un pequeño paquete npm que incluye las npm dependencias que necesita para construir
su propio sitio web con Bulma.

Echale un vistazo

Clases de CSS →

Esta página es de código abierto . ¿Notó un error tipográfico? O algo poco claro?
Mejora esta página en GitHub
Visión general
comienzo

Clases de CSS
Sintaxis de modificadores

Modularidad

Sensibilidad

Colores
Las funciones

Mixins

Personalizar
Ayudantes ¡Nuevo!

https://bulma.io/documentation/overview/start/ 3/7
29/7/2020 Comenzando con Bulma | Bulma: marco CSS gratuito, de código abierto y moderno basado en Flexbox

Columnas
Diseño
Formar
Elementos
Componentes

Mi ebook CSS

Compra ahora →

En esta página

Requisitos del código

Plantilla de inicio

bulma-start

Volver arriba

Apoyo Bulma 😃

Donación única Visita nuestros patrocinadores Donacion mensual

Patrocinador

https://bulma.io/documentation/overview/start/ 4/7
29/7/2020 Comenzando con Bulma | Bulma: marco CSS gratuito, de código abierto y moderno basado en Flexbox

¡Nuevo! ¡El libro oficial de


Bulma! 😲
por Jeremy Thomas, creador de Bulma, Oleksii
Potiekhin,
Mikko Lauhakari, Aslam Shah y David Berning

Una guía paso a paso que le enseña


cómo construir una interfaz web
desde cero utilizando Bulma.

Formatos disponibles: PDF Epub Mobi o

Encender

PDF + Epub + Mobi Versión Kindle

Comprar de Comprar de

O descargue una muestra gratis !

Boletin informativo
Características, lanzamientos, dirección de cor Suscribir
escaparate ... ¡mantente al
tanto!

https://bulma.io/documentation/overview/start/ 5/7
29/7/2020 Comenzando con Bulma | Bulma: marco CSS gratuito, de código abierto y moderno basado en Flexbox

Bulma por Jeremy Contribuir en GitHub Comparte en las redes


Thomas . Star 40,610
sociales
Follow @jgthms 11.7K followers Tweet Like Share
Follow @jgthms

Código fuente con licencia MIT


.
Contenido del sitio web con
licencia CC BY-NC-SA 4.0

Viniendo de Expo Amor


Bootstrap Mira lo que puedes Fans de Bulma
Una alternativa a construir con Bulma
Bootstrap

Hogar Documentación Más


Visión general Expo Exhibición oficial de Bulma
Blog Personalizar Amor Fans de Bulma alrededor del mundo

Colores claros / Ayudantes Patreon y


Todos los que
oscuros, mejor patrocinadores de
Columnas apoyan a Bulma
aspecto, controles GitHub
más grandes Diseño
Manténgase actualizado con nuevas
Formar Blog
Documentos de funciones
variables automáticas Elementos Hecho con La insignia oficial de la
Migrar a v0.7.0 Bulma comunidad.
Componentes
Viniendo de Vea cómo Bulma es una

https://bulma.io/documentation/overview/start/ 6/7
29/7/2020 Comenzando con Bulma | Bulma: marco CSS gratuito, de código abierto y moderno basado en Flexbox

Rediseño del sitio Bootstrap alternativa a Bootstrap


web
Extensiones Proyectos paralelos para
Ver todas las Bulma mejorar Bulma
publicaciones
Bulma Un pequeño paquete npm para
start comenzar

https://bulma.io/documentation/overview/start/ 7/7

También podría gustarte