Was sind die Bausteine ​​von Bootstrap?

Bootstrap-Komponenten können grob in Layout-Framework, Seitenlayout, Basiskomponenten, jQuery-Plug-in und variabel kompilierte LESS unterteilt werden.

Im Folgenden finden Sie eine kurze Einführung in die Funktionen jedes Moduls in Bootstrap. (Empfohlenes Lernen: Bootstrap-Video-Tutorial)

(1) Seitenlayout

Layout ist für jedes Projekt unerlässlich. Bootstrap hat ein hervorragendes Rasterlayout basierend auf dem 960-Rastersystem erweitert und verfügt über leistungsfähigere Funktionen im responsiven Layout, sodass sich das Rasterlayout an verschiedene Geräte anpassen lässt. Dieses Rasterlayout ist auch recht einfach zu verwenden. Sie müssen es nur entsprechend der HTML-Vorlage anwenden, um den gewünschten Layouteffekt einfach zu erzielen.

Darüber hinaus können durch Ändern des Klassennamens in der Vorlage unterschiedliche Layoutstile erzielt werden. Um beispielsweise ein gemeinsames festes Layout zu implementieren, müssen Sie nur den Namen der Containerklasse zu HTML hinzufügen. Um ein flüssiges Layout zu implementieren, müssen Sie nur den Namen der Container-Fluid-Klasse zu HTML hinzufügen.

Bootstrap hat auch Responsive für Entwickler entwickelt, um das Layout-Framework noch besser zu machen. Entwickler können auf dieser Basis jeden Stil überschreiben, um das ideale responsive Design zu erreichen.

(2) Seitenlayout

Die Qualität des Seitenlayouts wirkt sich direkt auf den Produktstil aus, d. h. darauf, ob das Seitendesign gut aussieht. In Bootstrap basiert das Seitenlayout auf einem globalen Konzept und Formate wie Fließtext, Absatztext, Hervorhebungstext, Titel, Codestile, Schaltflächen, Formulare, Tabellen usw. werden angepasst.

Bootstrap nutzt die Sprites-Technologie im Icon-Teil und bereitet Hunderte häufig verwendeter Icon-Anwendungen für Benutzer vor.

Es ist notwendig, den Lesern das Font Awesome-Projekt zu empfehlen. Es handelt sich um ein von Dave Gandy erweitertes Icon-Theme, das auf Bootstrap basiert. Das größte Merkmal ist, dass im gesamten Icon-Set keine Bilder verwendet werden. Das Font Awesome-Projekt verwendet hauptsächlich @font-face und Pseudoelemente von CSS3, um es zu implementieren.

(3) Grundkomponenten

Grundkomponenten sind eine der Essenzen von Bootstrap und allesamt interaktive Komponenten, die Entwickler normalerweise verwenden müssen. Zum Beispiel Website-Navigation, Registerkarten, Symbolleisten, Breadcrumbs, Seitenleiste, Eingabeaufforderungsbeschriftungen, Produktanzeige, Eingabeaufforderungsinformationsblöcke und Fortschrittsbalken usw. Diese Komponenten sind mit jQuery-Plugins ausgestattet, die das interaktive Erlebnis des Benutzers erheblich verbessern und das Produkt nicht mehr langweilig und unattraktiv machen.

(4) jQuery-Plug-in

Das jQuery-Plug-in in Bootstrap wird hauptsächlich verwendet, um Entwicklern dabei zu helfen, die Funktion der Interaktion mit Benutzern zu erkennen 6 gängige Plug-Ins.

Die Verwendung des jQuery-Plug-Ins in Bootstrap 2 erfordert eine detaillierte Analyse spezifischer Probleme basierend auf der von Bootstrap bereitgestellten Dokumentation und den Parametern jedes Plug-Ins. Nur wenn wir es vollständig verstehen, können wir es flexibel nutzen.

(5) Dynamische Stilsprache LESS

LESS ist eine dynamische CSS-Sprache, die traditionelles CSS basierend auf der JavaScript-Engine oder der Serverseite dynamisch erweitert und über leistungsfähigere Funktionen verfügt . Funktionalität und bessere Flexibilität. Basierend auf LESS kann das Bearbeiten von CSS wie die Verwendung einer Programmiersprache sein und Variablen, eingebettete Deklarationen, gemischte Modi, Operationen usw. definieren.

In Bootstrap gibt es eine Reihe bearbeiteter LESS-Frameworks. Entwickler können diese auf ihre eigenen Projekte anwenden oder LESS-Dateien über Methoden wie less.js, Less.app oder Node.js bearbeiten. Sobald die LESS-Datei kompiliert ist, enthält das Bootstrap-Framework nur noch CSS-Stile, was bedeutet, dass es keine redundanten Bilder, Flash und andere Elemente gibt.

Weitere technische Artikel zu Bootstrap finden Sie in der Spalte Bootstrap-Tutorial.

Das obige ist der detaillierte Inhalt vonWas sind die Bausteine ​​von Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!