Alustage Bulmaga

Leidke
(Pildikrediit: Bulma)

Kas soovite Bulma kasutamist alustada? Sa oled õiges kohas. Bulma on populaarne CSS-i raamistik, millel on lihtne flexbox-võrgusüsteem. See erineb teistest raamistikest kergema lähenemisviisi ja JavaScripti lisamata jätmisega - jättes selle otsuse täielikult arendaja otsustada (teiste võimaluste uurimiseks vaadake meie valikut parimad CSS-i raamistikud ).

Selles õpetuses demonstreerime, kuidas Bulma installida, ja koostame selle erinevate klassidega veebisaidi. Et tõestada Bulma klasside mitmekülgsust, on kogu õpetusleht ehitatud ilma CSS-i rida kirjutamata. Kas soovite muid võimalusi? Proovige suurepärast veebisaidi ehitaja . Ja veendumaks, et teie sait töötab kõige paremini, valige sobiv veebimajutus teenus.

Looge välkmüük

(Pildikrediit: tulevik)

Generate CSS on linna kuumim veebisündmus. Kella 20-22 septembrist saate koodi abil pileti kätte poole hinnaga FLASHSALE5. Lisateabe saamiseks klõpsake pilti.

01. Alustage

Bulma: alustage

(Pildikrediit: Bulma)

Looge uus kataloog ja selle sees index.html faili. Avage see fail koodiredaktoris ja looge lihtne HTML-käivitusdokument, millel on HTML-kood DOCTYPE ja tundlik vaateava silt.

Page Title

02. Installimise leidmine

Bulma kasutamine kastis on sama kiire kui ühe CSS-faili lisamine. CDN-i abil lisage HTML-i link. Kui on vaja muutujaid muuta ja raamistiku üle rohkem kontrolli omada, npm installige Bulma saab kasutada (vt täielik dokumentatsioon ). Täieliku kogemuse huvides peaks lisama ka fondi vinge 5.

03. Ehitage leht

Bulma: tere maailm

(Pildikrediit: Bulma)

Kehamärgise sisse looge klassiga sektsiooni element ja div konteiner . Looge konteineris klassiga h1 pealkiri siis klassiga lõik alapealkiri . Praegu sisesta pealkirjaks 'tere maailm' ja lõikesse tekst. Nüüd on meil Bulma põhiline starterimall.

Hello World

This is the basic starter template for Bulma

04. Looge tippkangelase riba

Tehke eelmise osa kohal ja klassi asemel uus jaotis jaotises , andke talle klass kangelane . Kangelasklass võimaldab luua täislaiusega ribareklaami, mille kõrgust reguleerivad erinevad võimalused. Selles uues jaotises looge klassiga div kangelane-keha ja siis a konteiner see hoiab sisu.

...

05. Lisage pealkiri ja subtiitrid

Konteinerdivi sisse lisage klassidega märgend h1 ja h2 pealkiri ja alapealkiri . Need on tüpograafia klassid, mis suurendavad nende sisu. Bulma on arukas teadma, kui pealkiri ja alapealkiri on ühendatud, ja toob need üksteisele lähemale.

06. Lisage värvilaik

Leidmine: värv

(Pildikrediit: Bulma)

Lisage klass on primaarne kangelaste sektsiooni. See rakendab taustale põhivärvi ja muudab teksti heledamaks. Selle asemel esmane , info , edu , hoiatus , oht , valgus ja pime saab ka valida

07. Jagage sisu veergudeks

Veebisaidi esimene sisupiirkond on jagatud kaheks veerguks. Tehke klassi jaotisega uus jaotis ja lisage konteiner. Veergude seadistamiseks lisatakse koos div veerud klass. Iga veerg lisatakse vanemmahutisse. Veerud paigutavad end vabas ruumis võrdselt ja nende vahel on väike vahe, kui pole täpsustatud.

Kui teil on palju sisu, varundage oma varad usaldusväärsesse pilvemällu.

... ...

08. Loo tundlikud pildid

Bulma: tundlikud pildid

(Pildikrediit: Bulma)

Teine veerg sisaldab pilti. Pange pilt kujundelemendisse ja andke võimaluse korral joonisele klassi pildi kuvasuhe. Selles näites 16by9 on kasutatud (vt saadaolevate suhtarvude täielik loetelu ).

09. Soovita toimingut nuppudega

Nuppude klass loob värvilisi nuppe ja neid saab rakendada elemendid või elemendid vormides. Lisage esimesse veergu kaks nuppu ja rakendage neile värvimuutjaid. Kui kasutate rohkem kui ühte nuppu, pakkige need klassiga div-i nupud , mis parandab tühimiku ja võimaldab klasside kasutamist rühmana.

Find out more Buy now

10. Looge kasti sisu

Bulma: sisu karbis

(Pildikrediit: Bulma)

Lisage kolme veeruga lehe lõppu uus jaotis. Veergudes lisatakse kasti element. Kastielemendid on lihtsad konteinerid, mille ümber on piir, mis eraldab neid lehe taustast.

Test

11. Kasutage ikoonikaste

Bulma integreerub Font Awesome 5-ga, kuid ühildub kõigi fontide teekidega ja tal on klassid, et helistada enamusele saadaolevatele ikoonidele. Lisage iga kasti sisukonteiner, millele järgneb span-element koos klassiga ikooni . Spansi sees kasutage element, et kutsuda soovitud ikooni jaoks vajalikud klassid. Ikoonid on värvitud samamoodi nagu tekst.

... ...

12. Ole julge

Bulma: Ole julge

(Pildikrediit: Bulma)

Looge lehe alaossa uus kaheveerguline kangelasjaotis, andes selle on info klassi jaoskonda. Huvitava efekti saavutamiseks rakendage ka on julge klassi selle sektsiooni peen gradient. See modifikaator töötab kõigi seitsme põhivärviga.

13. Muutke taset

Tasemed on suurepärane võimalus tagada, et elemendid oleksid vertikaalselt reas keskel. Lisage lehe allosas uues jaotises tasemeklassiga div ja pesake nelja taseme üksuse sisse. Kogu tasemeüksusesse lisatud sisu joondatakse vertikaalselt.

... ...

14. Lisage ja kontrollige vorme

Vormi lisamiseks lehe lõppu tehke uus kaheveerguline kangelaste jaotis on primaarne . Jagage see kaheks veeruks ja looge paremas veerus a valdkonnas klass. Väljaklassi kasutatakse mitme vormisisendi rühmitamiseks, tagades nende õige paigutuse. Iga sisend peab olema pakitud ka indiviidi sisse .kontroll klass.

15. Andke kasutajatele tagasisidet

Leidmine: tagasiside

(Pildikrediit: Bulma)

Kui vorm on esitatud, peaks see kasutajatele sõnumi tagastama, et nad teaksid, mis edasi saab. Ehkki Bulma ei saa kontrollida, millal see teade kuvatakse, saab esiotsa ehitada sõnumiklassiga.

Thank you!

...

Paindlik jalusklass lubab mis tahes elemendi lisada lehe lõppu, pakkudes kohta autoriõiguste teabele ja allosas navigeerimisele, samuti viimistluse veebisaidile.

...

17. Kohandage muutujaid

Enamikul projektidest, peale prototüüpide, on nõue töötada brändi juhiste ja värvidega. Samamoodi on ohutu eeldada, et disainer peab muutma Bulma fonte, värve või muid aspekte. Suurem osa Bulmast on see, et see on kohandatav ja modulaarne. Mooduleid ei saa valikuliselt importida, vaid raamistikus saab muuta kuni 415 Sassi muutujat.

Muutujate kasutamine tähendab uue värvi seadmist peamiseks muudab seda värvi kogu selle projekti Bulma raamistikus. Selle seadistamine võib esialgu olla keeruline, kuid selle kasutamiseks on antud juhendid kolm erinevat meetodit dokumentatsioonis.

See artikkel avaldati algselt loomingulise veebidisaini ajakirja 289. numbris Veebi disainer . Osta väljaanne 289 või telli siin .

Loe rohkem: