Začínáme s bulminou

Sep 11, 2025

jak

(Image Credit: Bulma)

Chcete začít používat bulma? Jsi na správném místě. Bulma je populární CSS rámec s jednoduchým systémem FlexBox Grid. Liší se od jiných rámců tím, že se světlejší přístup a nezahrnuje žádný JavaScript - ponechat toto rozhodnutí úplně až do vývojáře (prozkoumat další možnosti, viz náš výběr Nejlepší CSS Frameworks. ).

V tomto návodu budeme demonstrovat, jak nainstalovat bulma a vybudovat webovou stránku s různými třídami. Pro prokázání toho, jak jsou univerzální třídy v bulmství, celá tutoriálová stránka byla postavena bez psaní jediné řady CSS. Chcete jiné možnosti? Vyzkoušejte vynikající Webové stránky Builder. . A aby se ujistil, že vaše stránky běží v nejlepším případě, vyberte právo web hosting servis.

Klepnutím stáhnete si tutoriálové soubory

Generate flash sale — (Image Credit: budoucnost)

Generovat CSS je nejžhavější webová akce ve městě. Od 20-22 září můžete vyzvednout jízdenku za poloviční cenu pomocí kódu FlashSale5. Kliknutím na obrázek se dozvíte více.

01. ZAČÁTEK.

Bulma: get started — (Image Credit: Bulma)

Vytvořit nový adresář a v něm vytvořte index.html. soubor. Otevřete tento soubor v editoru kódu a vytvořte jednoduchý dokument HTML Starter, s Doctype HTML a citlivým tagem výhledu.

 Doctype HTML & GT;
& lt; html & gt;
& lt; hlava & gt;
& lt, meta název = "wortport" obsah =
"šířka = šířka zařízení, počáteční stupnice = 1" & gt;
& lt, titul & gt; stránku titul

02. Instalace bulma

Použití bulma Out Box je rychle jako přidání jediného souboru CSS. Použití CDN Přidat odkaz v HTML. Pokud je nutné změnit proměnné a mají větší kontrolu nad rámec, NPM Install Bulma. lze použít (viz Plná dokumentace ). Pro plné zkušenosti by měl být také zahrnuta písmo Awesome 5.

 Link Rel = "Stylesheet" href = "https://cdnjs.cloudflare.com/Ajax/libs/bulma/0.7.5/css/bulma.min.css" & gt;
& lt; skript defer src = "https://use.fontawesome.com/alles/v5.3.1/js/all.js" & gt;

03. Vybudujte stránku

Bulma: hello world — (Image Credit: Bulma)

Uvnitř tagu těla vytvořte prvek sekce a div s třídou kontejner . V rámci kontejneru vytvořte H1 s třídou titul pak odstavec se třídou podtitul . Nyní vstupujte do názvu a nějakého textu do názvu a nějakého textu. Nyní máme základní startovací šablonu pro bulma.

 & lt; třída sekce = "sekce" & gt;
& lt; dig class = "kontejner" & gt;
& lt; h1 třída = "titul" & gt;
Ahoj světe
& lt; / h1 & gt;
& lt; p tříd = "titulek" & gt;
Toto je základní startér
Šablona pro bulma
& lt; / p & gt;
& lt; / div & gt;
& lt; / sekce & gt;

04. Vytvořte špičkovou bar tuku

Proveďte novou část nad předchozí a místo třídy sekce Dej to třídu hrdina . Třída hrdiny umožňuje vytváření plnohodnotného banneru s různými možnostmi ovládající jeho výšku. V rámci této nové sekce vytvořte DIV se třídou tajní tělo a pak A. kontejner To bude obsahovat obsah.

 & lt; třída sekce = "hrdina" & gt;
& lt, divová třída = "Hero-tělo" & gt;
& lt, divové třídy = "kontejner" & gt; ... & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;

05. Přidat titul a titulky

Uvnitř kontejneru DIV přidejte značku H1 a H2 s třídami titul a podtitul . Jedná se o typografické třídy, které zvýší velikost jejich obsahu. Bulma je inteligentní vědět, kdy se objeví titul a titulky, a přinese je blíže k sobě.

06. Přidat stříkající barvu

Přidat třídu je-primární do sekce Hero. To bude aplikovat primární barvu na pozadí a změnit text na lehčí variantu. Namísto hlavní , info. , úspěch , Varování , nebezpečí , světlo a temný lze také vybrat

 & lt; třída sekce = "hrdina je primární" & gt;

07. Rozdělte obsah do sloupců

První oblast obsahu webových stránek je rozdělena do dvou sloupců. Vytvořte novou část s třídou sekce a přidejte kontejner. Chcete-li nastavit sloupce, přidá se DIV sloupce třída. Každý sloupec se přidává v rámci nadřazeného kontejneru. Sloupce se budou prostorem stejně v dostupném prostoru s malou mezerou mezi ledními mezery.

Pokud máte spoustu obsahu, ujistěte se, že jste aktivovali aktiva ve spolehlivém cloudovém úložišti.

 & lt; třída sekce = "sekce" & gt;
& lt; dig class = "kontejner" & gt;

08. Vytvořit citlivé obrázky

Bulma: responsive images — (Image Credit: Bulma)

Druhý sloupec bude obsahovat obraz. Zabalte obrázek v prvku obrázku a pokud je to možné, zadejte obrázek třídy poměru stran obrazu. V příkladu, 16by9. byl použit (viz Úplný seznam dostupných poměrů ).

09. Navrhněte akci s tlačítky

Třída tlačítka vytvoří barevné tlačítka a lze ji aplikovat & lt; a gt; prvky OR. & lt; tlačítko & gt; Prvky ve formulářích.add dvě tlačítka do prvního sloupce a aplikovat modifikátory barev. Pokud používáte více než jedno tlačítko, zabalte je do DIV se třídou knoflíky , což opravuje mezeru a umožňuje aplikaci tříd jako skupiny.

 & lt; divá třída = "tlačítka" & gt;
Tlačítko Class = "je informace o" & gt;
Zjistěte více & lt; / a & gt;
Tlačítko Class = "je-nebezpečí je načrtnuty" & gt;
Koupit nyní & lt; / a & gt;
& lt; / div & gt;

10. Vytvořit obsah Boxed

Bulma: boxed content — (Image Credit: Bulma)

Přidejte novou část v dolní části stránky se třemi sloupcemi. Ve sloupcích se přidá krabicový prvek. Box prvky jsou jednoduché kontejnery s ohraničením kolem nich, které je oddělují na pozadí stránky.

11. Použijte kultovní krabice

Bulma integruje s písma Awesome 5, ale je kompatibilní se všemi knihovnami písma a má třídy pro volání nejoblíbenějších ikon. Uvnitř každého krabice přidejte obsah obsahu, následovaný prvkem rozpětí s třídou ikona . Uvnitř rozpětí použijte & lt; i & gt; prvek pro volání požadovaných tříd pro požadovanou ikonu. Ikony jsou zbarveny stejně jako text.

 & lt; divá třída = "obsah" & gt;
& lt, span třída = "icon" & gt;
& lt; i třída = "fas fa-lg fa-home
má text-úspěch "& gt; & lt; / i & gt;
& lt; / span & gt;
& lt; Div Class = "titul je-velikost-6" & gt; ... & lt; / div & gt;
& lt; Div Class = "titulek je-velikost-6" & gt; ... & lt; / div & gt;
& lt; / div & gt;

12. BUDE BOLD.

Vytvořit nový dvoukolový hrdinový úsek v dolní části stránky, která dává IS-INFO. třída do sekce. Pro zajímavý efekt aplikujte také IS-BOLD. Třída do této sekce pro jemný gradient. Tento modifikátor pracuje se všemi sedmi hlavních barev.

13. Změňte úrovně

Úrovně jsou skvělým způsobem, aby bylo zajištěno, že prvky jsou vkrísla v řadě. V nové části stránky ve spodní části stránky přidejte DIV s třídou úrovně a hnízdem uvnitř čtyř položek. Jakýkoliv obsah přidaný v rámci položky úrovně bude vertikálně zarovnán.

& lt; divová třída = "úroveň" & gt;
& lt; Div Class = "Level-Položka má-text-soustředěný" & gt;
...
& lt; / div & gt;
& lt; Div Class = "Level-Položka má-text-soustředěný" & gt;
...
& lt; / div & gt;
& lt; / div & gt;

14. Přidat a řídicí formuláře

Chcete-li přidat formulář na spodní straně stránky, proveďte nový dvoukolový hrdinový úsek je-primární . Rozdělte na dvě sloupce a v pravém sloupci vytvořte pole třída. Třída pole se používá k seskupení několika vstupů formulářů dohromady, což zajišťuje, že jsou řádně rozmístěny. Každý vstup musí být také zabalen do jedince .řízení třída.

 & lt; divové třídy = "pole" & gt;
& lt; dig class = "ovládání má ikony vlevo
má-ikony-vpravo "& gt;
& lt; vstupní třída = "vstup" type = "e-mail"
Zástupný symbol = "Váš email" & gt;
Ikona třídy Class = "je malá
je vlevo "& gt;
& lt; i třída = "fas fa-obálka" & gt; & lt; / i & gt;
& lt; / span & gt;
& lt; / div & gt;
& lt; / div & gt;

15. Dejte uživatelům zpětnou vazbu

Jakmile je formulář odeslán, mělo by vrátit zprávu uživatelům tak, aby věděli, co se stane dál. Ačkoli Bulma není schopen ovládat, když bude zobrazena tato zpráva, přední konec může být postaven se třídou zpráv.

 & lt; třída článku = "Zpráva je-info" & gt;
& lt; dig class = "head-header" & gt;
& lt, p & gt; děkuji! & lt; / p & gt;
& lt; / div & gt;
& lt; divová třída = "Message-tělo" & gt;
... & lt; / div & gt;
& lt; / článek & gt;

16. Přidejte zápatí

Flexibilní třída zápatí umožňuje přidat jakýkoli prvek, který má být přidán v dolní části stránky, který poskytuje místo pro informace o autorských právech a dolní navigaci, stejně jako podání cílové stránky.

 & lt, zápatí třídy = "zápatí" & gt;
& lt; Div Class = "Obsah má-text-střed" & gt;
& lt; p & gt; ... & lt; / p & gt;
& lt; / div & gt;
& lt; / zápatí & gt;

17. Přizpůsobit proměnné

Většina projektů, mimo prototypy, bude mít požadavek na práci s návodu k značce a barvám. Podobně je bezpečné předpokládat, že návrhář bude muset změnit písma, barvy nebo jiné aspekty bulma. Hlavní část bulma je, že je přizpůsobitelná a modulární. Měly být pouze moduly selektivně importovány, ale v rámci rámce lze změnit až 415 proměnných SASS.

Použití proměnných znamená nastavení nové barvy jako primární změní tuto barvu přes celý rámec bulma pro tento projekt. Nastavení to může být nejprve složitější, ale příručky byly poskytnuty tři různé metody v dokumentaci.

Tento článek byl původně publikován v čísle 289 časopisu Creative Web Design Web Designer. . Prodám vydání 289. nebo Přihlásit se zde .

Přečtěte si více:

5 Inspirující web design případové studie
Nejlepší UI Design Tools
Hlavní minimalistický web design

Začínáme s bulminou

01. ZAČÁTEK.

02. Instalace bulma

03. Vybudujte stránku

04. Vytvořte špičkovou bar tuku

05. Přidat titul a titulky

06. Přidat stříkající barvu

07. Rozdělte obsah do sloupců

08. Vytvořit citlivé obrázky

09. Navrhněte akci s tlačítky

10. Vytvořit obsah Boxed

11. Použijte kultovní krabice

12. BUDE BOLD.

13. Změňte úrovně

14. Přidat a řídicí formuláře

15. Dejte uživatelům zpětnou vazbu

16. Přidejte zápatí

17. Přizpůsobit proměnné

jak - Nejoblíbenější články

Jak zjednodušit tvorbu tvaru směsi v Maya

Začněte s Gravem CMS

Průvodce webovým nástrojům Google

5 Hot Nová funkce CSS a jak je používat

Jak míchat paletu kvašu

Malování řízené a hladké tahy s náčrtavou

Jak nakreslit mokré obrázek

Jak vzít Vás vektorové logo od 2D do 3D

Kategorie