Első lépések Bulma

Feb 8, 2026
kézikönyv
Bulma
(Kép hitel: bulma)

Szeretné elkezdeni a bulma használatát? A megfelelő helyen vagy. A Bulma egy népszerű CSS keretrendszer, egyszerű flexbox rácsrendszerrel. Ez különbözik a többi keretektől a könnyebb megközelítéssel, és nem tartalmazhat semmilyen JavaScriptet - ezt a döntést teljes egészében a fejlesztőnek (más lehetőségek felfedezéséhez) A legjobb CSS-keretrendszerek ).

Ebben a bemutatóban bemutatjuk, hogyan kell telepíteni Bulma-t, és építünk egy weboldalt a különböző osztályokkal. Annak bizonyítására, hogy az osztályok sokoldalúak Bulma-ban, az egész oktatóanyag oldal épült anélkül, hogy egyetlen CSS-t írnánk. Szeretne más lehetőségeket? Próbáljon ki egy kiválóat weboldal építője . És győződjön meg róla, hogy webhelye a legjobban fut, válassza ki a jogot web hosting szolgáltatás.

Generate flash sale

(Kép hitel: jövő)

A CSS létrehozása a legmelegebb webes esemény a városban. 20-22 szeptembertől kaphat egy jegyet félárra a kód használatával Flashszale5. Kattintson a képre, hogy megtudjon.

01. Kezdje el

Bulma: get started

(Kép hitel: bulma)

Hozzon létre egy új könyvtárat, és bennén belül hozzon létre egy index.html fájl. Ezt a fájlt a kód szerkesztő és hozzon létre egy egyszerű kezdő HTML dokumentum DOCTYPE html és mérethez tag. 

 & lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; meta név = "nézetablak" tartalom =
"Szélesség = eszközszélesség, kezdeti skála = 1" & gt;
& lt; title & gt; oldalcíme & lt; / title & gt;
& lt; / head & gt;
& lt; test & gt;
& lt; / test & gt;
& lt; / html & gt;

02. Telepítse Bulma

Bulma ki használva A doboz olyan gyorsan, mint egy CSS-fájl hozzáadása. A CDN használata linket ad hozzá a HTML-ben. Ha a változók megváltoztatására van szükség, és nagyobb ellenőrzése van a kereten keresztül, NPM Telepítés Bulma használható (lásd a Teljes dokumentáció ). A teljes élményért a betűtípust is be kell vonni. 

 & ln; 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/releasees/v5.3.1/js/all.js" & gt; / script & gt;

03. Építsen egy oldalt

Bulma: hello world

(Kép hitel: bulma)

A testcímke belsejében hozzon létre egy rész elemet és egy div-t az osztályba tartály . A tartályon belül hozzon létre egy H1-et az osztályhoz cím Ezután egy bekezdés az osztályhoz felirat . Most, a "Hello World" bevitele a címre és néhány szövegbe a bekezdésbe. Most már az alapvető indító sablonja van a bulma számára. 

 & lt; szekció osztály = "szakasz" & gt;
& lt; div osztály = "konténer" & gt;
& lt; h1 class = "Cím" & gt;
Helló Világ
& lt; / h1 & gt;
& lt; p class = "subtitle" & gt;
Ez az alapindító
sablon bulma
& lt; / p & gt;
& lt; / div & gt;
& lt; / szekció & gt;

04. Hozzon létre egy felső hős sávot

Készítsen egy új részt az előző felett, és az osztály helyett szakasz , adja meg az osztályt hős . A Hero osztály lehetővé teszi a teljes szélességű banner létrehozását, különféle lehetőségekkel, amelyek a magasságát szabályozzák. Ezen az új szakaszban hozzon létre egy div-t az osztályba hős-test Aztán a tartály Ez megtartja a tartalmat. 

 & lt; szekció osztály = "hős" & gt;
& lt; div osztály = "hős-test" & gt;
& lt; div osztály = "konténer" & gt; ... & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;

05. Adjon hozzá címet és feliratokat

A konténer belsejében adjunk hozzá egy H1 és H2 címkét az osztályokkal cím és felirat . Ezek olyan tipográfiai osztályok, amelyek növelik tartalmuk méretét. A bulma intelligens tudni, ha egy címet és feliratot kombinálnak, és közelebb kerülnek egymáshoz.

06. Adjon hozzá egy színt

Bulma: colour

(Kép hitel: bulma)

Adja hozzá az osztályt elsődleges a hős részre. Ez az elsődleges színt alkalmazza a háttérre, és megváltoztatja a szöveget a könnyebb változathoz. Ahelyett elsődleges , információ , siker , Figyelem , veszély , fény és sötét is kiválasztható 

 & lt; szekció osztály = "Hero IS-primer" & gt;

07. A tartalmat oszlopokba osztja

A weboldal első tartalmi területe két oszlopra oszlik. Készítsen új részt az osztályszakaszhoz, és adjon hozzá egy tartályt. Az oszlopok beállításához egy div-t adunk hozzá oszlopok osztály. Minden oszlopot a szülőtartályon belül adunk hozzá. Az oszlopok ugyanúgy a rendelkezésre álló helyet helyezik el a rendelkezésre álló térben, ha nincsenek megadva.

Ha sok tartalma van, győződjön meg róla, hogy visszaadja az eszközeit megbízható felhő tárolásában. 

 & lt; szekció osztály = "szakasz" & gt;
& lt; div osztály = "konténer" & gt;
& lt; div osztály = "oszlopok-vCentered" & gt;
& lt; div osztály = "oszlop" & gt;
...
& lt; / div & gt;
& lt; div osztály = "oszlop" & gt;
...
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / szekció & gt;

08. Hozzon létre érzékeny képeket

Bulma: responsive images

(Kép hitel: bulma)

A második oszlop tartalmaz egy képet. Csomagolja be a képet egy ábraelembe, és ha lehetséges, adja meg a kép képarányának osztályát. A példában 16by9 használták (lásd a A rendelkezésre álló arányok teljes listája ). 

 & lt; div osztály = "oszlop" & gt;
& lt; class = "kép is-16by9" & gt;
& lt; img src = "img / dog.jpg" & gt;
& lt; / figure & gt;
& lt; / div & gt;

09. Javasoljon műveleteket gombokkal

A gombosztály színes gombokat hoz létre, és alkalmazható & lt; A & gt; vagy & lt; gomb és gt; Elemek az űrlapokban. Két gomb az első oszlophoz, és alkalmazzon színmódosítókat. Ha egynél több gombot használ, tekerje őket egy div-ra az osztályba gombok , amely kijavítja a szakadékot, és lehetővé teszi az osztályok csoportként való alkalmazását. 

 & lt; div osztály = "gombok" & gt;
& lt; egy osztály = "gomb is-info" & gt;
Tudjon meg többet & lt; / a & gt;
& lt; egy osztály = "gomb veszélyt jelentenek" & gt;
Vásároljon most & lt; / a & gt;
& lt; / div & gt;

10. Hozzon létre dobozos tartalmat

Bulma: boxed content

(Kép hitel: bulma)

Adjon hozzá egy új részt az oldal alján három oszlopon. Az oszlopokon belül hozzáadunk egy doboz elemet. A dobozelemek egyszerű konténerek, amelyek körülhatárolják őket, amelyek elkülönítik őket az oldal hátteréből. 

 & lt; div osztály = "oszlop" & gt;
& lt; div osztály = "Box" & gt;
Teszt
& lt; / div & gt;
& lt; / div & gt;

11. Használjon ikonikus dobozokat

Bulma együttműködik a betűtípus Félelmetes 5, de kompatibilis az összes betűtípust könyvtár, és osztályok hívja legtöbb rendelkezésre álló ikonok. Minden dobozban adjunk hozzá egy tartalomtartályt, majd egy span elemet az osztályhoz ikon . A span belsejében használja a & lt; i & gt; elem, amely a kívánt ikont hívja a kívánt ikont. Az ikonok ugyanúgy színezékek, mint a szöveg. 

 & lt; div osztály = "tartalom" & gt;
& lt; span class = "ikon" & gt;
& lt; i class = "fas fa-lg fa-home
"& gt; & lt; / i & gt;
& lt; / span & gt;
& lt; div osztály = "címe-size-6" & gt; ... & lt; / div & gt;
& lt; div osztály = "felirat" méret-6 "& gt; ... & lt; / div & gt;
& lt; / div & gt;

12. Légy merész

Bulma: Be bold

(Kép hitel: bulma)

Hozzon létre egy új kétoszlopos hős részt az oldal alján, így egy Is-info osztály a szakaszhoz. Érdekes hatás érdekében alkalmazza a merész Osztály ebbe a részhez egy finom gradienshez. Ez a módosító mind a hét fő színével működik.

13. Módosítsa a szinteket

A szintek nagyszerű módja annak, hogy az elemeket függőlegesen középpontba helyezzük. Az oldal alján található új szakaszon belül adjunk hozzá egy div-t a szint osztályával és fészkel négy szinten belül. A szinten belül hozzáadott tartalmak függőlegesen igazodnak. 

& lt; div osztály = "szint" & gt;
& lt; div osztály = "szint-tétel van-szöveges-központú" & gt;
...
& lt; / div & gt;
& lt; div osztály = "szint-tétel van-szöveges-központú" & gt;
...
& lt; / div & gt;
& lt; / div & gt;

14. Adja meg és szabályozza az űrlapokat

Egy űrlap hozzáadásához az oldal aljához, készítsen egy új kétoszlopos hős részt elsődleges . Két oszlopra osztja, és a jobb oldali oszlopban hozzon létre egy terület osztály. A mezőosztályt több formanyomtatványt csoportosítottak össze, biztosítva, hogy megfelelően vannak elhelyezve. Minden bemenetet egy személybe kell csomagolni .ellenőrzés osztály. 

 & lt; div osztály = "mező" & gt;
& lt; div osztály = "vezérlés
van-ikonok jobb "& gt;
& lt; bemeneti osztály = "bemenet" típusa = "Email"
Playholder = "Az Ön e-mailje" & gt;
& lt; span class = "ikon kicsi
balra "& gt;
& lt; i class = "fas fa-boríték" & gt; & lt; / i & gt;
& lt; / span & gt;
& lt; / div & gt;
& lt; / div & gt;

15. Adja meg a felhasználók visszajelzését

Bulma: feedback

(Kép hitel: bulma)

Miután az űrlapot benyújtották, vissza kell adnia egy üzenetet a felhasználóknak, hogy tudják, mi történik legközelebb. Bár a Bulma nem tudja ellenőrizni, ha ez az üzenet megjelenik, az elülső vége az üzenetosztályhoz épülhet. 

 & lt; Cikkosztály = "Üzenet" információ "& gt;
& lt; div osztály = "Üzenet-fejléc" & gt;
& lt; p & gt; köszönöm! & lt; / p & gt;
& lt; / div & gt;
& lt; div osztály = "Üzenet-test" & gt;
... & lt; / div & gt;
& lt; / cikk & gt;

16. Adjon hozzá egy láblécet

A rugalmas Lábjegyzet osztály lehetővé teszi bármely elemét ki kell egészíteni az oldal alján, amely egy helyen szerzői jogi információ és alsó navigáció, valamint hozza a céltól a honlapon. 

 & lt; lábléc osztály = "lábléc" & gt;
& lt; div osztály = "Tartalom van-Szövegközpontú" & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt;
& lt; / lábléc & gt;

17. A változók testreszabása

A legtöbb projekt, a prototípusokon túl, köteles dolgozni egy márkájú iránymutatással és színekkel. Hasonlóképpen, biztonságos feltételezni, hogy a tervezőnek meg kell változtatnia a betűtípusokat, színeket vagy más aspektusait. A bulma nagy része az, hogy testreszabható és moduláris. Nem csak a modulokat szelektív importálni lehet, de legfeljebb 415 SASS változót lehet megváltoztatni a kereten belül.

A változók használata azt jelenti, hogy az elsődleges szín, mivel az elsődleges megváltoztatja ezt a színt az egész Bulma keretrendszeren. Ennek megteremtése elsősorban bonyolult lehet, de az útmutatókat használták Három különböző módszer a dokumentációban.

Ez a cikk eredetileg a Creative Web Design magazin 289-es számában jelent meg Web designer . Megvásárolható probléma 289 vagy Iratkozzon fel itt .

Olvass tovább:

  • 5 Inspiráló webes tervezési esettanulmányok
  • A legjobb UI tervezési eszközök
  • Master Minimalista weboldal tervezés

kézikönyv - Most Popular Articles

Márka tipográfia: Teljes útmutató

kézikönyv Feb 8, 2026

A Pentagram létrehozott egy Bespoke betűtípust a nyilvános színház számára (Kép hitel: Pentagram a nyilvánosság..

Hogyan készítsünk képregényt

kézikönyv Feb 8, 2026

Ez a bemutató megmutatja, hogyan hozhat létre képregény oldalt. Bár használjuk Clip Studio Paint Itt rengete..

Hogyan kell használni a React Rugót az összetevők animálásához

kézikönyv Feb 8, 2026

(Kép hitel: Matt Crouch) React Spring segíthet animációkban, amelyek hírhedten trükkösek az interneten való m..

Hozzon létre egy Cinemagrothot a Photoshop 60 másodperc alatt

kézikönyv Feb 8, 2026

Szeretném, ha felvennél egy új készséget, de úgy tűnik, hogy megtalálja az időt, hogy leüljön és tanuljon? Adobe Hogy most lejátszási lista legyen lehet, hogy csa..

Tegyen egy tipográfiai poszter az Adobe InDesign használatával

kézikönyv Feb 8, 2026

Az Adobe InDesign egy nagyszerű program, ha bármit használ, ami erősen használ. Ebben az INDESIGN oktatóanyagon keresztül ..

Hogyan lehet a WordPress webhely többnyelvű

kézikönyv Feb 8, 2026

Az interneten használt 10 nyelven, angolul első rangsor közel 950 millió felhasználó. Ezt követi a kínai k..

Hozzon létre egy karaktert stilizált realizmussal

kézikönyv Feb 8, 2026

Fliptnormals A Henning Sanden és a Morten Jaeger által a VFX-ben a Londonban lévő napi munkák mellett fut. A mag..

Hogyan lehet kombinálni a festő akvarellkészleteit

kézikönyv Feb 8, 2026

Corel festő Az akvarell eszközök bankettjét kínálja. Büszkélkedhet a digitális, valós és akvarell szerszá..

Kategóriák