Inizia con Bulma

Sep 13, 2025
Come si fa
Bulma
(Immagine di immagine: Bulma)

Vuoi iniziare a usare Bulma? Sei nel posto giusto. Bulma è un framework CSS popolare con un semplice sistema di griglia Flexbox. Differisce da altri quadri adottando un approccio più leggero e non includendo alcun javascript - lasciando tale decisione interamente allo sviluppatore (per esplorare altre opzioni, vedere la nostra scelta del Best CSS Frameworks. ).

In questo tutorial, dimostreremo come installare Bulma e costruire un sito Web con le sue varie classi. Per dimostrare come versatili le lezioni in Bulma, l'intera pagina Tutorial è stata costruita senza scrivere una singola riga di CSS. Vuoi altre opzioni? Prova un eccellente Builder del sito web . E per assicurarti che il tuo sito funzioni al meglio, scegli il giusto web hosting servizio.

Generate flash sale

(Immagine di immagine: futuro)

Genera CSS è l'evento web più caldo in città. Dal 20-22 settembre è possibile raccogliere un biglietto per metà prezzo utilizzando il codice Flashsale5. Clicca l'immagine per saperne di più.

01. Inizia

Bulma: get started

(Immagine di immagine: Bulma)

Creare una nuova directory, e al suo interno, crea un index.html. file. Aprire questo file in un editor di codice e creare un semplice documento HTML Starter, con un html DOCTYPE e un tag di vista reattivo. 

 & lt ;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; head & gt;
& lt; meta name = "vistaport" contenuto =
"Larghezza = larghezza del dispositivo, scala iniziale = 1" e GT;
& lt; Titolo & GT; Pagina Titolo & lt; / Titolo & GT;
& lt; / head & gt;
& lt; corpo e GT;
& lt; / corpo e GT;
& lt; / html & gt;

02. Installa Bulma.

L'utilizzo di Bulma Out La casella è veloce come aggiungere un singolo file CSS. Usando il CDN Aggiungi un collegamento nell'HTML. Se è necessario modificare le variabili e avere più controllo sul quadro, NPM Installa Bulma. può essere usato (vedi il Documentazione completa ). Per l'esperienza completa, anche il font Awesome 5 dovrebbe essere incluso. 

 & lt; link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" & gt;
& lt; script defder src = "https://use.fontawesome.com/eleases/v5.3.1/js/all.js" & gt; & lt; / script & gt;

03. Costruisci una pagina

Bulma: hello world

(Immagine di immagine: Bulma)

All'interno del tag del corpo, crea un elemento di sezione e un div con la classe contenitore . All'interno del contenitore, crea un H1 con la classe titolo Quindi un paragrafo con la classe sottotitolo . Per ora, input 'Hello World' nel titolo e un po 'di testo nel paragrafo. Ora abbiamo il modello di avviamento di base per Bulma. 

 & lt; sezione class = "Sezione" e GT;
& lt; div class = "container" & gt;
& lt; h1 class = "title" & gt;
Ciao mondo
& lt; / h1 & gt;
& lt; P class = "sottotitolo" e GT;
Questo è l'antipasto di base
Modello per Bulma
& lt; / P & GT;
& lt; / div & gt;
& lt; / sezione & gt;

04. Crea un bar hero superiore

Fare una nuova sezione sopra la precedente, e invece della classe sezione , dargli la classe eroe . La classe dell'eroe consente la creazione di una banner a larghezza completa, con una varietà di opzioni che controllano la sua altezza. All'interno di questa nuova sezione crea un div con la classe Eroe-corpo e poi A. contenitore Questo terrà il contenuto. 

 & lt; sezione class = "eroe" e GT;
& lt; div class = "hero-body" e gt;
& lt; div class = "container" & gt; ... & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;

05. Aggiungi titolo e sottotitoli

Dentro il div container, aggiungere un tag H1 e H2 con le classi titolo e sottotitolo . Queste sono classi di tipografia che aumenteranno le dimensioni del loro contenuto. Bulma è intelligente da sapere quando un titolo e un sottotitolo sono combinati e li porterà più vicini.

06. Aggiungi una spruzzata di colore

Bulma: colour

(Immagine di immagine: Bulma)

Aggiungi la classe è-Primary. alla sezione dell'eroe. Ciò applicherà il colore primario sullo sfondo e cambia il testo sulla variante più leggera. Invece di primario , Informazioni , successo , avvertimento , Pericolo , luce e buio può anche essere scelto 

 & lt; Sezione class = "Hero Is-Primary" & GT;

07. Dividere il contenuto in colonne

La prima area del contenuto del sito è divisa in due colonne. Effettuare una nuova sezione con la sezione della classe e aggiungere un contenitore. Per impostare le colonne, viene aggiunto un div con Colonne classe. Ogni colonna viene aggiunta all'interno del contenitore principale. Le colonne si spazio si spazio allo stesso modo nello spazio disponibile con un piccolo divario tra se non specificato.

Se hai un sacco di contenuti, assicurati di tornare alle tue risorse in un accertamento di cloud affidabile. 

 & lt; sezione class = "Sezione" e GT;
& lt; div class = "container" & gt;
& lt; div class = "colonne is-vctenered" & gt;
& lt; div class = "colonna" e gt;
...
& lt; / div & gt;
& lt; div class = "colonna" e gt;
...
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / sezione & gt;

08. Creare immagini reattivi

Bulma: responsive images

(Immagine di immagine: Bulma)

La seconda colonna conterrà un'immagine. Avvolgere l'immagine in un elemento figura e, se possibile, dare alla figura una classe del rapporto di aspetto dell'immagine. Nell'esempio, 16by9. è stato usato (vedi il Elenco completo dei rapporti disponibili ). 

 & lt; div class = "colonna" e gt;
& lt; figure class = "image is-16by9" & gt;
& lt; img src = "img / dog.jpg" & gt;
& lt; / figura & gt;
& lt; / div & gt;

09. Suggerisci un'azione con i pulsanti

La classe pulsante crea pulsanti colorati e può essere applicato & lt; A & GT; elementi o & lt; Button & gt; Elementi in moduli.Aggiungere due pulsanti alla prima colonna e applicare i modificatori di colore a loro. Se si utilizza più di un pulsante, avvolgili in un div con la classe pulsanti , che corregge il gap e consente l'applicazione di classi come gruppo. 

 & lt; div class = "pulsanti" e GT;
& lt; un class = "pulsante is-info" & gt;
Scopri di più & lt; / A & GT;
& lt; un class = "pulsante è-pericolo è delineato" & gt;
Acquista ora & lt; / A & GT;
& lt; / div & gt;

10. Crea contenuti in scatola

Bulma: boxed content

(Immagine di immagine: Bulma)

Aggiungi una nuova sezione nella parte inferiore della pagina con tre colonne. All'interno delle colonne, viene aggiunto un elemento Box. Gli elementi della scatola sono semplici contenitori con un bordo intorno a loro che li separano dallo sfondo di una pagina. 

 & lt; div class = "colonna" e gt;
& lt; div class = "box" & gt;
Test
& lt; / div & gt;
& lt; / div & gt;

11. Utilizzare scatole iconiche

Bulma si integra con il font Awesome 5, ma è compatibile con tutte le biblioteche dei caratteri e le classi per chiamare le icone più disponibili. All'interno di ogni scatola, aggiungere un contenitore di contenuto, seguito da un elemento di span con la classe icona . Dentro l'intervallo, usa un & lt; I & GT; Elemento per chiamare le classi richieste per l'icona desiderata. Le icone sono colorate allo stesso modo del testo. 

 & lt; div class = "contenuto" e GT;
& lt; span class = "icon" & gt;
& lt; i class = "fas fa-lg fa-home
ha-testo-successo "& gt; & lt; / i & gt;
& lt; / span & gt;
& lt; div class = "title is-size-6" & gt; ... & lt; / div & gt;
& lt; div class = "sottotitle is-size-6" & gt; ... & lt; / div & gt;
& lt; / div & gt;

12. Sii audace

Bulma: Be bold

(Immagine di immagine: Bulma)

Crea una nuova sezione Hero Colonna nella parte inferiore della pagina, dando un is-info. classe alla sezione. Per un effetto interessante, applicare anche il è grassetto classe a questa sezione per un gradiente sottile. Questo modificatore funziona con tutti e sette i colori principali.

13. Cambia i livelli

I livelli sono un ottimo modo per garantire che gli elementi siano centrati verticalmente di fila. All'interno di una nuova sezione nella parte inferiore della pagina, aggiungi un div con la classe di livello e il nido all'interno di elementi a quattro livelli. Qualsiasi contenuto aggiunto entro un elemento di livello sarà allineato verticalmente. 

 & lt; div class = "livello" e GT;
& lt; div class = "livello-oggetto ha-text cenato" e GT;
...
& lt; / div & gt;
& lt; div class = "livello-oggetto ha-text cenato" e GT;
...
& lt; / div & gt;
& lt; / div & gt;

14. Aggiungi e controllo moduli

Per aggiungere un modulo alla fine della pagina, crea una nuova sezione Eroe a due colonne con è-Primary. . Dividerlo in due colonne e nella colonna di destra, creare a campo classe. La classe di campo viene utilizzata per raggruppare diversi ingressi di forma insieme, assicurando che siano distanziati correttamente. Ogni input deve essere avvolto anche in un individuo .controllo classe. 

 & lt; div class = "campo" e GT;
& lt; div class = "controllo ha-icone-sinistra
ha icone-destra "& gt;
& lt; Input class = "Input" Type = "Email"
PLASEHOLDER = "La tua email" e GT;
& lt; span class = "icona è-piccola
è-sinistra "& GT;
& lt; i class = "FAS Fa-BusyPe" & GT; & Lt; / I & GT;
& lt; / span & gt;
& lt; / div & gt;
& lt; / div & gt;

15. Dare agli utenti feedback

Bulma: feedback

(Immagine di immagine: Bulma)

Una volta inviato un modulo, dovrebbe restituire un messaggio agli utenti in modo che sapranno cosa succede dopo. Sebbene Bulma non sia in grado di controllare quando questo messaggio verrà visualizzato, la parte anteriore può essere costruita con la classe del messaggio. 

 & lt; articolo class = "Messaggio is-info" & gt;
& lt; div class = "message-header" & gt;
& lt; p & gt; grazie! & lt; / P & GT;
& lt; / div & gt;
& lt; div class = "messaggi-body" e gt;
... & lt; / div & gt;
& lt; / Article & gt;

16. Aggiungi un piè di pagina

La classe del piè di pagina flessibile consente di aggiungere qualsiasi elemento nella parte inferiore di una pagina, fornendo un luogo per informazioni sul copyright e navigazione in basso, oltre a portare una finitura sul sito web. 

 & lt; footer class = "piè di pagina" e GT;
& lt; div class = "contenuto ha-testo centrato" e GT;
& lt; P & GT; ... & lt; / P & GT;
& lt; / div & gt;
& lt; / footer & gt;

17. Personalizza variabili

La maggior parte dei progetti, oltre i prototipi, avrà un requisito di lavorare con una linea guida e colori del marchio. Allo stesso modo, è sicuro assumere che un designer avrà bisogno di cambiare i caratteri, i colori o altri aspetti del Bulma. Una parte importante di Bulma è che è personalizzabile e modulare. Non solo i moduli possono essere importati selettivamente, ma fino a 415 variabili sass possono essere modificati all'interno del quadro.

L'uso delle variabili significa impostare un nuovo colore come primario cambierà quel colore attraverso l'intero quadro di Bulma per quel progetto. L'impostazione di questo può essere complicata all'inizio, ma le guide sono state fornite utilizzando Tre metodi diversi nella documentazione.

Questo articolo è stato originariamente pubblicato in questione 289 della rivista creativa di web design Web designer . Acquista il problema 289. o Iscriviti qui .

Per saperne di più:

  • 5 Studi per casi di progettazione web ispiratrici
  • I migliori strumenti di progettazione UI
  • Progettazione del sito web minimalista principale

Come si fa - Articoli più popolari

Come modificare un video su Tiktok

Come si fa Sep 13, 2025

(Immagine di credito: Mabel Wynne) Imparare a modificare un video su Tiktok probabilmente non sarebbe stato qualcosa ..

Come animare con la libreria mo.js

Come si fa Sep 13, 2025

(Immagine di credito: PEXELS / Frank Kagumba) MO.JS è una libreria JavaScript Motion Graphics unica che non solo fac..

4 passaggi per utilizzare font variabili

Come si fa Sep 13, 2025

(Immagine di immagine: futuro) I caratteri variabili consentono ai progettisti di caratteri di definire le variazioni..

Utilizzare lo strumento Pen e le texture per aggiungere profondità in Photoshop

Come si fa Sep 13, 2025

Oltre i seguenti video di catturazione dello schermo breve, Charlie Davis. , un illustratore a Londra, copre come ..

Usa Marmoset Toolbag per presentare i modelli in VR

Come si fa Sep 13, 2025

MARMOSET Toolbag non è affatto nuovo al 3D Art. industria. È stato fuori per anni, ed è noto per la sua robuste..

Affinità Designer: come utilizzare lo strumento Penna

Come si fa Sep 13, 2025

Ha bisogno di una piccola introduzione, ma Affinity Designer è una suite di strumenti di editing art vettoriale disponibili per Mac / Windows e ora anche sul iPad. . Questo ..

Come dipingere una scena foresta fantasy da sogno

Come si fa Sep 13, 2025

I pittori Rococò del XVIII secolo hanno usato l'immaginazione, le tavolozze da sogno, l'atmosfera romantica e le vivaci pennella..

Crea una doccia Meteor in 3DS Max

Come si fa Sep 13, 2025

Se si desidera creare una doccia di meteori 3D per una scena o un progetto, puoi facilmente rendere una doccia di meteora fotorea..

Categorie