Első lépések Bulma

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

Az Apple iCloud tárolója tele van? Íme, hogyan kell felszabadítani a helyet

kézikönyv Sep 11, 2025

(Kép hitel: alma) Az Apple iCloud szolgáltatása az egyik Legjobb felhő tároló Termékek körül ..

Stílus egy webhelyet SASS használatával

kézikönyv Sep 11, 2025

Sokat tehetsz a CSS-vel - talán több, mint gondolnád - de a tiszteletreméltó stíluslap nyelvének korlátozása van. Egy mo..

Építsen egy komplex 3D sci-fi jelenetet a keverőben

kézikönyv Sep 11, 2025

Egy apokaliptikus sci-fi város jelenet létrehozása 3D Art Van valami művész, akit a téma hatalmas összetett..

Illusztrált portrék létrehozása a fotókból

kézikönyv Sep 11, 2025

Képzőművészetet tanulmányoztam és Festési technikák És hosszú ideig teljesen a digitális elképzelés e..

Tartsa távol a tökéletes verziót absztraktsal

kézikönyv Sep 11, 2025

A verzióvezérlést eredetileg a kóddal dolgozó fejlesztőknek célozták meg, mint a több fejlesztő számára, hogy ugyanab..

Hogyan lehet hozzáadni drámát a pasztell műalkotásokhoz

kézikönyv Sep 11, 2025

Nagy művészek, mint Rembrandt és Caravaggio beadni a műalkotások egy kis dráma és intenzitása, ami darabokra emlékeztet ..

Hozzon létre egy festői érzést a digitális művészetben

kézikönyv Sep 11, 2025

A digitális festészet történelmileg túlságosan mesterségesen szenvedett, de a ma rendelkezésre álló szoftverek széles ..

Készítsen logót az Illustrator-ban

kézikönyv Sep 11, 2025

Ezen a héten napvilágot látott az egyes új videó az Adobe teszik Most playlist, gyűjteménye klip arról szól, hogyan lehet létrehozni tervezési projektek Creative Cloud alkalmazás ..

Kategóriák