Kom igång med Bulma

Sep 17, 2025
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

Bygg en blogg med rutnät och Flexbox

Hur Sep 17, 2025

De senaste två till tre åren har sett layout gå vidare i språng. Nu när dessa moderna tekniker har ett så konsekvent result..

Master Version Control för avlägsna lag

Hur Sep 17, 2025

Arbeta har blivit mycket vanligare i webbutveckling de senaste åren. Innan versionskontroll, skulle arbeta på distans på samma..

5 saker du behöver för oljemålning

Hur Sep 17, 2025

Det finns en obefogad mystik runt oljemålning som har lagt några artister från att utforska dem. Om du känner till höger ..

Hur man påverkar Google Rankings med ditt innehåll

Hur Sep 17, 2025

Ditt innehåll går ingenstans om inte människor kan söka efter och hitta det, så innehållet ska skrivas med en förståelse ..

Texture En autentiskt sliten K-2SO droid

Hur Sep 17, 2025

Sida 1 av 2: Sida 1 Sida 1 Sida 2 ..

Gör en komposit i Photoshop

Hur Sep 17, 2025

Adobe lanserar en ny serie video tutorials idag kallas det nu, vilket syftar till att skissera hur man skapar specifika designprojekt med olika Kreativt moln applika..

Skärpa dina stillebenmålningsfärdigheter

Hur Sep 17, 2025

Det finns inget jag älskar bättre än att vara utomhus som målar världen runt mig, men det var definitivt en kamp för mig när jag började använda gouache. Arbetar med ett okänt färg..

Skapa 3D-brandseffekter

Hur Sep 17, 2025

Brand, översvämningar och förstörelse är några av de vanligaste uppgifterna till VFX-artister och i detta 3d konst ..

Kategorier