Zu den
HTML-Frontend-Frameworks gehören: Bootstrap, AUI, Amaze UI, Frozen UI, Frozen UI, WeUIi, SUI, AUI, MUI, Semantic UI, Foundation, UiKit, Pure usw.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.
HTML5-Frontend-Framework
Bootstrap
Lassen Sie uns zunächst über Bootstrap sprechen, oder Sie haben es erraten, oder es wird dieses geben (haha). Macht. Es hat einen Rahmen. Die überwältigende Dynamik. Als ich zum ersten Mal dem Taoismus beitrat, war ich entschlossen, mich wachsen zu lassen, indem ich jeden Buchstaben des Codes abtippte, um mich zu besiegen. Dadurch wurde ich von verschiedenen schwulen Freunden um mich herum angezogen und begann meine Bootstrap-Reise. Obwohl ich eine talentierte Person im Bereich Design + Frontend bin, hat Gott mir nur erlaubt, PS und verschiedene Design-Tools zu verwenden, mir aber nicht die gleiche Ästhetik wie den Design-Mädels gegeben. Das ist einer der Gründe, warum ich mich ursprünglich für Bootstrap entschieden habe. Die Dinge, die ich gemacht habe, können vor Mädchen zumindest cool aussehen, aber nach langer Zeit werde ich Bootstrap unweigerlich so schön finden, dass es die Leute irritiert. Aber zum Glück wird es bei jeder Version große Änderungen geben, und das wird nicht der Fall sein Die Leute haben das Gefühl, dass ich es geschafft habe. Die Website wird mit vielen Websites kollidieren. Die Verwendung von Bootstrap ist so einfach (dies liegt möglicherweise daran, dass der Bootstrap-Autor unzählige Belagerungen gelesen und deren Schmerzen verstanden hat), dass selbst ein kleines Frontend schnell und fast ohne Lernkosten gestartet werden kann.
Offizielle Website: http://getbootstrap.com/
Github: https://github.com/twbs/bootstrap/
Zusammenfassung: Der größte Vorteil von Bootstrap ist, dass es sehr beliebt ist Viele Menschen helfen Ihnen bei der Lösung von Problemen, was bedeutet, dass es sich um ein leistungsstarkes Tool handelt und die Benutzeroberfläche relativ harmonisch und einfach zu bedienen ist. Kinder, die darauf achten, sollten feststellen, dass die neueste Version 4 auch FlexBox unterstützt Layout, was ein sehr gutes Upgrade-Erlebnis darstellt. Der Nachteil ist, dass die Klassenbenennung nicht semantisch genug ist und verschiedene Abkürzungen aufweist. Daher habe ich vor kurzem damit begonnen, eine Hybrid-APP zu erstellen. Allerdings habe ich nie darauf geachtet Als ich am PC arbeitete und dann anfing, an Hybrid-Rechtsklick-Attributen zu arbeiten, überkam mich sofort eine kühle Brise, sodass ich mich für ein anderes Framework entscheiden musste.
AUI
Das dritte ist AUI, das erst kürzlich aufgetaucht ist. Obwohl der Autor behauptet, dass es sich um ein UI-Framework handelt, das speziell für APICloud-Entwickler entwickelt wurde, löst es tatsächlich viele häufige Probleme in der mobilen Front-End-Entwicklung und ist hauptsächlich für CSS-Framework für Hybridentwicklung. Es scheint, dass der Autor ziemlich aggressiv ist und überall verschiedene erweiterte CSS3s verwendet, weshalb ich die Kompatibilität dieser CSS3s überprüfen muss. Um den Erwartungen gerecht zu werden, habe ich mich für Eigenschaften mit guter Kompatibilität entschieden und von meinen Vorgesetzten einige gute Dinge gelernt. Das Framework bietet auch Komponenten wie Chat-Schnittstellen und Zähllisten, die viele komplexe Probleme gelöst haben, die mich zum Fluchen brachten. Das Layout kann nun übernommen und direkt verwendet werden.
Github: https://github.com/liulangnan/aui
Offizielle Website: http://www.auicss.com/
Zusammenfassung: Ein Vorteil dieses Frameworks ist für mich, dass es ein reines CSS-Framework ist. Ich habe es verwendet, bevor ich Pure verwendet habe, und ich verfüge über einige JS-Kenntnisse. Wenn es sich nicht um einen komplizierten Effekt handelt, kann ich einfach ein reines CSS-Framework finden und es unter Berücksichtigung der Effizienz selbst ändern , Qualität und Effizienz, deshalb habe ich mich trotzdem für dieses CSS-Framework entschieden. Eine Sache, mit der ich unzufrieden bin, ist, dass die Dokumentation dieses Frameworks wirklich gut ist und als überlegen gilt.
Amaze UI
Das zweite, das ich vorgestellt habe, ist Amaze UI, weil ich eine Designerin getroffen habe, die es liebt, von Details besessen zu sein, und das Ergebnis war Tausende wert BOOS lobte sie, also musste ich das Problem basierend auf ihren Ideen lösen und fand schließlich das Amaze UI-Framework (es macht mir nichts aus, wenn Sie mich als faul bezeichnen). -Screen-Frontend-Framework, das auf Community-Open-Source-Projekten basiert, von kleinen Bildschirmen bis hin zu großen Bildschirmen, wir werden uns schließlich an alle Bildschirme anpassen und uns an den Trend des mobilen Internets anpassen. Aber eigentlich gefällt es mir einfach, die bildschirmübergreifenden Anpassungs- und Kompatibilitätsprobleme heimischer Browser zu lösen.
Offizielle Website: http://amazeui.org/
Github: https://github.com/amazeui/amazeui
Zusammenfassung: Amaze UI fügt im Allgemeinen weitere Elemente hinzu, die den Merkmalen des chinesischen Marktes entsprechen. und das Framework ist Bildschirmübergreifend und Anpassung wurden relativ gut gehandhabt und eine Reihe häufig verwendeter Webkomponenten vorbereitet, was einen großen Beitrag zur Reduzierung der Arbeitszeit von Überstundenarbeitern geleistet hat, die an der Kompatibilität und Anpassung verschiedener Tastaturen arbeiten . Das Framework ist auch für den chinesischen Schriftsatz optimiert, mit Chinas Mainstream-Browsern kompatibel, leichtgewichtig, nicht nur für Desktops, sondern auch besser für mobile Endgeräte geeignet und enthält einige gepackte Widgets. Aber seitdem habe ich das Gefühl, dass die Amaze-UI-Dokumentation etwas zu viel ist, wie zum Beispiel „Die Leute kümmern sich nicht um den Datenverkehr von jQuery, aber ich werde es nie sagen.“ haha), Es gibt nicht viele herausragende Punkte im Code und Design.
Eingefrorene Benutzeroberfläche
Vor einiger Zeit habe ich gesehen, dass QQ plötzlich leistungsfähiger wurde. Später habe ich mich umgehört und herausgefunden, dass der QQ-Kundendienst auch eine Hybridentwicklung verwendet. Unter anderem verwendet das QQ-Mitglieder-Frontend die Frozen-Benutzeroberfläche Quelle. Ich bin so froh, dass ich es nicht ertragen kann. Bei meiner ersten Erfahrung hatte ich das Gefühl, dass der grundlegende Stileffekt einfach und die Farben erfrischend sind die Bestandteile sind relativ reichhaltig.
Github: https://github.com/frozenui/frozenui
Offizielle Website: http://frozenui.github.io/
Zusammenfassung: Es wäre cool, wenn Sie Frozen UI mit etwas wie APICloud verwenden würden, um eine zu erstellen Hybrid-APP Oder verwenden Sie die nativen Truthähne zum Einbetten in die Anwendung für die Front-End-Entwicklung. Dieses Framework ist mit Android 2.3+ und iOS 4.0+ kompatibel, oder es ist auch eine ausgezeichnete Wahl für die Verwendung als Web-App UI-Ebene Sie können sehen, dass es im Frontend der QQ-Mitglieder geboren wurde.
Frozen UI
Das dritte ist Frozen UI. Ich habe gesehen, dass QQ eine Zeit lang sofort beliebter wurde, und dann habe ich herumgefragt und herausgefunden, dass der QQ-Kundendienst auch HTML-Hybridentwicklung verwendet und die QQ-Mitgliederfront. Da das Ende Frozen UI verwendet, war ich überglücklich und konnte die Einsamkeit in meinem Herzen nicht ertragen. Ich habe es einfach dreimal, fünfmal und zweimal ausprobiert Die Erfahrung machte, dass der grundlegende Stileffekt einfach und die Farben erfrischend waren. Es gab eine relativ aktive Community. Welche Komponenten sind also auch relativ reichlich vorhanden?
Github: https://github.com/frozenui/frozenui
Offizielle Website: http://frozenui.github.io/
Zusammenfassung: Es wäre cool, wenn Sie Frozen UI mit etwas wie APICloud verwenden würden, um eine zu erstellen Hybrid-APP Oder verwenden Sie native Truthähne, um Anwendungen für die Front-End-Entwicklung zu verschachteln. Dieses Framework ist mit Android 2.3+ und iOS 4.0+ kompatibel und kann auch zum Erstellen von Web-Apps verwendet werden Das geeignetere WeUI-Framework ist die erste Wahl in WeChat. Die Nachteile sind auf der UI-Ebene zu erkennen. Wer hat es auf der Front-End-Ebene von QQ-Mitgliedern geboren?
WeUIi
Der vierte Punkt ist, dass WeUI und FrozenUI beide einem spezialisierteren Framework ähneln als WeUI. Alle Fragen und Antworten werden in GitHub beantwortet. Es ist unnötig zu erwähnen, dass es nur etwa 7 Module gibt. Der Ruf ist jedoch ausreichend um den Stern zu sehen. Das Framework wurde am 16.01.23 gestartet. Seit der Veröffentlichung hat der Github-Stern 7K überschritten, aber es schließt nicht aus, dass Benutzer keinen Platz zum Auslassen haben, also gehen sie alle zu Git, haha.
Github: https://github.com/weui/weui
DEMO: http://weui.github.io/weui/
Zusammenfassung: Selbstverständlich nach der Lektüre dieser vom WeChat-Designteam entworfenen DEMO-Reihe ein Wort Was wäre, wenn Sie ein WeChat-Publikum sein möchten, dies muss Ihre erste Wahl sein. Kurz gesagt besteht der Nachteil des Frameworks darin, dass das Framework selbst wahrscheinlich nicht in Betracht gezogen hat, Benutzern die Verwendung in Nicht-WeChat-Szenarien zu erlauben.
SUI
„SUI ist eine Front-End-Komponentenbibliothek, die auf Bootstrap basiert. Es handelt sich auch um eine Reihe von Designspezifikationen. Mit SUI können Sie ganz einfach schöne Seiten entwerfen und implementieren.“ Natürlich ist es besser, die langweilige offizielle Werbung direkt zu zitieren, um Ihre eigenen Gehirnzellen zu retten (囧...). Wenn Sie Bootstrap zuvor verwendet haben, können Sie dies natürlich problemlos tun sei das, was Taobao den Front-End-Verlierern gibt. .
Github: https://github.com/sdc-alibaba/sui
Offizielle Website: http://sui.taobao.org/sui/docs/index.html
Stern: 120
AUI
Das sechste ist AUI, das erst kürzlich auf den Markt kam. Obwohl der Autor behauptet, dass es sich um ein UI-Framework handelt, das speziell für APICloud-Entwickler entwickelt wurde, löst es tatsächlich viele häufige Probleme in der mobilen Front-End-Entwicklung . CSS-Framework. Es scheint also, dass der Autor ziemlich weit verbreitet ist und überall verschiedene erweiterte CSS3s verwendet, was mich auch dazu zwingt, die Kompatibilität dieser CSS3s zu überprüfen. Um den Erwartungen gerecht zu werden, habe ich mich für Eigenschaften mit guter Kompatibilität entschieden und von meinen Vorgesetzten einige gute Dinge gelernt. Das Framework bietet auch Komponenten wie Chat-Schnittstellen und Zähllisten, die viele komplexe Probleme gelöst haben, die mich zum Fluchen brachten. Das Layout kann nun übernommen und direkt verwendet werden.
Github: https://github.com/liulangnan/aui
Offizielle Website: http://www.auicss.com/
Zusammenfassung: Ein Vorteil dieses Frameworks ist für mich, dass es ein reines CSS-Framework ist. Ich habe es verwendet, bevor ich Pure verwendet habe, und ich habe einige JS-Kenntnisse. Wenn es kein komplizierter Effekt ist, kann ich ein reines CSS-Framework finden und es nach Belieben ändern, um den Effekt zu erzielen. Effizienz, Qualität und Effizienz Nachdem ich darüber nachgedacht hatte, entschied ich mich für dieses CSS-Framework. Womit ich immer unzufrieden war, ist, dass die Dokumentation dieses Frameworks wirklich gut ist und angeblich überlegen ist.
MUI
Früher habe ich das Android-System verwendet, aber dann habe ich IOS gesehen und mich jedes Mal darin verliebt. Ich weiß nicht, warum es mir jedes Mal so gut gefällt, weil es mir an Design mangelt Ich habe das IOS-System nachgeahmt, um die Benutzeroberfläche zu erstellen, aber ich konnte es immer nicht sehr gut machen, also habe ich zufällig das MUI-Framework entdeckt. Was mich an diesem Framework gereizt hat, ist, dass seine Benutzeroberfläche hauptsächlich mit IOS entworfen wurde ergänzt den einzigartigen UI-Stil von Android. Und MUI gibt offiziell an, für die Entwicklung verwendet zu werden. Nach eingehender Entwicklung stellten wir fest, dass die Verwendung als APP auch die Sprachkompetenz des Benutzers verbessern kann, und versuchten dann eine Zeit lang, es besser zu verstehen und zu verwenden.
Offizielle Website: http://dev.dcloud.net.cn/mui/
Github: https://github.com/dcloudio/mui
Zusammenfassung: Wie bereits erwähnt, basiert dieses Framework auf zwei Hauptsystemen UI-Komponenten durch Referenz zu kapseln, das Framework selbst hat auch eine relativ aktive Community. Der nicht so gute Teil ist auch ein Punkt, der mir besonders Sorgen bereitet. Ich weiß sicherlich, dass dies der aktuelle Nachteil ist von H5, aber nachdem ich die offizielle Website gesehen habe, versuche ich es immer noch mit Erwartung, um zu sehen, ob es verbessert werden kann. Es muss jedoch tatsächlich noch mit Hilfe von Webview verbessert werden, nicht mit dem Framework selbst.
Semantic UI
Das drittletzte ist Semantic UI, mit dem ich durch Bootstrap in Kontakt gekommen bin. Sobald Semantic UI auf Github gestartet wurde, erregte es die Aufmerksamkeit einer großen Anzahl von Entwicklern Viele Leute vergleichen die beiden mit verschiedenen Kritiken und Lob. Man kann nicht einfach den Finger heben und anfangen, es zu mögen, nachdem man es verwendet hat. Ich habe das Gefühl, dass sich die Benutzeroberfläche nicht wesentlich von Bootstrap unterscheidet. Aber die Standards für die Benennung des Codes sind sehr unterschiedlich. Wenn Sie etwas anderes tun möchten, ist die Benennung sehr unterschiedlich Sie müssen darauf achten, dass der Name der Klasse, die Sie erweitern oder hinzufügen, mit ihrem Klassennamen in Konflikt steht.
Offizielle Website: http://www.semantic-ui.cn/
Github: https://github.com/semantic-org/semantic-ui/
Foundation
Foundation gilt als Veteran in In der Framework-Branche heißt es, dass Frameworks schon früh auf den Markt kamen, und dieses Framework ist auch heute noch sehr beliebt. Wenn Sie sich mehr Sorgen über die Umständlichkeit der Bootstrap-Entwicklung machen, können Sie die Verwendung von Foundation in Betracht ziehen. Selbst wenn Sie vordefinierte UI-Elemente verwenden, wird es anderen Websites nicht zu ähnlich sein, genau wie der Beamte sagte, um Entwicklern ein flexibleres Framework-Erlebnis zu bieten.
Offizielle Website: http://foundation.zurb.com/
Github: https://github.com/zurb/foundation-sites
UiKit
UIkit wurde vom YOOtheme-Team entwickelt und wird in verwendet Viele WordPress-Themes Es gibt Anwendungen (das heißt, wenn Sie ein WordPress-Enthusiast sind, sollte dieses Framework besser zum Vertiefen geeignet sein), und das Framework kann über den GUI-Editor und manuell bearbeitet werden, sodass es eine flexible und leistungsstarke Anpassung bietet Mechanismus. Das Framework integriert die einzigartigen Funktionen der Open-Source-Projekte LESS, jQuery, normalize.css und FontAwesome in ein so leichtes und modulares Front-End-Framework.
Offizielle Website: http://www.getuikit.com/
Github: https://github.com/uikit/uikit
Pure
Endlich das Letzte, ich bin genauso glücklich wie du ( ～ ￣▽￣)~) Ich bin mit diesem Framework in Berührung gekommen, als ich an einem Managementsystem gearbeitet habe. Ich habe mich dafür entschieden, es zu verwenden, da es sich um reines CSS handelt, ohne dass es zu viel Aufwand erfordert leicht mit anderen Frameworks kombinierbar.
Offizielle Website: http://purecss.io/
Github: https://github.com/yahoo/pure/
Empfohlenes Tutorial: „HTML-Video-Tutorial“
Das obige ist der detaillierte Inhalt vonWas sind die Front-End-Frameworks von HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
