Kom igång med Bulma

Feb 2, 2026
Hur
Bulma
(Bildkredit: Bulma)

Vill du komma igång med Bulma? Du är på rätt ställe. Bulma är en populär CSS-ram med ett enkelt Flexbox-nät. Det skiljer sig från andra ramar genom att ta ett lättare tillvägagångssätt och inte inklusive något javascript - vilket innebär att beslutet helt upp till utvecklaren (för att utforska andra alternativ, se vår val av Bästa CSS-ramarna ).

I den här handledningen kommer vi att visa hur man installerar Bulma och bygger en webbplats med sina olika klasser. För att bevisa hur mångsidigt klasserna är i Bulma har hela handledningssidan byggts utan att skriva en enda linje av CSS. Vill du ha andra alternativ? Prova en utmärkt Website Builder . Och för att se till att din webbplats körs bäst, välj rätt webbhotell service.

Generate flash sale

(Bildkredit: Framtida)

Generera CSS är den hetaste webbhändelsen i stan. Från 20-22 Sept kan du hämta en biljett för halv pris med hjälp av koden Flashsale5. Klicka på bilden för att få reda på mer.

01. Kom igång

Bulma: get started

(Bildkredit: Bulma)

Skapa en ny katalog, och inom den, skapa en index.html fil. Öppna den här filen i en kodredigerare och skapa ett enkelt starter HTML-dokument, med en Doctype HTML och en lyhörd viewport-tagg. 

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; huvud & gt;
& lt; meta name = "viewport" content =
"Bredd = Enhet-Bredd, Initial-Scale = 1" & GT;
& lt; Titel & GT; Sidtitel & LT; / Titel & GT;
& LT; / Head & GT;
& lt; kropp & gt;
& LT; / Body & GT;
& lt; / html & gt;

02. Installera Bulma

Att använda Bulma ut är lådan lika snabb som att lägga till en enda CSS-fil. Använda CDN Lägg till en länk i HTML. Om det är nödvändigt att ändra variabler och har mer kontroll över ramen, npm installera bulma kan användas (se fullständig dokumentation ). För den fullständiga erfarenheten bör font Awesome 5 också inkluderas. 

 & lt; länk rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" & gt;
& lt; script defer src = "https://use.fontawesome.com/releases/v5.3.1/js/all.js" & gt; & lt; / script & gt;

03. Bygg en sida

Bulma: hello world

(Bildkredit: Bulma)

Inne i Body-taggen, skapa ett avsnittselement och en div med klassen behållare . Inom behållaren, skapa en H1 med klassen titel då en paragraf med klassen texta . För närvarande ingår "Hello World" i titeln och lite text i stycket. Vi har nu den grundläggande startmallen för Bulma. 

 & lt; avsnitt klass = "avsnitt" & gt;
& lt; div class = "container" & gt;
& lt; h1 class = "titel" & gt;
Hej världen
& lt; / h1 & gt;
PLASS = "SUBTITLE" & GT;
Detta är den grundläggande startaren
Mall för Bulma
& lt; / P & GT;
& lt; / div & gt;
& lt; / sektion och gt;

04. Skapa en topphjälte

Gör ett nytt avsnitt ovanför den föregående, och i stället för klassen sektion , ge det klassen hjälte . Hero-klassen möjliggör skapandet av en fullbredd banner, med en mängd olika alternativ som styr sin höjd. Inom det nya avsnittet skapar du en div med klassen hjältemisk och sedan a behållare Detta kommer att hålla innehållet. 

 & lt; avsnitt klass = "Hero" & GT;
& lt; div class = "hero-body" & gt;
& lt; div class = "container" & gt; ... & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;

05. Lägg till titel och undertexter

Inne i behållarens div, lägg till en H1 och H2-tagg med klasserna titel och texta . Dessa är typografi klasser som ökar storleken på deras innehåll. Bulma är smart att veta när en titel och undertexter kombineras, och kommer att få dem närmare varandra.

06. Lägg till ett stänk av färg

Bulma: colour

(Bildkredit: Bulma)

Lägg till klassen är-primär till hjälten. Detta kommer att tillämpa den primära färgen på bakgrunden och ändra texten till den lättare varianten. Istället för primär , info , Framgång , varning , fara , ljus och mörk kan också väljas 

 & lt; avsnitt klass = "Hero är-Primär" & GT;

07. Dela innehållet i kolumner

Det första innehållsområdet på webbplatsen är uppdelad i två kolumner. Gör en ny sektion med klassen och lägg till en behållare. För att ställa in kolumnerna läggs en DIV med kolumner klass. Varje kolumn läggs till i moderbehållaren. Kolumner kommer att rymma sig lika i det lediga utrymmet med ett litet gap mellan om det inte anges.

Om du har mycket innehåll, se till att du tillbaka dina tillgångar i pålitligt molnlagring. 

 & lt; avsnitt klass = "avsnitt" & gt;
& lt; div class = "container" & gt;
& lt; div class = "kolumner är-vcentered" & gt;
& lt; div class = "kolumn" & gt;
...
& lt; / div & gt;
& lt; div class = "kolumn" & gt;
...
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / sektion och gt;

08. Skapa svariva bilder

Bulma: responsive images

(Bildkredit: Bulma)

Den andra kolumnen innehåller en bild. Vik bilden i ett figurelement, och, om möjligt, ge figuren en klass av bildförhållandet för bilden. I exemplet, 16BY9 har använts (se Hela listan över tillgängliga förhållanden ). 

 & lt; div class = "kolumn" & gt;
& lt; Figur klass = "Bild är-16By9" & GT;
& lt; img src = "img / dog.jpg" & gt;
& LT; / Figur & GT;
& lt; / div & gt;

09. Föreslå åtgärd med knappar

Knappklassen skapar färgglada knappar och kan appliceras & lt; A & GT; element eller & lt; knapp & gt; Element i formerna. Lägg till två knappar till den första kolumnen och applicera färgmodifierare till dem. Om du använder mer än en knapp, sätt dem i en div med klassen knappar , som korrigerar gapet och tillåter applicering av klasser som en grupp. 

 & lt; div class = "knappar" & gt;
& lt; en klass = "knapp är-info" & gt;
Ta reda på mer & lt; / a & gt;
& lt; en klass = "-knapp är-Fara är skisserad" & GT;
Köp nu & lt; / a & gt;
& lt; / div & gt;

10. Skapa boxat innehåll

Bulma: boxed content

(Bildkredit: Bulma)

Lägg till en ny sektion längst ner på sidan med tre kolumner. Inom kolumnerna tillsätts ett boxelement. Boxelement är enkla behållare med en kant runt dem som skiljer dem från bakgrunden på en sida. 

 & lt; div class = "kolumn" & gt;
& lt; div class = "box" & gt;
Testa
& lt; / div & gt;
& lt; / div & gt;

11. Använd ikoniska lådor

Bulma integreras med font Awesome 5, men är kompatibel med alla teckensnittsbibliotek, och har klasser för att ringa de flesta tillgängliga ikoner. Inuti varje låda, lägg till en innehållsbehållare, följt av ett spännelement med klassen ikon . Inuti spänningen, använd en & lt; I & GT; Element för att ringa de önskade klasserna för önskad ikon. Ikoner är färgade på samma sätt som text. 

 & lt; div klass = "innehåll" & gt;
& lt; span class = "ikon" & gt;
& lt; i klass = "Fas Fa-lg Fa-Home
har-text-framgång "& gt; & lt; / i & gt;
& lt; / Span & GT;
& lt; div class = "Titel är-storlek-6" & gt; ... & lt; / div & gt;
& lt; div class = "Subtitle is-size-6" & gt; ... & lt; / div & gt;
& lt; / div & gt;

12. Var djärv

Bulma: Be bold

(Bildkredit: Bulma)

Skapa en ny två-kolonns hjälte-sektion längst ner på sidan, vilket ger en är info klass till sektionen. För en intressant effekt, använd också är-djärv klass till det här avsnittet för en subtil gradient. Denna modifierare arbetar med alla sju av de viktigaste färgerna.

13. Ändra nivåerna

Nivåerna är ett bra sätt att säkerställa att elementen är vertikalt centrerade i rad. Inom en ny sektion längst ner på sidan, lägg till en div med nivåklassen och boet inom fyra nivåer. Eventuellt innehåll som läggs till i en nivåobjekt är vertikalt inriktat. 

& lt; div klass = "nivå" & gt;
& lt; div class = "nivå-objekt har-text-centrerad" & gt;
...
& lt; / div & gt;
& lt; div class = "nivå-objekt har-text-centrerad" & gt;
...
& lt; / div & gt;
& lt; / div & gt;

14. Lägg till och kontrollformulär

För att lägga till en blankett längst ner på sidan, gör en ny två-kolonns hjälte-sektion med är-primär . Dela den i två kolumner, och i den högra kolumnen, skapa en fält klass. Fältklassen används för att gruppera flera formmatningar tillsammans, vilket säkerställer att de är åtskilda. Varje ingång måste också lindas i en individ .kontrollera klass. 

 & lt; div class = "fält" & gt;
& lt; div class = "Control har-ikoner-vänster
har-ikoner-höger "& gt;
& LT; Input Class = "Input" Type = "E-post"
Placehållare = "Din email" & GT;
& lt; span class = "ikonen är liten
är kvar "& gt;
& lt; i klass = "Fas Fa-Envelope" & GT; & LT; / I & GT;
& lt; / Span & GT;
& lt; / div & gt;
& lt; / div & gt;

15. Ge användarnas feedback

Bulma: feedback

(Bildkredit: Bulma)

När en blankett skickas ska den returnera ett meddelande till användare så att de kommer att veta vad som händer nästa. Även om Bulma inte kan styra när det här meddelandet visas, kan den främre änden byggas med meddelandeklassen. 

 & lt; artikelklass = "Meddelande är-Info" & GT;
& lt; div class = "Message-header" & GT;
& lt; P & GT; tack! & lt; / p & gt;
& lt; / div & gt;
& lt; Div Class = "Message-Body" & GT;
... & lt; / div & gt;
& LT; / Artikel & GT;

16. Lägg till en sidfot

Den flexibla sidoklassen tillåter att något element läggs till längst ner på en sida, vilket ger en plats för upphovsrättsinformation och nedre navigering, samt att ta med en finish på webbplatsen. 

 & lt; Footer Class = "Footer" & GT;
& lt; div class = "Content har-text-centrerad" & gt;
& lt; P & GT; ... & lt; / P & GT;
& lt; / div & gt;
& LT; / Footer & GT;

17. Anpassa variabler

De flesta projekt, bortom prototyper, kommer att ha ett krav på att arbeta med en varumärkesriktlinje och färger. På samma sätt är det säkert att anta att en designer måste ändra teckensnitt, färger eller andra aspekter av bulma. En stor del av Bulma är att den är anpassningsbar och modulär. Inte bara kan moduler selektivt importeras, men upp till 415 sassvariabler kan ändras inom ramen.

Användningen av variabler innebär att en ny färg är att primär kommer att ändra den färgen över hela Bulma-ramen för det projektet. Ställa in det här kan vara knepigt först, men guider har tillhandahållits med hjälp av Tre olika metoder i dokumentationen.

Denna artikel publicerades ursprungligen i utgåva 289 av kreativ webbdesignmagasin Webbdesigner . Köp utgåva 289 eller prenumerera här .

Läs mer:

  • 5 inspirerande webbdesign fallstudier
  • De bästa UI-designverktygen
  • Master Minimalistisk webbdesign

Hur - Mest populära artiklar

Skapa animerad CSS-konst

Hur Feb 2, 2026

(Bildkredit: Tiffany Choong) Att skapa CSS-bilder är ett roligt sätt att öva dina färdigheter och skapa ett snygg..

Hur man ritar en katt

Hur Feb 2, 2026

Vill du veta hur man drar en katt? Du har kommit till rätt ställe. Ritdjur kan vara knepiga men det är också givande när du ..

Hur man skapar digitala plein-luftmålningar

Hur Feb 2, 2026

Få utomhus för att skapa stor konst (Bildkredit: Mike Mc Cain) Det finns så många bra sätt att lära..

Affinity Designer: Hur man använder begränsningar

Hur Feb 2, 2026

Affinity Designer är en populär vektorkonst verktyg. Förutom Mac och Windows-versioner släpptes Ser..

Hur man skapar en appikon i Illustrator

Hur Feb 2, 2026

Sida 1 av 2: Så här skapar du en appikon i Illustrator: Steg 01-11 Så här skapar du en appikon i Illustrator: Steg 01-11 ..

Hur man använder texturer i Photoshop

Hur Feb 2, 2026

Textur är ofta vad som försvinner linjerna mellan traditionellt och digitalt konstverk. Ofta är det lätt att berätta skillnaden mellan de två om ditt digitala konstverk inte har någon ..

Hur man målar övertygande reflektioner

Hur Feb 2, 2026

Digitala målningstekniker gör det möjligt att avbilda reflektioner i glas på ett relativt enkelt sätt. Visst är det mycket ..

Dokumentera dina designsystem med Fractal

Hur Feb 2, 2026

Vill du lära dig mer om designsystem? Sedan missa inte senior ui ingenjör Mina Markham ..

Kategorier