Începeți cu Bulma

Sep 13, 2025
să
Bulma
(Credit Imagine: BulMA)

Doriți să începeți cu ajutorul BulMA? Ești în locul potrivit. Bulma este un cadru popular CSS cu un sistem simplu de rețea Flexbox. Aceasta diferă de alte cadre, luând o abordare mai ușoară și fără a include orice JavaScript - lăsând această decizie în întregime până la dezvoltator (pentru a explora alte opțiuni, a se vedea alegerea noastră cele mai bune cadre CSS. ).

În acest tutorial, vom demonstra cum să instalăm Bulma și vom construi un site web cu diferitele sale clase. Pentru a dovedi cât de versatile, clasele sunt în BulMA, întreaga pagină tutorial a fost construită fără a scrie o singură linie de CSS. Doriți alte opțiuni? Încercați un excelent Builder de site-uri web . Și pentru a vă asigura că site-ul dvs. rulează la cel mai bun, alegeți dreptul web hosting serviciu.

Generate flash sale

(Credit Imagine: Viitor)

Generarea CSS este cel mai tare eveniment web din oraș. De la 20-22 septembrie puteți ridica un bilet la jumătate de preț utilizând codul FlashSale5. Faceți clic pe imagine pentru a afla mai multe.

01. Începeți

Bulma: get started

(Credit Imagine: BulMA)

Creați un nou director și în interiorul acesteia, creați un index.html. fişier. Deschideți acest fișier într-un editor de cod și creați un simplu document HTML Starter, cu un DOCTYPE HTML și o etichetă de vizualizare receptivă. 

 și lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& Lt; Meta Name = "Viewport" Content =
"Lățime = lățimea dispozitivului, la scară inițială = 1" & GT;
& title & gt; titlul paginii & lt; / titlu & gt;
& lt; / head & gt;
& lt; corp & gt;
& lt; / corp & gt;
& lt; / html & gt;

02. Instalați Bulma.

Utilizarea BulMA Out caseta este la fel de rapidă ca adăugarea unui singur fișier CSS. Utilizarea CDN Adăugați un link în HTML. Dacă este necesar să se schimbe variabilele și să aibă mai mult control asupra cadrului, NPM Instalați Bulma. pot fi utilizate (a se vedea Documentație completă ). Pentru experiența deplină, ar trebui să fie incluse și font minunat 5. 

 & Link Rel = "Stylesheet" Href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/libs/bulma.min.css" & GT;
& Lt; script src = "https://use.fontawesome.com/releases/v5.3.1/js/all.js" & gt; / gt;

03. Construiți o pagină

Bulma: hello world

(Credit Imagine: BulMA)

În interiorul etichetei corpului, creați un element secțiune și un div cu clasa container. . În interiorul containerului, creați un H1 cu clasa titlu apoi un paragraf cu clasa subtitlu . Deocamdată, introduceți "Hello World" în titlu și un text în paragraf. Acum avem șablonul de bază pentru BulMA. 

 & lt; secțiunea Clasa = "secțiunea" & GT;
& lt; div clasa = "container" & gt;
& lt; h1 clasa = "titlu" & gt;
Salut Lume
& lt; / h1 & gt;
& lt; p clasă = "subtitlu" & gt;
Acesta este starterul de bază
Șablon pentru Bulma
& lt; / p & gt;
& lt; / div & gt;
& lt; / secțiune & gt;

04. Creați un bară de erou de top

Faceți o nouă secțiune peste cea precedentă și în loc de clasă secțiune , dă-i clasa erou . Clasa Hero permite crearea unui banner cu lățimea completă, cu o varietate de opțiuni care să-și controleze înălțimea. În cadrul acestei noi secțiuni creați un div cu clasa Hero-corp. și apoi a. container. Acest lucru va organiza conținutul. 

 & lt; secțiunea de clasă = "erou" & gt;
& Lt; Div clasa = "erou-corp" & gt;
& Lt; Div clasa = "container" & gt; ... / Div & gt;
& lt; / div & gt;
& lt; / div & gt;

05. Adăugați titlu și subtitrări

În interiorul containerului DIV, adăugați o etichetă H1 și H2 cu clasele titlu și subtitlu . Acestea sunt clase de tipografie care vor crește dimensiunea conținutului lor. Bulma este inteligentă să știe când un titlu și un subtitrare sunt combinate și le va aduce mai aproape împreună.

06. Adăugați o stropire de culoare

Bulma: colour

(Credit Imagine: BulMA)

Adăugați clasa este-primar. la secțiunea Hero. Aceasta va aplica culoarea primară în fundal și va schimba textul la varianta mai ușoară. In loc de primar , Info. , succes , avertizare , Pericol , ușoară și întuneric poate fi de asemenea aleasă 

 & lt; secțiunea de clasă = "eroul este-primar" & gt;

07. Împărțiți conținutul în coloane

Prima zonă de conținut a site-ului este împărțită în două coloane. Faceți o nouă secțiune cu secțiunea de clasă și adăugați un container. Pentru a configura coloanele, se adaugă un div cu coloane clasă. Fiecare coloană este adăugată în interiorul containerului părinte. Coloanele se vor sparge în mod egal în spațiul disponibil, cu un decalaj mic între dacă nu este specificat.

Dacă aveți o mulțime de conținut, asigurați-vă că vă sprijiniți activele în depozitare de încredere în cloud. 

 & lt; secțiunea Clasa = "secțiunea" & GT;
& lt; div clasa = "container" & gt;
& Lt; Clasa Div = "Coloanele este-vCentrate" & GT;
& lt; div clasa = "coloană" & gt;
...
& lt; / div & gt;
& lt; div clasa = "coloană" & gt;
...
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / secțiune & gt;

08. Creați imagini receptive

Bulma: responsive images

(Credit Imagine: BulMA)

A doua coloană va conține o imagine. Înfășurați imaginea într-un element de figură și, dacă este posibil, dați figura o clasă a raportului de aspect al imaginii. În exemplul, 16BO9. a fost folosit (a se vedea Lista completă a ratelor disponibile ). 

 & lt; div clasa = "coloană" & gt;
& lt; figura clasa = "imagine este-16by9" & gt;
& lt; img src = "img / dog.jpg" & gt;
& lt; / figura & gt;
& lt; / div & gt;

09. Sugerați acțiunea cu butoanele

Clasa butonului creează butoane colorate și poate fi aplicată & lt; A & GT; elemente sau & buton & gt; Elemente în formulare.Add două butoane la prima coloană și aplicați modificatori de culoare pentru ei. Dacă utilizați mai mult de un buton, înfășurați-le într-un div cu clasa butoane , care corectează decalajul și permite aplicarea claselor ca grup. 

 & Lt; Div clasa = "butoane" & gt;
& lt; un buton de clasă = "este-info" & gt;
Aflați mai multe & lt; / a & gt;
& lt; un buton de clasă = "este-pericol este ilustrat" ​​& gt;
Cumpărați acum & lt; / a & gt;
& lt; / div & gt;

10. Creați conținutul de cutie

Bulma: boxed content

(Credit Imagine: BulMA)

Adăugați o nouă secțiune în partea de jos a paginii cu trei coloane. În coloane, se adaugă un element cutie. Elementele casetei sunt containere simple, cu o margine în jurul lor, care le separă de fundalul unei pagini. 

 & lt; div clasa = "coloană" & gt;
& lt; div clasa = "cutie" & gt;
Test
& lt; / div & gt;
& lt; / div & gt;

11. Folosiți cutii iconice

Bulma integrează cu Font Awesome 5, dar este compatibil cu toate bibliotecile fontului și are clase pentru a apela cele mai multe pictograme disponibile. În interiorul fiecărei casete, adăugați un recipient de conținut, urmat de un element de vârf cu clasa pictograma . În interiorul spanului, utilizați un & lt; i & gt; element pentru a apela clasele necesare pentru pictograma dorită. Icoanele sunt colorate în același mod ca și textul. 

 & Clasa Div = "Conținut" & GT;
& lt; span clasa = "pictograma" & gt;
& lt; i clasa = "FAS FA-LG FA-HOME
are-text-succes "& gt; / lt; / i & gt;
& lt; / span & gt;
& Lt; Div clasa = "Titlul este-dimensiune-6" & gt; ... / div & gt;
& Lt; Div clasa = "subtitlu este-size-6" & gt; ... / div & gt;
& lt; / div & gt;

12. Fii îndrăzneț

Bulma: Be bold

(Credit Imagine: BulMA)

Creați o nouă secțiune de erou cu două coloane în partea de jos a paginii, oferind un este-info. clasa la secțiune. Pentru un efect interesant, aplicați și ele este îndrăzneț clasa la această secțiune pentru un gradient subtil. Acest modificator funcționează cu toate cele șapte dintre culorile principale.

13. Schimbați nivelele

Nivelurile reprezintă o modalitate excelentă de a asigura că elementele sunt centrate pe verticală la rând. Într-o nouă secțiune din partea de jos a paginii, adăugați un div cu clasa de nivel și cuib în interiorul patru elemente de nivel. Orice conținut adăugat într-un element de nivel va fi aliniat vertical. 

& lt; div clasa = "nivel" & gt;
& lt; div clasa = "element de nivel are textul centrat pe text" & gt;
...
& lt; / div & gt;
& lt; div clasa = "element de nivel are textul centrat pe text" & gt;
...
& lt; / div & gt;
& lt; / div & gt;

14. Adăugați și controlați formularele

Pentru a adăuga un formular în partea de jos a paginii, faceți o nouă secțiune de erou cu două coloane cu este-primar. . Împărțiți-l în două coloane și în coloana din dreapta, creați o camp clasă. Clasa de câmp este utilizată pentru a grupa împreună mai multe intrări de formă, asigurându-se că sunt distanțate corespunzător. Fiecare intrare trebuie, de asemenea, să fie înfășurată într-un individ .Control clasă. 

 & Lt; Div clasa = "câmp" & gt;
& lt; div Clasa = "Controlul are icoane-stânga
are-icoane-dreapta "& gt;
& Lt; Input Class = "Intrare" Type = "Email"
Placeholder = "Emailul dvs." & GT;
& Lt; Span Class = "Icon este-mic
este-stânga "& gt;
& lt; i clasa = "Fas fa-plic" & gt; / i & gt;
& lt; / span & gt;
& lt; / div & gt;
& lt; / div & gt;

15. Oferiți utilizatorilor feedback

Bulma: feedback

(Credit Imagine: BulMA)

Odată ce un formular este trimis, acesta ar trebui să returneze un mesaj utilizatorilor, astfel încât să știe ce se întâmplă în continuare. Deși Bulma nu este capabilă să controleze când va fi afișat acest mesaj, capătul frontal poate fi construit cu clasa de mesaje. 

 & lt; articol de clasă = "mesaj este-info" & gt;
& lt; div Clasa = "Message-antet" & GT;
& Lt; P & Gt; vă mulțumesc! & LT; / P & GT;
& lt; / div & gt;
& lt; div clasa = "mesaj-corp" & gt;
... & Lt; / div & gt;
& lt; / articol & gt;

16. Adăugați un subsol

Clasa de subsol flexibilă permite adăugarea oricărui element în partea de jos a unei pagini, oferind un loc pentru informații privind drepturile de autor și navigarea de jos, precum și aducerea unui finisaj pe site. 

 & lt; footer clasa = "subsol" & gt;
& lt; div Clasa = "Conținut are textul centrat" ​​& GT;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt;
& lt; / footer & gt;

17. Personalizați variabilele

Cele mai multe proiecte, dincolo de prototipuri, vor avea o cerință de a lucra cu o orientare și culori de marcă. În mod similar, este sigur să presupunem că un designer va trebui să schimbe fonturile, culorile sau alte aspecte ale BulMA. O parte importantă a BulMA este că este personalizabilă și modulară. Nu numai că modulele pot fi importate selectiv, dar până la 415 variabilele SAS pot fi modificate în cadrul cadrului.

Utilizarea variabilelor înseamnă stabilirea unei culori noi, deoarece primarul va schimba acea culoare pe întregul cadru Bulma pentru acest proiect. Setarea acestui lucru poate fi dificilă la început, dar ghidurile au fost furnizate folosind trei metode diferite în documentație.

Acest articol a fost publicat inițial în numărul 289 din revista Creative Web Design Web designer . Cumpăra problema 289. sau Abonați-vă aici .

Citeste mai mult:

  • 5 Studii de caz de design de web inspirat
  • Cele mai bune instrumente de design UI
  • Site-ul MASTER MINIMALIST

să - Cele mai populare articole

44 dintre cele mai bune comenzi rapide iPad și gesturi pentru iPados 2020

să Sep 13, 2025

(Credit Imagine: Viitor) SARI LA: Comenzi rapide de bază I..

Cum să simplificați crearea de forme a amestecului în Maya

să Sep 13, 2025

(Credit Imagine: Antony Ward) În Maya, se amestecă formele sau obiectivele morph, așa cum sunt cunoscute, sunt o m..

Tot ce trebuie să știți despre divizarea codului JavaScript

să Sep 13, 2025

Site-urile moderne combină adesea toate JavaScript-ul lor într-un singur, mare Main.js. script. Acest lucru con�..

Cum de a desena un caracter în stilou și cerneală

să Sep 13, 2025

Ca artist la un studio de joc, am uitat cele mai multe medii tradiționale, dar cerneala se cheamă întotdeauna înapoi la mine...

Cum se modelează conceptul de artă în cinema 4d

să Sep 13, 2025

Cu câțiva ani în urmă, directorul de artă al Jocurilor Lucid mi-a cerut să-i ajut să proiecteze 10 vehicule independente p..

Cum de a picta o viață florală vibrantă încă

să Sep 13, 2025

Culoarea și textura oferă o modalitate perfectă de a da vibrații unei vieți florale în continuare. Această demonstrație a..

Cum de a proiecta un erou animat

să Sep 13, 2025

Următoarele sfaturi descompun procesul meu pentru animarea Bink-ului pentru Eric Miller Animation Seria Web viitoare a studiourilor. Bink este o mică creatură curioasă de mare, care a fos..

Cum se numește agenția dvs. de design web

să Sep 13, 2025

Obținerea numelui potrivit pentru agenția dvs. nu este ușoară; O mulțime de oameni se încadrează în capcana de a-și numi..

Categorii