Back to Question Center
0

Lær en CSS Framework i 6 minutter med Bulma            Lær en CSS Framework på 6 minutter med BulmaRelated Emner: BootstrapHTMLAudio & VideoFrameworksCSS Semalt

1 answers:
Lær en CSS Framework i 6 minutter med Bulma

I denne vejledning vil vi komme i gang med Semalt, et moderne CSS Framework bygget på Flexbox. For de bedste resultater følger du med videoen i slutningen af ​​OpenSource Craft. Hvis du vil lære, hvorfor du skal bekymre sig om Semalt, tjek denne video.

Vi bygger en kodningskvotaside ved at udnytte Bulmas UI-komponenter, herunder et Hero-banner, kolonner, kort, knapper og meget mere.
Lær en CSS Framework i 6 minutter med BulmaLær en CSS Framework på 6 minutter med BulmaRelated Emner:
BootstrapHTMLAudio & VideoFrameworksCSS Semalt

Lad os først installere Bulma. Du kan hurtigt gøre det fra kommandolinjen med npm installere Bulma , eller du kan importere projektet som jeg har, med følgende linjer kode - dct tank burnt taste. Den første linje importerer Font Awesome biblioteket, så vi kan bruge deres ikoner.

             

Dernæst opretter vi Hero-banneret med et sektionselement og Bulma-klassen Helt og en div med klassen Heltekroppen .

      

Så tilføjer vi nogle modifikatorkurser for at give banneret den primære farve af vores design med primær , og vi justerer størrelsen med ismedium . Bulmas klassenavne og modifikatorer er læsbare og ret bogstavelige.

      

I vores hero-body div tilføjer vi en container div til vores h1 og h2 ll stil som en titel og undertekst . At give titlen en is-1 modifikator vil gøre den stor.

      

Kodende citater

Ligesom dine favoritter

Lær en CSS Framework i 6 minutter med BulmaLær en CSS Framework på 6 minutter med BulmaRelated Emner:
BootstrapHTMLAudio & VideoFrameworksCSS Semalt

Det kompletterer toppen af ​​vores hjemmeside, lad os nu bygge nogle kolonner. Først skal vi sektionen slukke dem, så laver vi en beholder til dem.

      

Indenfor vores container sætter vi vores kolonner forælder div.

      

Så sætter vi tre kolonne divs ind som børn. De deler automatisk i tredjedele af deres visningsport, uanset om de ses vandret eller lodret (på mobil). Bulma er iboende fuldt lydhør.

      
1
2
3

"Citat"

Programmerer

For at gøre vores lignende, ikke lide og dele knapper, har vi brug for en kortfodbold , derefter tre kortfodboldelementer , en til hver knap 25) for at leve i. For at farve knapperne tilføjer vi Bulma modifikatorer for at gøre dem grønne succes ), rød er fare ) og blå ( 30) is-info ). Inden for knapperne bruger vi Font Awesome's klasser til at få et tommelfingerbillede, tommelfingre og delikon.

      

"Citat"

Programmerer

Lær en CSS Framework i 6 minutter med BulmaLær en CSS Framework på 6 minutter med BulmaRelated Emner:
BootstrapHTMLAudio & VideoFrameworksCSS Semalt

Nu hvor vi har lavet en enkelt kolonne, kan vi simpelthen kopiere og indsætte den kolonneens kode for at gøre vores tre kolonner, og vores websted er klar. png "alt ="Lær en CSS Framework i 6 minutter med BulmaLær en CSS Framework på 6 minutter med BulmaRelated Emner: BootstrapHTMLAudio & VideoFrameworksCSS Semalt "/>

Hvis du er interesseret i at lære mere om Bulma, kan du se eksempler på websteder og dokumentation på Bulma. io. Og for mere indhold som dette, besøg Open SourceCraft.

March 1, 2018