Zacznij od Bulmy

Jan 31, 2026

Jak

(Kredyt obrazu: Bulma)

Chcesz zacząć korzystać z Bulmy? Jesteś we właściwym miejscu. Bulma to popularna struktura CSS z prostym systemem Gridbox. Różni się od innych ram, biorąc lżejsze podejście, a nie wliczając żadnych JavaScript - pozostawienie tej decyzji całkowicie aż do dewelopera (aby zbadać inne opcje, zobaczyć nasze wybór Najlepsze ramy CSS. ).

W tym samouczku zademonstrujemy, jak zainstalować Bulma i zbudować stronę internetową z różnymi klasami. Aby udowodnić, jak wszechstronne zajęcia są w bulmy, cała strona samouczka została zbudowana bez pisania jednej linii CSS. Chcesz innych opcji? Wypróbuj doskonały Kreator strony internetowej . I upewnić się, że Twoja witryna działa najlepiej, wybierz właściwe hosting usługa.

Kliknij, aby pobrać pliki samouczków

Generate flash sale — (Kredyt obrazu: przyszłość)

Generuj CSS to najgorętsza impreza internetowa w mieście. Od 20-22 września możesz odebrać bilet na pół ceny za pomocą kodu Flashsale5. Kliknij obraz, aby dowiedzieć się więcej.

01. Zacznij

Bulma: get started — (Kredyt obrazu: Bulma)

Utwórz nowy katalog, a teraz utwórz index.html. plik. Otwórz ten plik w edytorze kodu i utwórz prosty dokument HTML Starter, a DocType HTML i responsywnej znacznika rzutek.

 DocType HTML & GT;
& lt; html & gt;
& lt; Head & GT;
& LT; Meta Name = "vesport" Content =
"Szerokość = szerokość urządzenia, skala początkowa = 1" & gt;
& lt; tytuł> Tytuł strony

02. Zainstaluj Bulma.

Korzystanie z Bulma Out pudełko jest tak szybki jak dodanie pojedynczego pliku CSS. Korzystanie z CDN Dodaj link w HTML. Jeśli konieczne jest zmianę zmiennych i mają większą kontrolę nad ramami, NPM Zainstaluj Bulma. można użyć (patrz Pełna dokumentacja ). W pełnym doświadczeniu należy również włączyć czcionki Awesome 5.

 Link Rel = "Arkusz stylów" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.csssss" & GT;
& LT; Script Defer SRC = "https://use.fontawesome.com/relaress/v5.3.1/js/all.js" & gt; & lt; / script & gt;

03. Zbuduj stronę

Bulma: hello world — (Kredyt obrazu: Bulma)

Wewnątrz tagu ciała utwórz element sekcji i div z klasą pojemnik . W kontenerze utwórz H1 z klasą tytuł Następnie akapit z klasą podtytuł . Na razie wejście "Hello World" do tytułu i jakiś tekst do akapitu. Mamy teraz podstawowy szablon starterowy do Bulmy.

 CLASS CLASS = "Sekcja" & GT;
& lt; div class = "pojemnik" & gt;
& lt; h1 class = "tytuł" & gt;
Witaj świecie
& lt; / h1 & gt;
& LT; P Klasa = "Subtitle" & GT;
To jest podstawowy rozrusznik
Szablon do Bulmy.
& lt; / p & gt;
& lt; / div & gt;
& lt; / sekcja

04. Utwórz górny bar bohatera

Zrób nową sekcję powyżej poprzedniego, a zamiast klasy Sekcja , daj mu klasę bohater . Klasa bohatera umożliwia stworzenie banera pełnej szerokości, z różnymi opcjami kontrolującymi jego wysokość. W ramach tej nowej sekcji Utwórz div z klasą bohaterak a potem A. pojemnik Spowoduje to posiadanie treści.

 Class Class = "Hero" & GT;
& lt; div class = "bohaterak" & gt;
& LT; Div Class = "Kontener" & GT; ... & LT;
& lt; / div & gt;
& lt; / div & gt;

05. Dodaj tytuł i napisy

Wewnątrz kontenera Div dodaj znacznik H1 i H2 z klas tytuł i podtytuł . Są to klasy typograficzne, które zwiększą rozmiar ich treści. Bulma jest mądra, aby wiedzieć, gdy tytuł i napisy są łączone i przyniesie im bliżej.

06. Dodaj splash koloru

Dodaj klasę jest podstawowy do sekcji bohatera. Spowoduje to zastosowanie podstawowego koloru do tła i zmienić tekst do lżejszego wariantu. Zamiast podstawowa , info , sukces , ostrzeżenie , niebezpieczeństwo , lekki i ciemny można również wybrać

 CLASS CLASS = "Bohater jest podstawowy" & GT;

07. Podziel zawartość do kolumn

Pierwszy obszar zawartości witryny jest podzielony na dwie kolumny. Zrób nową sekcję z sekcją klasową i dodaj pojemnik. Aby skonfigurować kolumny, dodaje się Div kolumny klasa. Każda kolumna jest dodawana w pojemniku nadrzędnym. Kolumny będą się przestrzegać równo w dostępnej przestrzeni z małą szczeliną między określoną.

Jeśli masz dużo treści, upewnij się, że cofniesz aktywów w niezawodnym przechowywaniu w chmurze.

 CLASS CLASS = "Sekcja" & GT;
& lt; div class = "pojemnik" & gt;
& lt; div class = "Kolumny is-vcentered" & gt;
& lt; div class = "kolumna" & gt;
...
& lt; / div & gt;
& lt; div class = "kolumna" & gt;
...
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / sekcja

08. Utwórz responsywne obrazy

Bulma: responsive images — (Kredyt obrazu: Bulma)

Druga kolumna będzie zawierać obraz. Owiń obraz w elemencie figurowym, a jeśli to możliwe, podaj liczbę klasy współczynnika obrazu obrazu. W przykładzie, 16by9. został użyty (patrz Pełna lista dostępnych wskaźników ).

09. Zaproponuj akcję przycisków

Klasa przycisków tworzy kolorowe przyciski i można je stosować & lt; a & gt; Elementy lub. & lt; butt & gt; Elementy w formularzach.add dwa przyciski do pierwszej kolumny i zastosuj do nich modyfikatorów kolorów. Jeśli używasz więcej niż jednego przycisku, owinąć je w div z klasą guziki , co koryguje lukę i umożliwia stosowanie klas jako grupy.

 & LT; Div Class = "Przyciski" & GT;
& lt; a class = "Przycisk IS-info" & GT;
Dowiedz się więcej i / A & GT;
& LT; przycisk Class = "jest niebezpieczeństwo jest określone" & GT;
Kup teraz & LT; / A & GT;
& lt; / div & gt;

10. Utwórz zawartość pudełka

Bulma: boxed content — (Kredyt obrazu: Bulma)

Dodaj nową sekcję na dole strony z trzema kolumnami. W kolumnach dodano element skrzynki. Elementy pudełkowe są prostymi pojemnikami z obramowaniem wokół nich, które oddzielają je z tła strony.

11. Użyj ikonicznych skrzynek

Bulma integruje się z czcionką Awesome 5, ale jest kompatybilny ze wszystkimi bibliotekami czcionek i ma zajęcia, aby zadzwonić do najbardziej dostępnych ikon. Wewnątrz każdego pudełka dodaj kontener treści, a następnie element obejmujący z klasą Ikona . Wewnątrz rozpiętości użyj & lt; i & gt; Element do wywołania wymaganych zajęć dla żądanej ikony. Ikony są kolorowe w taki sam sposób jak tekst.

12. Bądź odważny

Utwórz nową sekcję bohatera dwubolową na dole strony, dając jest-info klasa do sekcji. Z ciekawego efektu zastosuj również jest pogrubiony klasa do tej sekcji dla subtelnego gradientu. Ten modyfikator działa ze wszystkimi siedem głównych kolorów.

13. Zmień poziomy

Poziomy są doskonałym sposobem, aby zapewnić, że elementy są wyśrodkowane z rzędu. W ramach nowej sekcji na dole strony dodaj div z klasą poziomu i gniazdo wewnątrz czterech przedmiotów. Każda zawartość dodana w pozycji poziomu będzie wyrównana pionowo.

& lt; div class = "poziom" i gt;
& lt; div Class = "Element-Element Has-Text-Cented" & GT;
...
& lt; / div & gt;
& lt; div Class = "Element-Element Has-Text-Cented" & GT;
...
& lt; / div & gt;
& lt; / div & gt;

14. Dodaj i steruj formularze

Aby dodać formularz na dole strony, wykonaj nową sekcję bohatera dwupolodolowego jest podstawowy . Podzielić go na dwie kolumny, aw prawej kolumnie utwórz pole klasa. Klasa pola służy do grupowania kilku wejść formularzy razem, zapewniając ich odpowiednio rozmieszczone. Każde wejście musi być zawinięte w osobę .kontrola klasa.

15. Daj użytkownikom opinii

Bulma: feedback — (Kredyt obrazu: Bulma)

Po złożeniu formularza należy zwrócić wiadomość do użytkowników, aby wiedzieli, co się dzieje dalej. Chociaż Bulma nie jest w stanie kontrolować, gdy ta wiadomość zostanie wyświetlona, przedni koniec można zbudować z klasą wiadomości.

 & LT; Artykuł Class = "Wiadomość IS-Info" & GT;
& lt; div Class = "Message-Header" & GT;
& lt; p & gt; dziękuję! & lt; / p & gt;
& lt; / div & gt;
& lt; div class = "komunikat-korpus" & gt;
... & lt; / Div & GT;
& LT; / Article & GT;

16. Dodaj stopkę

Elastyczna klasa stopek umożliwia dodawanie dowolnego elementu na dole strony, zapewniając miejsce do informacji o prawach autorskich i nawigacji na dole, a także wprowadzenie wykończenia na stronie internetowej.

 & LT; stopka Class = "Stopka" & GT;
& lt; div Class = "Content Has-Text-Cented" & GT;
& lt; p & lt; / p & gt;
& lt; / div & gt;
& LT; / Footer & GT;

17. Dostosuj zmienne

Większość projektów, poza prototypami, będzie miało wymóg pracy z wytycznymi i kolorami marki. Podobnie jest bezpieczne, że przyjmowanie projektanta będzie musiał zmienić czcionki, kolory lub inne aspekty bulmy. Główną częścią Bulmy jest to, że jest konfigurowalny i modułowy. Nie tylko moduły mogą być selektywnie importowane, ale do 415 zmiennych Sass można zmienić w ramach.

Zastosowanie zmiennych oznacza ustawienie nowego koloru, ponieważ podstawowa zmieni ten kolor w całej bulmy ramy dla tego projektu. Ustawianie tego może być początkowo trudne, ale prowadnice zostały dostarczone za pomocą trzy różne metody w dokumentacji.

Ten artykuł został pierwotnie opublikowany w wydaniu 289 kreatywnego magazynu projektowania stron internetowych Projektant stron internetowych . Kup problem 289. lub Subskrybuj tutaj .

Czytaj więcej:

5 Inspirujących studia przypadków projektowania stron internetowych
Najlepsze narzędzia do projektowania interfejsu użytkownika
Master Minimalistyczny projekt strony internetowej

Zacznij od Bulmy

01. Zacznij

02. Zainstaluj Bulma.

03. Zbuduj stronę

04. Utwórz górny bar bohatera

05. Dodaj tytuł i napisy

06. Dodaj splash koloru

07. Podziel zawartość do kolumn

08. Utwórz responsywne obrazy

09. Zaproponuj akcję przycisków

10. Utwórz zawartość pudełka

11. Użyj ikonicznych skrzynek

12. Bądź odważny

13. Zmień poziomy

14. Dodaj i steruj formularze

15. Daj użytkownikom opinii

16. Dodaj stopkę

17. Dostosuj zmienne

Jak - Najpopularniejsze artykuły

Uzyskaj więcej z Artrage 6: Najlepsze wskazówki, aby zwiększyć przepływ pracy

10 sposobów na poprawę anatomii 3D

Jak narysować słonia

Utwórz interaktywny obraz paralaksy

Jak działa w aplikacjach 3D

Jak rysować z foto powinowactwem dla iPada

Jak kodować znacznik rzeczywistości rozszerzonej

Jak wziąć swoje logo wektorowe z 2D do 3D

Kategorie