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 notificationosztá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-dangermódosítókat, amelyek eredménye a következő:

Az notificationosztá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-halfmó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-infoszí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-mediuma 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.