Bulma - Kurzanleitung

Was ist Bulma?

Bulma ist ein Open Source, einfaches und modernes CSS-Framework, das vom Flexbox- Modul abhängt (es wird zur Entwicklung einer reaktionsschnellen Layoutstruktur verwendet).

Geschichte

Bulma wurde im Jahr 2016 veröffentlicht und unter MIT-Lizenz vertrieben. Die aktuelle Version von Bulma ist 0.7.1 und wurde am 18. April 2018 veröffentlicht.

Warum Bulma verwenden?

Bulma ist sehr einfach zu erlernen und einzurichten. Es wurde mit SASS erstellt und durch 39 .sass- Dateien geteilt. Code kann einfach durch Aufteilen in separate Dateien angepasst werden und ermöglicht das Anpassen des Teils der Anwendung, um das erwartete Ergebnis zu erzielen.

Eigenschaften

• Es ist ein leichtes, modernes CSS-Framework, das Flexbox verwendet.

• Es enthält mobile erste Stile in einer einzelnen Datei anstatt in separaten Dateien.

• Es ist anpassbar und modularisierbar.

Vorteile

• Es bietet ein ansprechendes Design für Desktops, Tablets und Handys.

• Es ist ein reines CSS-Framework, sodass Sie es mit jedem JavaScript-Framework wie AngularJS, ReactJS usw. kombinieren können.

• Es wird nur minimaler HTML-Code verwendet, wodurch das Lesen und Schreiben des Codes einfach wird.

Nachteile

• Es ist ein neuer Rahmen, der nicht so groß wie eine Gemeinschaft ist.

• Es hat weniger Dokumentation und muss geringfügig verbessert werden.

• Dieses Framework befindet sich noch in der Entwicklungsphase.

Beschreibung

Bulma ist ein leichtes, modernes CSS-Framework, das vom Flexbox- Modul abhängt (es wird zur Entwicklung einer reaktionsschnellen Layoutstruktur und ausgefallener Designs verwendet).

Die Übersicht über Bulma umfasst die ersten Schritte mit Bulma, die Reaktionsfähigkeit (Sie können die Webseiten auf verschiedenen Geräten wie Desktops, Tablets und Telefonen anzeigen), Farben, Funktionen zum Definieren von Farben und Werten sowie Mixins (Gruppe von CSS-Eigenschaften, die Sie zulassen) Eigenschaften einer Klasse für eine andere Klasse verwenden) in der Bulma.

In der folgenden Tabelle sind verschiedene Arten von Dienstprogrammen aufgeführt, mit denen Sie das Bulma CSS verwenden können.

S.No.	Dienstprogramm & Beschreibung
1	Erste Schritte mit Bulma Sie können mit Bulma beginnen, indem Sie eine CSS-Datei verwenden.
2	Reaktionsfähigkeit und Farben Es ist eine mobile freundliche Entwicklung, die mit großen, kleinen und mittleren Geräten kombiniert werden kann.
3	Funktionen und Mixins Bulma verwendet einige Funktionen und Mixins, um Werte bzw. Elemente zu definieren.

Beschreibung

Die Modifikatoren in Bulma enthalten alternative Stile für die Elemente mithilfe von Klassen, reaktionsfähige Klassen zum Ändern von Stilen, Farbhilfen zum Ändern der Farbe der Elemente und Typografie-Helfer zum Ändern der Größe und Farbe des Texts.

In der folgenden Tabelle sind verschiedene Arten von Modifikatoren aufgeführt, mit denen Sie das Bulma CSS verwenden können.

S.No.	Modifikatoren & Beschreibung
1	Modifikatorsyntax und Responsive Helpers Sie können alternative Stile für die Elemente erstellen, indem Sie Modifikatorklassen verwenden.
2	Farb- und Typografie-Helfer Sie können die Farbhilfen verwenden, um die Farbe des Texts oder Hintergrunds zu ändern.

Beschreibung

Bulma bietet ein reaktionsschnelles Rastersystem (Erstellen eines Seitenlayouts über eine Reihe von Zeilen und Spalten), das bis zu 12 Spalten innerhalb eines Containers skaliert. Die Spalten werden neu angeordnet, wenn die Größe des Geräts oder des Ansichtsfensters zunimmt.

In der folgenden Tabelle sind Variationen von Spalten aufgeführt, mit denen Sie das Bulma CSS verwenden können.

S.No.	Spaltentypen & Beschreibung
1	Spaltenlayout und Größen Bulma ermöglicht sehr leicht Spaltenlayout Aufbau durch Hinzufügen von Spalten Klasse in dem Behälter.
2	Spalten Reaktionsfähigkeit und Verschachtelung Bulma bietet reaktionsschnelle Spalten in den verschiedenen Bildschirmtypen wie Mobilgeräten, Tablets und Desktops.
3	Spaltenabstand und Optionen Spalten erzeugen eine gleiche Lücke zwischen den Spalteninhalten.

Beschreibung

Das Bulma-Layout beschreibt die Struktur der Webseite, die mithilfe ihrer CSS-Klassen erstellt wird.

In der folgenden Tabelle sind Variationen des Layouts aufgeführt, mit denen Sie das Bulma CSS verwenden können.

S.No.	Layouttypen & Beschreibung
1	Container und Ebenen Bulma verwendet Container, um das Grundlayout darzustellen und den Inhalt der Website zu verpacken.
2	Medienobjekt Das Medienobjekt wird verwendet, um abstrakte Objektstile zum Erstellen verschiedener Arten von Komponenten anzugeben.
3	Heldenbanner Bulma bietet ein Heldenbanner, um das Banner in voller Breite für die Webseite anzugeben.
4	Fliesen Bulma erstellt ein zweidimensionales Layout unter Verwendung einer einzelnen Elementklasse.

Beschreibung

Das Bulma-Formularelement gibt Benutzereingabedaten mithilfe von Eingabeelementen (z. B. Textfeldern, Kontrollkästchen, Optionsfeldern usw.) an und sendet sie zur Verarbeitung der Daten an einen Server.

In der folgenden Tabelle sind verschiedene Formulare aufgeführt, mit denen Sie das Bulma CSS verwenden können.

S.No.	Formulartypen & Beschreibung
1	Formularsteuerelemente Bulma enthält verschiedene Arten von Formularsteuerungsklassen zum Erstellen verschiedener Formulare.
2	Eingang Bulma bietet ein Eingabefeld für die Eingabe von Benutzerdaten sowie verschiedene Arten von Variationen.
3	Textbereich Der Bulma-Textbereich wird verwendet, wenn Sie mehrere Eingabezeilen benötigen.
4	Wählen Bulma select wird verwendet, wenn Sie dem Benutzer die Auswahl aus mehreren Optionen ermöglichen möchten.
5	Kontrollkästchen und Radio Die Kontrollkästchen und Optionsfelder können verwendet werden, wenn Benutzer aus einer Liste voreingestellter Optionen auswählen sollen.
6	Datei Es wird verwendet, um die Dateien aus Benutzerdaten hochzuladen.

Beschreibung

Bulma bietet verschiedene Arten von Elementen wie Box-Elemente, die als Container, Schaltflächenelement, Bildcontainer verwendet werden können, um das Bild, Tabellenelement usw. anzugeben.

In der folgenden Tabelle sind Variationen von Elementen aufgeführt, mit denen Sie das Bulma CSS verwenden können.

S.No.	Formulartypen & Beschreibung
1	Taste Ein Schaltflächenelement ermöglicht die Benutzerinteraktion mit benutzerdefinierten Schaltflächenstilen.
2	Inhalt Bulma bietet eine Inhaltsklasse zur direkten Verwendung von HTML-Tags.
3	Box und Symbol Die .box- Klasse definiert einen Container mit Rand, Radius und Abstand.
4	Bild Bulma verwendet die .image- Klasse, um die Bilder auf der Seite anzuzeigen.
5	Benachrichtigungs- und Fortschrittsbalken Bulma gibt vordefinierte Warnmeldungen an, um die Benachrichtigung anzuzeigen.
6	Tabelle Bulma umschließt die Elemente zur Anzeige von Daten in Tabellenform.
7	Tag und Titel Bulma bietet kleine Etiketten, sogenannte Tags, um die zusätzlichen Informationen anzuzeigen.

Beschreibung

Bulma wird mit vorgefertigten Komponenten geliefert, die Dropdowns, Modal, Paginierung, Navigationsleiste, Registerkarten usw. bereitstellen, um die Benutzererfahrung auf der Seite zu vereinfachen.

In der folgenden Tabelle sind Variationen von Komponenten aufgeführt, mit denen Sie das Bulma CSS verwenden können.

S.No.	Komponentenbeschreibung
1	Brotkrume Bulma verwendet die Breadcrumb-Komponente als Navigationsmethode, um dem Benutzer in der Anwendung den aktuellen Standort der Seite anzuzeigen.
2	Karte Die Kartenkomponente zeigt den Inhalt zur besseren Darstellung in einem Feld an.
3	Dropdown-Liste Bulma bietet umschaltbare Dropdown-Menüs zum Anzeigen verwandter Links in einem Listenformat.
4	Botschaft Bulma bietet Nachrichtenblöcke, um das Erscheinungsbild Ihrer Seite zu verbessern.
5	Modal Modal ist ein untergeordnetes Fenster, das über das übergeordnete Fenster gelegt wird.
6	Navbar Navigationsleisten dienen als Navigationsheader für Ihre Site.
7	Seitennummerierung Die Paginierungskomponente bietet eine Reihe verwandter Links auf mehreren Seiten.
8	Tabs Bulma bietet ein Navigationsmenü mit Registerkarten mit verschiedenen Stilen, um den Inhalt anzuzeigen.