Bulma - Szybki przewodnik

Co to jest Bulma?

Bulma to open source, prosty i nowoczesny framework CSS, który jest oparty na module flexbox (służy do tworzenia responsywnej struktury układu).

Historia

Bulma została wydana w roku 2016 i rozprowadzana na licencji MIT. Obecna wersja Bulmy to 0.7.1, została wydana 18 kwietnia 2018 roku.

Dlaczego używać Bulmy?

Bulma jest bardzo łatwa do nauczenia i konfiguracji. Jest zbudowany z SASS i podzielony na 39 plików .sass . Kod można łatwo dostosować, dzieląc na osobne pliki i pozwala to dostosować część aplikacji, aby uzyskać oczekiwany efekt.

funkcje

• Jest to lekki, nowoczesny framework CSS, który wykorzystuje Flexbox.

• Zawiera mobilne pierwsze style w jednym pliku, a nie w oddzielnych plikach.

• Jest konfigurowalny i modułowy.

Zalety

• Zapewnia responsywny projekt dla komputerów stacjonarnych, tabletów i telefonów komórkowych.

• Jest to czysty framework CSS, dzięki czemu można go łączyć z dowolnym frameworkiem JavaScript, takim jak AngularJS, ReactJS itp.

• Wykorzystuje minimalny kod HTML, który ułatwia czytanie i pisanie kodu.

Niedogodności

• To nowa struktura, która nie jest tak dużą wspólnotą.

• Ma mniej dokumentacji i wymaga drobnych ulepszeń.

• Ramy te są nadal w fazie rozwoju.

Opis

Bulma to lekki, nowoczesny framework CSS, który bazuje na module flexbox (służy do tworzenia responsywnych struktur układu i fantazyjnych projektów).

Omówienie Bulmy obejmuje rozpoczęcie pracy z Bulmą, responsywność (możesz przeglądać strony internetowe na różnych urządzeniach, takich jak komputery stacjonarne, tablety i telefony), kolory, funkcje do definiowania kolorów i wartości oraz mieszanki (grupa właściwości CSS, które umożliwiają aby użyć właściwości jednej klasy dla innej klasy) w Bulma.

W poniższej tabeli wymieniono różne typy narzędzi, których możesz użyć do wykorzystania Bulma CSS -

S.No.	Narzędzie i opis
1	Pierwsze kroki z Bulmą Możesz zacząć od Bulmy używając jednego pliku css.
2	Responsywność i kolory Jest to rozwój przyjazny dla urządzeń mobilnych, który można łączyć z dużymi, małymi i średnimi urządzeniami.
3	Funkcje i miksy Bulma używa pewnych funkcji i mikserów do definiowania odpowiednio wartości i elementów.

Opis

Modyfikatory w Bulmie obejmują alternatywne style elementów wykorzystujące klasy, klasy responsywne do zmiany stylów, pomocniki kolorów do zmiany koloru elementów, pomocniki typograficzne do zmiany rozmiaru i koloru tekstu.

Poniższa tabela zawiera listę różnych typów modyfikatorów, których możesz użyć do wykorzystania Bulma CSS -

S.No.	Modyfikatory i opis
1	Składnia modyfikatorów i responsywni pomocnicy Możesz tworzyć alternatywne style dla elementów, używając klas modyfikatorów.
2	Pomocnicy kolorów i typografii Możesz użyć pomocników kolorów do zmiany koloru tekstu lub tła.

Opis

Bulma zapewnia responsywny system siatki (tworzenie układu strony za pomocą szeregu wierszy i kolumn), który skaluje do 12 kolumn w kontenerze. Kolumny zostaną uporządkowane ponownie wraz ze wzrostem rozmiaru urządzenia lub widocznego obszaru.

Poniższa tabela zawiera listę odmian kolumn, których można użyć do wykorzystania Bulma CSS -

S.No.	Typy i opis kolumn
1	Układ kolumn i rozmiary Bulma umożliwia bardzo łatwe budowanie układu kolumn poprzez dodanie klasy kolumn w kontenerze.
2	Czułość i zagnieżdżanie kolumn Bulma zapewnia responsywne kolumny na różnych typach ekranów, takich jak urządzenia mobilne, tablety i komputery stacjonarne.
3	Odstęp między kolumnami i opcje Kolumny tworzą równe odstępy między zawartością kolumn.

Opis

Układ Bulma opisuje strukturę strony internetowej, która została zaprojektowana przy użyciu klas CSS.

Poniższa tabela zawiera listę wariantów układu, których można użyć do wykorzystania Bulma CSS -

S.No.	Typy i opis układu
1	Pojemnik i poziomy Bulma używa kontenerów do przedstawienia podstawowego układu i zawijania zawartości witryny.
2	Obiekt multimedialny Obiekt multimedialny służy do określania abstrakcyjnych stylów obiektów do budowania różnych typów komponentów.
3	Baner bohatera Bulma zapewnia baner bohatera, aby określić baner o pełnej szerokości na stronie internetowej.
4	Płytki Bulma tworzy dwuwymiarowy układ, używając jednej klasy elementu.

Opis

Element formularza Bulma określa dane wejściowe użytkownika za pomocą elementów wejściowych (takich jak pola tekstowe, pola wyboru, przyciski opcji i nie tylko) i wysyła je do serwera w celu przetworzenia danych.

Poniższa tabela zawiera listę odmian formularzy, których można użyć do wykorzystania Bulma CSS -

S.No.	Typy formularzy i opis
1	Kontrolki formularza Bulma zawiera różne typy klas kontroli formularzy do tworzenia różnych form.
2	Wejście Bulma udostępnia pole do wprowadzania danych użytkownika wraz z różnymi typami odmian.
3	Textarea Bulma textarea jest używany, gdy potrzebujesz wielu wierszy danych wejściowych.
4	Wybierz Bulma select jest używany, gdy chcesz umożliwić użytkownikowi wybór spośród wielu opcji.
5	Pole wyboru i radio Pola wyboru i przyciski opcji mogą być używane, gdy chcesz, aby użytkownicy wybierali z listy wstępnie ustawionych opcji.
6	Plik Służy do przesyłania plików z danymi użytkownika.

Opis

Bulma zapewnia różne typy elementów, takie jak element box, który może być używany jako kontener, element przycisku, kontener obrazu do określenia obrazu, element tabeli itp.

Poniższa tabela zawiera listę wariantów elementów, których możesz użyć do wykorzystania Bulma CSS -

S.No.	Typy formularzy i opis
1	Przycisk Element przycisku zapewnia interakcję użytkownika z niestandardowymi stylami przycisków.
2	Zadowolony Bulma udostępnia klasę treści do bezpośredniego używania tagów HTML.
3	Pudełko i ikona .Box klasa definiuje pojemnik zawierający granicznej, promienia i obicia.
4	Wizerunek Bulma używa klasy .image do wyświetlania obrazów na stronie.
5	Paski powiadomień i postępu Bulma określa predefiniowane komunikaty ostrzegawcze do wyświetlania powiadomienia.
6	Stół Bulma opakowuje elementy do wyświetlania danych w formacie tabelarycznym.
7	Znacznik i tytuł Bulma udostępnia małe etykiety zwane tagami do wyświetlania dodatkowych informacji.

Opis

Bulma jest dostarczana ze wstępnie zaprojektowanymi komponentami, które zawierają listy rozwijane, modalne, paginację, pasek nawigacyjny, zakładki itp., Aby ułatwić użytkownikowi korzystanie ze strony.

Poniższa tabela zawiera listę odmian komponentów, których można użyć do wykorzystania Bulma CSS -

S.No.	Opis podzespołu
1	Bułka tarta Bulma używa składnika breadcrumb jako metody nawigacji, aby wskazać użytkownikowi lokalizację bieżącej strony w aplikacji.
2	Karta Komponent karty wyświetla zawartość w ramce dla lepszego wyglądu.
3	Upuścić Bulma zapewnia przełączalne menu rozwijane do wyświetlania powiązanych linków w formacie listy.
4	Wiadomość Bulma udostępnia bloki wiadomości, aby poprawić wygląd Twojej strony.
5	Modalny Modalne to okno potomne nałożone na swoje okno nadrzędne.
6	Navbar Paski nawigacyjne służą jako nagłówki nawigacji w witrynie.
7	Paginacja Składnik paginacji zapewnia szereg powiązanych linków na wielu stronach.
8	Tabs Bulma udostępnia menu nawigacyjne z kartami z różnymi stylami wyświetlania treści.