Heim Web-Frontend CSS-Tutorial Top 10 der beliebtesten CSS-Frameworks

Top 10 der beliebtesten CSS-Frameworks

May 05, 2020 am 09:31 AM
css 框架

Webentwicklungsingenieure müssen viel Zeit mit der Entwicklung von Seitenstilen verbringen. Am einfachsten ist es, ein CSS-Framework zu verwenden Quelle, was sind also einige gute CSS-Frameworks?

Ich habe einige Informationen und Daten gesammelt, um sie mit Ihnen zu besprechen. Jetzt werde ich über die Top 10 CSS-Frameworks mit den meisten Sternen auf Github sprechen.

Bootstrap

Github-Sterneanzahl 140.000.

GitHub-Adresse: https://github.com/twbs/bootstrap

Bootstrap ist das beliebteste CSS-Framework und gilt als das reaktionsschnellste CSS-Framework. Es wurde speziell für die Front-End-Entwicklung entwickelt und hilft beim Erstellen von Webdesign-Konzepten, Mobile-First-Projekten, Rastersystemen, Typografie, Schaltflächen und mehr.

Semantische Benutzeroberfläche

Github-Staranzahl 47,8K.

GitHub-Adresse: https://github.com/Semantic-Org/Semantic-UI

Semantic ist ein Entwicklungsframework, das dabei hilft, schöne responsive Layouts mit benutzerfreundlichem HTML zu erstellen. Semantic UI zielt darauf ab, den Website-Erstellungsprozess semantischer zu gestalten. Das Hauptmerkmal besteht darin, Prinzipien der natürlichen Sprache zu verwenden, um das Lesen und Verstehen des Codes zu erleichtern.

Materialise

Github-Sterneanzahl 37,5K.

GitHub-Adresse: https://github.com/Dogfalo/materialize

Materialise ist ein Front-End-Framework, das auf Material Design basiert, die Selbstanpassung unterstützt und voller Modernität ist.

Bulma

Github-Sterneanzahl 39,6K.

GitHub-Adresse: https://github.com/jgthms/bulma

Bulma ist ein modernes CSS-Framework, das auf Flexbox basiert. Es ist responsiv, modular, Open Source und kostenlos und kann es sein Einfach zu verwenden. Das größte Merkmal von Bulma ist, dass es leichtgewichtig, abhängigkeitsfrei, einfach und benutzerfreundlich ist. Auch wenn Sie kein CSS verstehen. Sie können ganz einfach schöne Webseiten erstellen.

Weitere Details: http://www.sevdot.com/articles/7

Foundation

Github-Staranzahl 28,6K.

GitHub-Adresse: https://github.com/zurb/foundation-sites

Foundation wird zur Entwicklung responsiver HTML-, CSS- und JavaScript-Frameworks verwendet.

Foundation ist ein benutzerfreundliches, leistungsstarkes und flexibles Framework zum Erstellen von Webanwendungen auf jedem Gerät.

Foundation ist ein beliebtes Mobile-First-Framework.

Rein

Github-Sterneanzahl 20,8K.

GitHub-Adresse: https://github.com/pure-css/pure

Eine Reihe leichter, reaktionsfähiger reiner CSS-Module von Yahoo, die für jedes Webprojekt geeignet sind.

Pure ist unglaublich klein, komprimiert in einer GZIP-Datei von nur 3,7 KB*. Wir sind bestrebt, jede Codezeile maximal zu optimieren, um die CSS-Größe so weit wie möglich zu komprimieren, was der mobilen Webproduktion zuträglicher ist. Wenn Sie nur einige seiner Module verwenden, ist CSS zu klein, um Freunde zu haben!

Layui

Github-Sterneanzahl 21,5K.

GitHub-Adresse: https://github.com/sentsin/layui

Layui ist ein emotionales Front-End-UI-Framework, das mit seinen eigenen Modulspezifikationen geschrieben wurde und nativem HTML/CSS/JS folgt Schreib- und Organisationsformen sind sehr niedrigschwellig und sofort einsetzbar. Von außen ist es minimalistisch, aber innen ist es leicht und reich an Komponenten. Jedes Detail, vom Kerncode bis zur API, ist sehr gut für die schnelle Schnittstellenentwicklung geeignet.

Uikit

Github-Sterneanzahl 13,5K.

UIkit ist ein leichtes, modulares Front-End-Framework, das vom YOOtheme-Team entwickelt wurde und schnell eine leistungsstarke Web-Front-End-Schnittstelle erstellen kann. UIKit bietet eine umfassende Palette an HTML-, CSS- und JS-Komponenten, die einfach zu verwenden, leicht anzupassen und zu erweitern sind.

Es wurde auf Basis von LESS entwickelt. Die Codestruktur ist klar und einfach, leicht zu erweitern und zu warten und verfügt über kleine und reaktionsfähige Komponenten. Sie können basierend auf dem grundlegenden UIKit-Stil ganz einfach anpassen und erstellen . Themenstil.

Amaze UI

Github-Sterneanzahl 13,4K.

GitHub-Adresse: https://github.com/amazeui/amazeui

Amaze UI basiert auf dem Konzept von Mobile First (Mobile First) und wird schrittweise von kleinen Bildschirmen auf große Bildschirme erweitert. und schließlich die Realisierung aller Bildschirme. Anpassung und Anpassung an den Trend des mobilen Internets.

Amaze UI enthält fast 20 CSS-Komponenten, mehr als 20 JS-Komponenten und mehrere Webkomponenten mit unterschiedlichen Themen. Es kann schnell bildschirmübergreifende Seiten mit hervorragender Benutzeroberfläche und hervorragendem Erlebnis erstellen und so die Entwicklungseffizienz erheblich verbessern.

Im Vergleich zu ausländischen Frameworks konzentriert sich Amaze UI auf den chinesischen Schriftsatz und passt Schriftarten entsprechend dem Benutzeragenten an, um unter Berücksichtigung der Kompatibilitätsunterstützung inländischer Mainstream-Browser und des integrierten Browsers bessere chinesische Schriftsatzeffekte zu erzielen App.

Amaze UI wurde für HTML5 entwickelt und verwendet CSS3 für animierte Interaktion. Es ist reibungslos und effizient, besser für mobile Geräte geeignet und ermöglicht ein schnelleres Laden von Webanwendungen.

jQuery-Benutzeroberfläche

Github-Sterneanzahl 10,8K.

GitHub-Adresse: https://github.com/jquery/jquery-ui

jQuery UI ist eine Reihe von Benutzeroberflächeninteraktionen, Spezialeffekten, Widgets und Themen, die auf der jQuery-JavaScript-Bibliothek basieren . Egal, ob Sie eine hochgradig interaktive Webanwendung erstellen oder einfach nur eine Datumsauswahl zu einem Formularsteuerelement hinzufügen, jQuery UI ist die perfekte Wahl.

Die jQuery-Benutzeroberfläche enthält viele Widgets, die den Status verwalten, sodass sie sich geringfügig vom typischen Verwendungsmuster für jQuery-Plug-ins unterscheidet. Alle jQueryUI-Widgets verwenden dasselbe Muster. Sobald Sie also gelernt haben, eines zu verwenden, wissen Sie, wie Sie die anderen verwenden.

Das obige ist der detaillierte Inhalt vonTop 10 der beliebtesten CSS-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verwenden Sie Bootstrap in Vue So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Apr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

So schreiben Sie geteilte Zeilen auf Bootstrap So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch Apr 12, 2025 am 12:02 AM

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

So verwenden Sie die Bootstrap -Taste So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen

So richten Sie das Framework für Bootstrap ein So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

So ändern Sie Bootstrap So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

So fügen Sie Bilder auf Bootstrap ein So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

See all articles