Kom i gang med Bulma

Sep 11, 2025
hvordan
Bulma
[1. 3]
(Bilde Kreditt: Bulma)

Vil du begynne å bruke bulma? Du er på rett sted. Bulma er et populært CSS-rammeverk med et enkelt FlexBox-nettsystem. Det adskiller seg fra andre rammer ved å ta en lettere tilnærming og ikke inkludert noen JavaScript - som forlater den beslutningen helt opp til utvikleren (for å utforske andre alternativer, se vårt valg av Beste CSS-rammer ).

I denne opplæringen vil vi demonstrere hvordan man installerer bulma, og bygger et nettsted med sine forskjellige klasser. For å bevise hvor allsidig klassene er i bulma, er hele opplæringsstedet blitt bygget uten å skrive en enkelt linje med CSS. Vil du ha andre alternativer? Prøv en utmerket Nettstedbygger . Og for å sikre at nettstedet ditt kjører på sitt beste, velg høyre Web Hosting. service.

Generate flash sale

(Bildekreditt: Fremtid)

Generer CSS er den heteste webhendelsen i byen. Fra 20-22 september kan du hente en billett til halv pris ved hjelp av koden Flashsale5. Klikk på bildet for å finne ut mer.

01. Kom i gang

Bulma: get started

(Bilde Kreditt: Bulma)

Opprett en ny katalog, og i den, opprett en index.html. fil. Åpne denne filen i en kodeditor og opprett et enkelt startpakke HTML-dokument, med en DOCTYPE HTML og en responsiv visningspakke. 

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; meta navn = "Viewport" innhold =
"Bredde = Enhetsbredde, Initial-Scale = 1" & GT;
& lt; title & gt; side tittel & lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; / body & gt;
& lt; / html & gt;

02. Installer bulma

Bruke Bulma ut i boksen er så rask som å legge til en enkelt CSS-fil. Bruke CDN Legg til en lenke i HTML. Hvis det er nødvendig å endre variabler og ha mer kontroll over rammen, NPM Installer Bulma. kan brukes (se full dokumentasjon ). For den fulle opplevelsen bør Font Awesome 5 også inkluderes. 

 & lt; link rel = "Stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" & gt;
& lt; script utsette src = "https://use.fontawesome.com/releases/v5.3.1/js/all.js" & gt;

03. Bygg en side

Bulma: hello world

(Bilde Kreditt: Bulma)

Inne i kroppsmerket, opprett et seksjonselement og en div med klassen container . Innenfor beholderen, opprett en H1 med klassen tittel Så et avsnitt med klassen undertekst . For nå, skriv inn 'Hello World' i tittelen og litt tekst i avsnittet. Vi har nå den grunnleggende startmalen for bulma. 

 & lt; seksjonsklasse = "seksjon" & gt;
& lt; div class = "container" & gt;
& lt; h1 class = "tittel" & gt;
Hei Verden
lt; / h1 & gt;
& lt; p class = "subtitle" & gt;
Dette er den grunnleggende forretten
mal for bulma
lt; / p & gt;
& lt; / div & gt;
& lt; / seksjon & gt;

04. Lag en toppheltebar

Lag en ny del over den forrige, og i stedet for klassen seksjon , gi det klassen helt . Heltaklassen tillater etableringen av et full bredde banner, med en rekke alternativer som styrer sin høyde. Innenfor denne nye delen skaper en div med klassen helt-kropp og deretter A. container Dette vil holde innholdet. 

 & lt; § class = "helten" & gt;
& lt; div klasse = "hero-body" & gt;
& lt; div class = "container" & gt; ... & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;

05. Legg til tittel og undertekster

Inne i beholderen div, legg til en H1 og H2-tag med klassene tittel og undertekst . Dette er typografi klasser som vil øke størrelsen på innholdet deres. Bulma er smart å vite når en tittel og undertekst kombineres, og vil bringe dem nærmere sammen.

06. Legg til et sprut av farge

Bulma: colour

(Bilde Kreditt: Bulma)

Legg til klassen er-primær til helteneseksjonen. Dette vil bruke den primære fargen til bakgrunnen, og endre teksten til den lettere varianten. I stedet for hoved , INFO , suksess , advarsel , fare , lys og mørk kan også velges 

 & lt; § class = "helten er-primær" & gt;

07. Split innholdet i kolonner

Det første innholdsområdet på nettstedet er delt inn i to kolonner. Lag en ny seksjon med klasseseksjonen og legg til en beholder. For å sette opp kolonnene, legges en div med kolonner klasse. Hver kolonne tilsettes i foreldrebeholderen. Kolonner vil plassere seg like i ledig plass med et lite gap mellom med mindre det er angitt.

Hvis du har mye innhold, må du sørge for at du tilbake dine eiendeler opp i pålitelig sky lagring. 

 & lt; seksjonsklasse = "seksjon" & gt;
& lt; div class = "container" & gt;
& lt; div class = "kolonner er-vcentered" & gt;
& lt; div class = "kolonne" & gt;
...
& lt; / div & gt;
& lt; div class = "kolonne" & gt;
...
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / seksjon & gt;

08. Opprett responsive bilder

Bulma: responsive images

(Bilde Kreditt: Bulma)

Den andre kolonnen vil inneholde et bilde. Fest bildet i et figurelement, og hvis det er mulig, gi figuren en klasse av aspektforholdet til bildet. I eksemplet, 16by9. har blitt brukt (se Full liste over tilgjengelige forhold ). 

 & lt; div class = "kolonne" & gt;
& lt; figur class = "image is-16by9" & gt;
& lt; img src = "img / dog.jpg" & gt;
& lt; / figur & gt;
& lt; / div & gt;

09. Foreslå handling med knapper

Knappklassen skaper fargerike knapper og kan brukes & lt; a & gt; elementer eller & lt; knappen & gt; Elementer i skjemaer. Legg to knapper til den første kolonnen og bruk fargemodifikatorer til dem. Hvis du bruker mer enn en knapp, pakk dem inn i en div med klassen knapper , som korrigerer gapet og tillater anvendelse av klasser som en gruppe. 

 & lt; div class = "knapper" & gt;
& lt; a class = "knappen er-info" & gt;
Finn ut mer & lt; / a & gt;
& lt; a class = "knapp er-fare er-skissert" & gt;
Kjøp nå & lt; / a & gt;
& lt; / div & gt;

10. Lag boksinnhold

Bulma: boxed content

(Bilde Kreditt: Bulma)

Legg til en ny seksjon nederst på siden med tre kolonner. Innenfor kolonnene tilsettes et bokselement. Bokselementer er enkle beholdere med en kant rundt dem som skiller dem fra bakgrunnen til en side. 

 & lt; div class = "kolonne" & gt;
& lt; div class = "boks" & gt;
Test
& lt; / div & gt;
& lt; / div & gt;

11. Bruk ikoniske bokser

Bulma integreres med font Awesome 5, men er kompatibelt med alle skriftbiblioteker, og har klasser å ringe mest tilgjengelige ikoner. I hver boks, legg til en innholdsbeholder, etterfulgt av et spanelement med klassen ikon . Inne i spenningen, bruk en & lt; i & gt; Element å ringe de nødvendige klassene for ønsket ikon. Ikoner er farget på samme måte som tekst. 

 & lt; div class = "innhold" & gt;
& lt; span class = "ikon" & gt;
& lt; i class = "fas fa-lg fa-home
har-tekst-suksess "& gt; & lt; / i & gt;
& lt; / span & gt;
& lt; div class = "tittel er-størrelse-6" & gt; ... & lt; / div & gt;
& lt; div class = "subtitle is-size-6" & gt; ... & lt; / div & gt;
& lt; / div & gt;

12. Vær fet

Bulma: Be bold

(Bilde Kreditt: Bulma)

Opprett en ny to-kolonnehelt-delen nederst på siden, og gir en IS-INFO klasse til delen. For en interessant effekt, også påfør er-fet klasse til denne delen for en subtil gradient. Denne modifikatoren fungerer med alle syv av hovedfarger.

13. Endre nivåene

Nivåene er en fin måte å sikre at elementene er vertikalt sentrert på rad. Innenfor en ny seksjon nederst på siden, legg til en div med nivåklassen og nestet i fire nivåer. Eventuelt innhold som er lagt til i et nivåelement, vil være vertikalt justert. 

& lt; div class = "nivå" & gt;
& lt; div class = "nivå-elementet har-tekst-sentrert" & gt;
...
& lt; / div & gt;
& lt; div class = "nivå-elementet har-tekst-sentrert" & gt;
...
& lt; / div & gt;
& lt; / div & gt;

14. Legg til og kontrollere skjemaer

For å legge til et skjema til bunnen av siden, gjør du en ny to-kolonnehelt-delen med er-primær . Del det i to kolonner, og i den rette kolonnen, opprett en felt klasse. Feltklassen brukes til å gruppere flere forminnganger sammen, slik at de er på avstand riktig. Hver innsats må også pakkes inn i en person .kontroll klasse. 

 & lt; div class = "felt" & gt;
& lt; div class = "kontrollen har-ikoner-venstre
har-ikoner-høyre "& gt;
& lt; input class = "input" type = "e-post"
stedholder = "Din epost" & gt;
& lt; span class = "Ikon er-liten
er-venstre "& gt;
& lt; i klasse = "fas fa-konvolutt" & gt; & lt; / i & gt;
& lt; / span & gt;
& lt; / div & gt;
& lt; / div & gt;

15. Gi brukerne tilbakemelding

Bulma: feedback

(Bilde Kreditt: Bulma)

Når et skjema er sendt, bør det returnere en melding til brukere, slik at de vil vite hva som skjer neste. Selv om Bulma ikke er i stand til å kontrollere når denne meldingen vil bli vist, kan forsiden bygges med meldingsklassen. 

 & lt; artikkel klasse = "melding er-info" & gt;
& lt; div class = "Message-header" & gt;
& lt; p & gt; takk! & lt; / p & gt;
& lt; / div & gt;
& lt; div class = "Message-Body" & gt;
... & lt; / div & gt;
& lt; / article & gt;

16. Legg til en bunntekst

Den fleksible bunntekstlassen gjør det mulig for ethvert element å bli lagt til nederst på en side, noe som gir et sted for opphavsrettsinformasjon og bunnnavigasjon, samt å bringe en finish til nettstedet. 

 & lt; footer class = "footer" & gt;
& lt; div class = "innholdet har-tekst-sentrert" & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt;
& lt; / footer & gt;

17. Tilpass variabler

De fleste prosjekter, utover prototyper, vil ha et krav om å jobbe med en merkevare-retningslinje og farger. På samme måte er det trygt å anta at en designer må endre fonter, farger eller andre aspekter av bulma. En stor del av bula er at den er tilpassbar og modulær. Ikke bare kan modulene bli selektivt importert, men opptil 415 sassvariabler kan endres innenfor rammen.

Bruken av variabler betyr å sette en ny farge som primær vil endres den fargen over hele Bulma-rammeverket for det prosjektet. Sette opp dette kan være vanskelig i begynnelsen, men guider har blitt gitt Tre forskjellige metoder i dokumentasjonen.

Denne artikkelen ble opprinnelig publisert i utgave 289 av Creative Web Design Magazine Webdesigner . Kjøp utgave 289. eller Abonner her .

Les mer:

  • 5 Inspirerende Web Design Case Studies
  • De beste brukergrensesnorene
  • Master Minimalistisk Website Design

hvordan - Mest populære artikler

Hvordan tegne perspektiv

hvordan Sep 11, 2025

Lære å trekke perspektivet på riktig måte kan endre hele tegneprosessen. Enten tegner tradisjonelt med blyant og papir, eller digitalt ved hjelp av en grafikkort, konstruerer jeg fortsatt..

Bruk WordPress som en hodeløs CMS

hvordan Sep 11, 2025

[1. 3] Jeg hørte først om den hodeløse CMS-tilnærmingen i en snakk jeg så fra Twin Cities Drupal. Jeg likte ideen om en adski..

10 tips for å mestre Apples bilder App

hvordan Sep 11, 2025

[1. 3] MacOS-Photos-appen begynte livet som iPhoto: En forbrukerapp for å administrere digitale fotografier, med noen få grunnle..

Hvordan lage en fotorealistisk romscene

hvordan Sep 11, 2025

[1. 3] Vil du vite hvordan du lager en realistisk 3D-arkitektonisk fly gjennom, men er ikke sikker på hvor du skal fokusere på d..

Hvordan tegne metalliske refleksjoner

hvordan Sep 11, 2025

[1. 3] Når lyset treffer et metallobjekt, kan det reflektere tilbake på et nærliggende objekt på en uvanlig måte. Normalt gir..

Slik legger du til tekstur på pastellene dine med primere

hvordan Sep 11, 2025

[1. 3] Ved hjelp av pastellprimere For å lage overflater for din kunst betyr at du kan bygge en mer teksturert ove..

Lag en kompositt i Photoshop

hvordan Sep 11, 2025

Adobe lanserer en ny serie av videoopplæringen i dag, kalt, gjør det nå, som tar sikte på å skissere hvordan du lager spesifikke designprosjekter ved hjelp av ulike Kreativ..

Hvordan bygge verdener for kino

hvordan Sep 11, 2025

[1. 3] Når du blir bedt om å gjøre et verksted om å skape et fantasivimiljø, trodde jeg det ville være morsomt å betale hyl..

Kategorier