A Bulma egy egyszerű, elegáns és modern CSS keretrendszer, amelyet sok fejlesztő előnyben részesít a Bootstrap helyett. Személy szerint úgy gondolom, hogy a Bulma alapértelmezés szerint jobb dizájnnal rendelkezik, és könnyebbnek is érzi magát.
Ebben az oktatóanyagban szuper gyors bemutatást adok a könyvtárról.
Létrehoztunk egy ingyenes Bulma tanfolyamot is. Ide kattintva megnézheti!

A beállítás
A Bulma beállítása rendkívül egyszerű, és többféleképpen is megteheti, függetlenül attól, hogy az NPM-et jobban szereti-e, közvetlenül a dokumentumokból tölti le vagy CDN-t használ. Csatolni fogunk egy CDN-t a HTML fájlunkból, így:
Ez hozzáférést biztosít a Bulma osztályokhoz. És valójában ennyi a Bulma - osztályok gyűjteménye.
Módosítók
Az első dolog, amit meg kell tanulnia a Bulmáról, a módosító osztályok. Ezek lehetővé teszik, hogy alternatív stílusokat állítson be szinte az összes Bulma elemhez. Mindegyik is-*
vagy a betűvel kezdődik has-*
, majd kicseréli a *
kívánt stílust.
Ahhoz, hogy ezt a koncepciót megfelelően megértsük, kezdjük a gombokkal.
Gombok
Ahhoz, hogy egy normál gombot Bulma gombbá alakítsunk, egyszerűen megadjuk neki az osztályt button
.
Click here
Ami a következő stílust eredményezi:

Mint látható, alapértelmezés szerint szép lapos kivitelű. A stílus megváltoztatásához Bulma módosítókat használunk. Kezdjük azzal, hogy a gombot nagyobbá, zöldebbé és lekerekített sarkokkal tesszük:
Click here
Ez az eredmény egy kellemes megjelenésű gomb:

Módosítókkal is szabályozhatja a gombok állapotát. Adjuk hozzá például az osztályt is-focused
, amely szegélyt ad hozzá:

Végül használjuk az egyik has-*
módosítót is. Ezek általában azt szabályozzák, hogy mi van az elemben. Esetünkben a szöveg. Tegyük hozzá has-text-weight-bold
.
Itt az eredmény:

Azt javaslom, hogy játsszon a különféle osztályok kombinációival, hogy megértsék, mennyire rugalmas ez a rendszer. A kombinációk szinte végtelenek. További információért tekintse meg a dokumentumok gombjait.
Oszlopok
Bármely CSS-keretrendszer lényege az, hogy miként oldják meg az oszlopokat, mivel ez szinte minden webhely számára releváns, amelyet valaha is építenek. A Bulma a Flexboxon alapul, így oszlopok létrehozása nagyon egyszerű. Hozzunk létre négy oszlopos sort.
First column Second column Third column Fourth column
Először egy konténert hozunk létre , amelynek osztálya van
columns
, majd mindegyik gyermeknek adunk egy osztályt column
. Ennek eredménye a következő:

Az oszlopok köré szegélyt is fűztem, hogy jobban láthatóak legyenek.
Vegye figyelembe, hogy annyi oszlopot adhat hozzá, amennyit csak akar. A Flexbox gondoskodik a tér egyenlő elosztásáról közöttük.
Az oszlopok színének megadásához a bennük lévő szöveget a-val helyettesíthetjük
címkét, és adja meg az notification
osztályt és egy is-*
módosítót. Így például:
Első oszlop
Csináljuk a is-info
, is-success
, is-warning
és is-danger
módosítókat, amelyek eredménye a következő:

Az notification
osztály valójában a felhasználók figyelmeztetésére szolgál valamiről, mivel lehetővé teszi a háttér színnel való kitöltését a is-*
módosítók segítségével. Itt jól működik az oszlopok elválasztása.
Könnyen szabályozhatjuk az oszlop szélességét is. Adjuk hozzá a is-half
módosítót a zöld oszlophoz.
Ami azt eredményezi, hogy a második oszlop immár a szélesség felét foglalja el, míg a három másik a maradék fele egyharmadát foglalja el.

Az oszlopok szélességének szabályozásához használhatja a következő lehetőségeket:
is-three-quarters
is-two-thirds
is-half
is-one-third
is-one-quarter
is-four-fifths
is-three-fifths
is-two-fifths
is-one-fifth
Hős
Végül tanuljuk meg, hogyan lehet hősöt létrehozni Bulmában. Használjuk a szemantikát , és osztályt adunk neki,
hero
és is-info
színt adunk neki. Hozzá kell adnunk egy gyermeket is az osztályhoz
hero-body
.

Annak érdekében, hogy ez a hős valami értelmes tevékenységet hajtson végre, hozzáadunk egy konténer elemet a törzs belsejében, és hozzáadunk egy címet és feliratot.
Primary title
Primary subtitle

Most kezd jól kinézni! Ha azt akarjuk, hogy nagyobb legyen, egyszerűen felvehetjük magára is-medium
a címkére.
...

És ez az!
Most megkapta az alapvető ízelítőt a Bulma működéséről. És a legjobb az, hogy a könyvtár többi része ugyanolyan intuitív és egyszerű, mint az eddig látott fogalmak. Tehát, ha megérted ezt, akkor a többit is gond nélkül megérted.
Ha többet szeretne megtudni, feltétlenül nézze meg az ingyenes Bulma tanfolyamot a Scrimbán!
Köszönöm, hogy elolvasta! A nevem Per Borgen, a Scrimba társalapítója vagyok - ez a legegyszerűbb módja a kódolás megtanulásának. Tekintse meg adaptív webdesign bootcampunkat, ha meg akarja tanulni a modern weboldal professzionális felépítését.
