Aan de slag met BULMA

Sep 13, 2025
Procedures
Bulma
(Afbeelding Credit: BULMA)

Wil je beginnen met Bulma? Je bent op de juiste plaats. BULMA is een populair CSS-raamwerk met een eenvoudig FLEXBOX-rastersysteem. Het verschilt van andere frameworks door een lichtere aanpak te nemen en niet inclusief een JavaScript - die die beslissing volledig aan de ontwikkelaar verlaat (om andere opties te verkennen, zie onze keuze van de Beste CSS-frameworks ​

In deze tutorial zullen we laten zien hoe ze BULMA kunnen installeren en een website met zijn verschillende klassen bouwen. Om te bewijzen hoe veelzijdig de klassen in BULMA zijn, is de volledige tutorialpagina gebouwd zonder een enkele regel van CSS te schrijven. Wilt u andere opties? Probeer een uitstekend website bouwer ​En om ervoor te zorgen dat uw site op zijn best loopt, kies dan het recht web hosting onderhoud.

Generate flash sale

(Beeldkrediet: toekomst)

Generate CSS is het heetste webevenement in de stad. Vanaf 20-22 SEPT U kunt een ticket voor de halve prijs ophalen met behulp van de code Flashsale5. Klik op de afbeelding om meer te weten te komen.

01. Ga aan de slag

Bulma: get started

(Afbeelding Credit: BULMA)

Maak een nieuwe map en maak erin een index.html het dossier. Open dit bestand in een codeeditor en maak een eenvoudig starter HTML-document, met een DOCTYPE HTML en een responsieve viewport-tag. 

 & LT;! DOCTYPE HTML & GT;
& lt; html & gt;
& LT; HOOFD & GT;
& lt; meta naam = "viewport" -inhoud =
"Breedte = apparaatbreedte, initiële schaal = 1" & GT;
& LT; TITLE & GT; PAGINA TITLE & LT; / TITLE & GT;
& LT; / HOOFD & GT;
& LT; BODY & GT;
& LT; / BODY & GT;
& LT; / HTML & GT;

02. Installeer BULMA

Bulma uit de doos gebruiken is zo snel als het toevoegen van een enkel CSS-bestand. Het gebruik van de CDN Voeg een link toe in de HTML. Als het nodig is om variabelen te veranderen en meer controle te hebben over het raamwerk, NPM Installeer BULMA kan worden gebruikt (zie de Volledige documentatie ​Voor de volledige ervaring moet lettertype Awesome 5 ook worden opgenomen. 

 & LT; LINK 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. Bouw een pagina

Bulma: hello world

(Afbeelding Credit: BULMA)

Binnen het lichaamstag, maak een sectie-element en een div met de klas container ​Maak in de container een H1 met de klas titel Dan een paragraaf met de klas ondertiteling ​Input nu 'Hallo World' in de titel en wat tekst in de paragraaf. We hebben nu het basisstartsjabloon voor BULMA. 

 & lt; sectie klasse = "sectie" & GT;
& lt; div class = "container" & GT;
& LT; H1 Class = "Titel" & GT;
Hallo Wereld
& LT; / H1 & GT;
& lt; p class = "ondertiteling" & GT;
Dit is de basisstarter
Sjabloon voor BULMA
& LT; / P & GT;
& LT; / DIV & GT;
& lt; / sectie & gt;

04. Maak een topstaaf

Maak een nieuw gedeelte boven de vorige, en in plaats van de klas sectie , geef het de klas held ​De heldenklasse maakt het mogelijk om een ​​banner van een volledige breedte te maken, met een verscheidenheid aan opties die zijn hoogte controleert. Maak binnen dit nieuwe gedeelte een div met de klas held-lichaam en dan een container Dit houdt de inhoud vast. 

 & lt; sectie klasse = "held" & GT;
& lt; div class = "held-body" & GT;
& lt; div class = "container" & GT; ... & lt; / div & gt;
& LT; / DIV & GT;
& lt; / div & gt;

05. Titel en ondertitels toevoegen

Voeg in de container div, voeg een H1- en H2-tag toe met de klassen titel en ondertiteling ​Dit zijn typografieklassen die de grootte van hun inhoud zullen vergroten. BULMA is slim om te weten wanneer een titel en ondertiteling worden gecombineerd en zullen ze dichter bij elkaar brengen.

06. Voeg een plons van kleur toe

Bulma: colour

(Afbeelding Credit: BULMA)

Voeg de klas toe is-primair naar de held sectie. Dit zal de primaire kleur op de achtergrond toepassen en de tekst wijzigen in de lichtere variant. In plaats van primair ​ info ​ succes ​ waarschuwing ​ Gevaar ​ licht en donker kan ook worden gekozen 

 & lt; sectie klasse = "Held is-primair" & GT;

07. Splits de inhoud in kolommen

Het eerste inhoudsgebied van de website is opgesplitst in twee kolommen. Maak een nieuw gedeelte met de klassectie en voeg een container toe. Om de kolommen in te stellen, wordt een div toegevoegd met kolommen klasse. Elke kolom wordt toegevoegd binnen de bovenliggende container. Kolommen zullen zichzelf gelijk zijn in de beschikbare ruimte met een kleine kloof tussen tenzij.

Als je veel inhoud hebt, zorg er dan voor dat je je activa terugbleef in betrouwbare cloud-opslag. 

 & lt; sectie klasse = "sectie" & GT;
& lt; div class = "container" & GT;
& LT; DIV-klasse = "Kolommen is-Vcentered" & GT;
& lt; div class = "kolom" & GT;
​
& LT; / DIV & GT;
& lt; div class = "kolom" & GT;
​
& LT; / DIV & GT;
& LT; / DIV & GT;
& LT; / DIV & GT;
& lt; / sectie & gt;

08. Maak responsieve afbeeldingen

Bulma: responsive images

(Afbeelding Credit: BULMA)

De tweede kolom bevat een afbeelding. Wikkel het beeld in een figuurelement en geef indien mogelijk de figuur een klasse van de beeldverhouding van de afbeelding. In het voorbeeld, 16By9 is gebruikt (zie de Volledige lijst met beschikbare verhoudingen ​ 

 & lt; div class = "kolom" & GT;
& lt; figuur class = "Afbeelding is-16By9" & GT;
& lt; img src = "img / dog.jpg" & GT;
& lt; / figuur & gt;
& lt; / div & gt;

09. Stel actie voor met knoppen

De knopklasse creëert kleurrijke knoppen en kan worden toegepast & LT; A & GT; elementen of & lt; knop & gt; Elementen in Forms.Add twee knoppen aan de eerste kolom en breng kleurmodifiers aan. Als u meer dan één knop gebruikt, wikkelt u ze in een div met de klas toetsen , dat de kloof corrigeert en de toepassing van klassen als een groep mogelijk maakt. 

 & lt; div class = "knoppen" & GT;
& lt; een klasse = "knop is-info" & GT;
Ontdek meer & LT; / A & GT;
& LT; een klasse = "-knop is-gevaar is-geschetst" & GT;
Nu kopen & lt; / a & gt;
& lt; / div & gt;

10. Creëer boxed inhoud

Bulma: boxed content

(Afbeelding Credit: BULMA)

Voeg een nieuw gedeelte aan de onderkant van de pagina toe met drie kolommen. In de kolommen wordt een dooselement toegevoegd. Dooselementen zijn eenvoudige containers met een rand om hen heen die ze scheiden van de achtergrond van een pagina. 

 & lt; div class = "kolom" & GT;
& LT; DIV-klasse = "Box" & GT;
Test
& LT; / DIV & GT;
& lt; / div & gt;

11. Gebruik iconische dozen

BULMA integreert met lettertype Awesome 5, maar is compatibel met alle lettertype-bibliotheken en heeft klassen om de meest beschikbare pictogrammen te bellen. Voeg binnen elke doos een contentcontainer toe, gevolgd door een spanelement met de klasse icoon ​Gebruik een & LT; I & GT; element om de vereiste klassen voor het gewenste pictogram te bellen. Pictogrammen zijn op dezelfde manier gekleurd als tekst. 

 & lt; div class = "inhoud" & GT;
& lt; span class = "pictogram" & GT;
& LT; I CLASS = "FAS FA-LG FA-HOME
HAS-TEXT-succes "& GT; & LT; / I & GT;
& LT; / SPAN & GT;
& LT; DIV-klasse = "Titel is-Size-6" & GT; ... & LT; / DIV & GT;
& LT; DIV-klasse = "Subtitel is-Size-6" & GT; ... & LT; / DIV & GT;
& LT; / DIV & GT;

12. Wees bold

Bulma: Be bold

(Afbeelding Credit: BULMA)

Maak een nieuwe held-sectie met twee kolommen aan de onderkant van de pagina, geef een is-info klasse naar het gedeelte. Voor een interessant effect, breng ook de is-bold klasse naar dit gedeelte voor een subtiel verloop. Deze modifier werkt met alle zeven van de hoofdkleuren.

13. Verander de niveaus

Niveaus zijn een geweldige manier om ervoor te zorgen dat elementen zich verticaal op een rij gecentreerd zijn. Voeg in een nieuw gedeelte onderaan de pagina een div toe met de niveauklasse en nest in vier level items. Elke inhoud die binnen een niveau-item is toegevoegd, wordt verticaal uitgelijnd. 

& lt; div class = "niveau" & GT;
& LT; DIV-klasse = "Level-item Has-Text-gecentreerde" & GT;
​
& LT; / DIV & GT;
& LT; DIV-klasse = "Level-item Has-Text-gecentreerde" & GT;
​
& LT; / DIV & GT;
& LT; / DIV & GT;

14. Voeg formulieren toe en besturen

Om een ​​formulier aan de onderkant van de pagina toe te voegen, maakt u een nieuwe hero-sectie met twee kolommen met is-primair ​Splits het in twee kolommen en maak in de rechterkolom een veld- klasse. De veldklasse wordt gebruikt om verschillende vormingangen samen te groeperen, zodat ze op de juiste manier op afstand worden gesteld. Elke ingang moet ook in een persoon worden ingepakt .controle klasse. 

 & lt; div class = "veld" & GT;
& lt; div class = "controle heeft-pictogrammen-links
heeft-pictogrammen-rechts "& GT;
& LT; INPUT CLASS = "INPUT" Type = "E-mail"
Placeholder = "Uw e-mail" & GT;
& lt; span class = "pictogram is-klein
is-links "& GT;
& LT; I CLASS = "FAS FA-ENVELOPE" & GT; & LT; / I & GT;
& LT; / SPAN & GT;
& LT; / DIV & GT;
& lt; / div & gt;

15. Geef gebruikers feedback

Bulma: feedback

(Afbeelding Credit: BULMA)

Zodra een formulier wordt ingediend, moet het een bericht teruggeven aan gebruikers zodat ze zullen weten wat er hierna gebeurt. Hoewel BULMA niet kan controleren wanneer dit bericht wordt weergegeven, kan het voorste uiteinde worden gebouwd met de berichtklasse. 

 & LT; Artikelklasse = "Bericht is-Info" & GT;
& lt; div class = "bericht-header" & GT;
& LT; P & GT; DANK YOU! & LT; / P & GT;
& LT; / DIV & GT;
& lt; div class = "bericht-body" & GT;
... & lt; / div & gt;
& LT; / Article & GT;

16. Voeg een voettekst toe

De flexibele basisklasse maakt het mogelijk dat elk element onderaan een pagina wordt toegevoegd, een plaats voor auteursrechtinformatie en onderste navigatie, en het brengen van een afwerking naar de website. 

 & LT; Footer Class = "Footer" & GT;
& LT; DIV-klasse = "Inhoud heeft-tekst-gecentreerd" & GT;
& LT; P & GT; ... & LT; / P & GT;
& LT; / DIV & GT;
& LT; / Footer & GT;

17. Pas variabelen aan

De meeste projecten, voorbij prototypen, zullen een vereiste hebben om met een merkrichtlijn en -kleuren te werken. Evenzo is het veilig om aan te nemen dat een ontwerper de lettertypen, kleuren of andere aspecten van BULMA moet veranderen. Een groot deel van BULMA is dat het aanpasbaar en modulair is. Niet alleen kunnen modules selectief worden geïmporteerd, maar maximaal 415 sass-variabelen kunnen worden gewijzigd in het kader.

Het gebruik van variabelen betekent het instellen van een nieuwe kleur als primaire verandert die kleur over het gehele BULMA-kader voor dat project. Instellen kan eerst lastig zijn, maar de gidsen zijn gegeven met behulp van Drie verschillende methoden in de documentatie.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 289 van Creative Web Design Magazine Webdesigner ​ Koop Issue 289 of Abonneer hier ​

Lees verder:

  • 5 Inspirerende Web Design Case Studies
  • De beste UI-ontwerphulpmiddelen
  • Master Minimalist Website Design

Procedures - Meest populaire artikelen

Hoe een canvas uit te rekken en op te zetten voor olieverf

Procedures Sep 13, 2025

(Afbeelding Credit: Getty Images) Welkom bij onze gids voor het strekken van een canvas en opgezet voor olieverf. Doo..

Hoe een hond te tekenen

Procedures Sep 13, 2025

De tutorial van vandaag laat zien hoe je een hond kunt tekenen. De skeletten van honden en katten zijn vrij gelijkaardig, vooral ..

De essentiële gids voor het verkorten in de kunst

Procedures Sep 13, 2025

(Afbeelding Credit: Rob Lunn) Als je je afvraagt ​​wat voor het verkorten in de kunst is, weten we zeker niet all..

Maak een muisgestuurde parallax-achtergrondeffect

Procedures Sep 13, 2025

(Afbeelding Credit: Renaud Rohlinger) Sites met parallax-scrollen blijven om een ​​reden populair: ze creëren ee..

8 Gouden regels van mobiel ontwerp

Procedures Sep 13, 2025

Mobiel ontwerp is een relatief nieuwe maar essentiële overweging. Slechts een decennium geleden, ontwerpen voor het web betekend..

Hoe te selecteren met Photoshop's Lasso-tools

Procedures Sep 13, 2025

Selecties zijn een van de meest vitale taken die je zult leren beheersen Photoshop CC ​Een goede selectie geeft het realisme aan een beeld, om nog maar te zwijgen van de rein..

Hoe het labyrint-stijl monster van een pan

Procedures Sep 13, 2025

Pagina 1 van 2: Pagina 1 Pagina 1 Pagina..

Hoe de prestaties van e-commerce-sites

Procedures Sep 13, 2025

Tammy Everts zal een presentatie geven over de verbinding tussen ontwerp, prestaties en conversieperc..

Categorieën