Das CSS Grid Layout gegen CSS -Frameworks -Debatte

Kernpunkte

• CSS -Gitterlayout und CSS -Frameworks wie Bootstrap werden in der Webentwicklung unterschiedlich verwendet. Mit CSS-Gittern können Entwickler komplexe Seitenlayouts mit dem nativen CSS-Code erstellen, während Bootstrap vorgefertigte Komponenten zum schnellen und effizienten Erstellen von Webseiten bietet.
• Während CSS-Mesh Flexibilität und Unabhängigkeit bietet, bleibt Bootstrap in der Front-End-Entwicklung mit seinen vorgefertigten Komponenten, einer einfachen Anpassung und der Praktikabilität als Prototyp-Tool relevant. Es ist besonders nützlich für Entwickler von Legacy -Websites, die mit Bootstrap erstellt wurden.
• Die Auswahl des CSS -Gitterlayouts und des CSS -Frameworks hängt von den spezifischen Anforderungen des Projekts ab. CSS-Mesh ist ideal für komplexe Mesh-basierte Designs, und Bootstrap spart Zeit und Anstrengung mit vorgestalteten Komponenten und Stilen. Sie können auch zusammen verwendet werden, um beide Werkzeuge zu nutzen.

Codierung von Weblayouts ist mit Hilfe von CSS-Standards wie CSS-Gitterlayouts und Flexbox nicht mehr so ​​schmerzhaft. Wenn die Browser -Unterstützung für Gitter und Flexbox ziemlich gut ist, stellt sich unweigerlich eine Frage: Warum sollte ich in meiner Entwicklungsarbeit in Betracht ziehen, CSS -Frameworks zu lernen und zu verwenden?

In diesem Artikel werde ich mich auf Bootstrap konzentrieren, da dies wohl die beliebteste aller verfügbaren CSS -UI -Bibliotheken ist.

Meiner Meinung nach gibt es noch heute noch viele Gründe, Bootstrap zu lernen und zu verwenden.

Folgendes sind einige Gründe.

Was ist ein CSS -Netz?

Rachel Andrew (ein Sprecher und Schriftsteller, der in CSS Grid verwandt ist) definiert es wie folgt:

Grid ist ein Netzsystem. Sie können Spalten und Zeilen in CSS definieren, ohne sie in Tags zu definieren. Sie brauchen kein Werkzeug, damit Sie es wie ein Netz aussehen lassen, Sie haben tatsächlich ein Raster!

Die Implementierung dieses CSS-Standards bietet Entwicklern die dringend benötigte Fähigkeit, Seitenlayouts mit dem nativen CSS-Code zu erstellen, der nicht auf HTML-Tags beruht, außer als ein Wrapper-Element, das ein Raster enthält. Stellen Sie sich das Flexibilität und das Kreativitätspotential im Webdesign vor!

Zum Beispiel benötigen Sie im Tag keine benutzerdefinierte Klasse oder zusätzliche Zeile, um dieses einfache Layout zu erstellen:

HTML -Code lautet wie folgt:

<code class="language-html"><div class="grid">
  <header>页眉内容</header>
  <main>主要内容</main>
  <aside>侧边栏</aside>
  <footer>页脚</footer>
</div></code>

Was CSS betrifft, erstellen Sie hier Ihr visuelles Layout. In diesem einfachen Beispiel werden nur wenige Codezeilen benötigt:

<code class="language-css">.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 150px 50px;
}

header, footer {
  grid-column: span 12;
}

main {
  grid-column: span 8;
}

aside {
  grid-column: span 4;
}</code>

Das ist es, du bist fertig! Nicht schlecht.

Was ist Bootstrap?

Zum Zeitpunkt des Schreibens nutzen 3,6% des gesamten Internets Bootstrap:

Auf der Bootstrap -Website finden Sie die folgenden Definitionen:

Bootstrap ist ein Open -Source -Toolkit, das mit HTML, CSS und JS entwickelt wurde. Verwenden Sie unsere SASS-Variablen und Mixins, ein reaktionsschnelles Netzsystem, eine große Anzahl vorgefertigter Komponenten und leistungsstarke JQuery-basierte Plug-Ins, um Ihre Ideen schnell zu prototypisieren oder Ihre gesamte Anwendung zu erstellen.

Mit anderen Worten, Bootstrap bietet fertige Komponenten, mit denen Sie in kürzester Zeit wunderschöne Webseiten erstellen können.

Schreiben Sie einfach das entsprechende Tag und Ihre Anwendung sieht sofort gut aus.

Bootstrap macht es auch sehr einfach, das Erscheinungsbild und den Stil anzupassen, und ermöglicht es Ihnen, die gewünschten Komponenten für Ihr Projekt auszuwählen und auszuwählen.

Warum müssen Sie noch Bootstrap verwenden, wenn Sie ein Netz haben?

Die größte Beschwerde über Bootstrap war schon immer Code -Bloat. Der Grund dafür ist, dass es zusätzlichen CSS -Code enthält, der in vielen Projekten nicht verwendet wird. Die zweitgrößte Beschwerde ist, dass der Stil der Bootstrap -Komponente sehr detailliert ist, was bei Überschreiben bestimmter CSS -Regeln einige Probleme verursachen kann.

Basierend auf der neuesten Version dieser beliebten Front-End-Komponentenbibliothek ist keine dieser Kritikpunkte haltbar: Bootstrap ist vollständig modular, sodass Sie nur die benötigten Teile einbeziehen müssen. Darüber hinaus macht es die Struktur der SASS -Datei sehr bequem, den ursprünglichen Stil an Ihre Anforderungen anzupassen.

Der Hauptgrund für den entgegengesetzten Bootstrap ist, dass CSS die Verwendung von CSS -Mesh über ein eigenes Netzsystem verfügt, das keine externen Abhängigkeiten hat. Sobald es gelernt ist, können Entwickler leicht verschiedene Layouts erstellen.

Während ich ein Fan von CSS-Netz bin, denke ich, dass Bootstrap noch einen Platz in der Front-End-Entwicklung hat und für einige Zeit noch so sein wird.

Folgende sind mindestens drei Gründe.

Bootstrap ist nicht nur sein Gittersystem

Ja, der Hauptgrund für die Verwendung von Bootstrap ist das bequeme Gittersystem, mit dem reaktionsschnelle Webseiten ein Kinderspiel machen. Bootstrap verfügt jedoch auch über einige großartige Komponenten, wie die vielseitige neue Kartenkomponente, mit der Sie verschiedene Arten von Inhalten wie Text, Bildern und Videos sowie eine reaktionsschnelle Navigationsleiste nicht in der Box anzeigen können. Für die meisten Komponenten können Sie auch Ihr bevorzugtes voreingestellter Farbschema auswählen.

Was ist mit vielen dieser Komponenten? Mit Bootstrap schreiben Sie dynamische Tooltips, Karussells oder Dropdown-Tasten einfach das entsprechende Markup. Wenn Ihre JavaScript -Fähigkeiten nicht Ihr starker Punkt sind, können Sie diese Komponenten trotzdem nutzen, ohne eine einzige Zeile von JavaScript -Code zu schreiben.

Außerdem können Sie, wenn Sie kein CSS -Experte sind, die Leistung von Bootstrap für Webdesigns während des Erlernens der Techniken weiterhin nutzen.

Bootstrap ist ein großartiges Prototyp -Tool

Manchmal müssen Sie dem Kunden nur einen verfügbaren Prototyp zur Verfügung stellen. Mit Bootstrap ermöglicht es Ihnen, dies sofort zu tun, und benötigt wenig benutzerdefinierte Code. Dies gilt nicht nur für Gittersysteme, sondern auch für alle von ihnen bereitgestellten Komponenten.

Fügen Sie einfach eine kleine Anzahl von Markierungen hinzu und Ihr Prototyp hat eine stilvolle Reaktionsnavigationsleiste oder eine schöne Alarmbox.

Verarbeitung von Legacy -Websites, die mit Bootstrap

erstellt wurden

Eine häufige Aufgabe für Entwickler ist es, mit vorhandenen Websites zu behandeln, die von anderen Entwicklern verfasst wurden. Es ist unbestreitbar, dass eine große Anzahl von Websites auf Bootstrap angewiesen ist, um ihre Frontendungen zu erstellen. Wenn Sie die Codebasis neu aufrüsten und pflegen müssen, ist es sehr bequem zu wissen, wie das Framework verwendet wird. Es ist nicht zufällig, dass viele Jobinformationen Bootstrap in der Liste der erforderlichen Fähigkeiten enthalten.

Schlussfolgerung

Insgesamt wird Bootstrap kurzfristig nicht verschwinden. Die neueste Version wurde aus früheren Versionen erheblich verbessert, von clever Sass Mixin und Mapping zur einfachen Anpassung bis hin zur Einführung neuer Komponenten, Versorgungsklassen und modularerer Architekturen.

In Kombination mit hervorragender Dokumentation und Benutzerfreundlichkeit bleibt Bootstrap ein starker Konkurrent im Front-End-Ökosystem.

Was denkst du? Wird Ihr nächstes Projekt mit Bootstrap oder CSS -Gitter erstellt?

Wenn Sie von Bootstrap gehört haben, aber das Lernen verzögert haben, weil es zu kompliziert aussieht, lernen Sie unseren Bootstrap 4 Einführungskurs, um schnell und einfach über die Kraft des Bootstrap zu erfahren.

FAQs über CSS -Gitterlayout und CSS -Frameworks

Was sind die Hauptunterschiede zwischen dem CSS -Netzlayout und dem CSS -Frameworks?

CSS -Gitterlayout und CSS -Frameworks wie Bootstrap sind leistungsstarke Webdesign -Tools, aber sie haben unterschiedliche Zwecke. CSS Grid Layout ist ein CSS -Modul, mit dem Sie komplexe Weblayouts mit Zeilen und Spalten erstellen können. Es ist eine native Funktion von CSS, was bedeutet, dass keine zusätzlichen Bibliotheken oder Plugins erforderlich sind. Andererseits ist das CSS-Framework eine vorbereitete Bibliothek, die den Prozess des Webdesigns vereinfacht. Sie sind mit vorgezogenen Komponenten wie Schaltflächen, Formularen und Navigationsstangen geliefert, die leicht angepasst und wiederverwendet werden können.

Ist das CSS -Gitterlayout besser als CSS -Frameworks?

ob das CSS -Gitterlayout "besser" als das CSS -Framework ist, hängt von den spezifischen Anforderungen des Projekts ab. Das CSS-Grid-Layout bietet mehr Flexibilität und Steuerung über das Weblayout und macht es zu einer hervorragenden Wahl für komplexe Gitterbasis-Designs. CSS-Frameworks wie Bootstrap können Ihnen jedoch Zeit und Mühe sparen, indem Sie vorab gestaltete Komponenten und Stile bereitstellen. Wenn Sie an einem großen Projekt arbeiten oder schnell eine Website starten müssen, ist ein CSS -Framework möglicherweise eine bessere Wahl.

CSS -Gitterlayout und CSS -Framework können gemeinsam verwendet werden?

Ja, CSS -Gitterlayout und CSS -Framework können zusammen verwendet werden. Tatsächlich verwenden viele Entwickler CSS -Netzlayouts, um das Gesamtlayout von Webseiten zu erstellen und dann das CSS -Framework zu erstellen, um einzelne Komponenten auf diesen Seiten zu erstellen. Mit diesem Ansatz können Sie beide Tools nutzen.

Was sind einige Alternativen zum CSS -Rasterlayout und zum CSS -Frameworks?

Es gibt viele Alternativen zum CSS -Rasterlayout und zum CSS -Frameworks. Einige beliebte Alternativen zu CSS-Gitterlayouts umfassen Flexbox- und CSS-Multi-Säulen-Layouts. Dies sind auch native CSS -Module, die die Erstellung flexibler Layouts ermöglichen. Einige beliebte Alternativen zum CSS -Framework sind Foundation, Bulma und Rückenwind -CSS. Dies sind andere CSS -Frameworks, die unterschiedliche Funktionen und Stile bieten.

Wie wählen Sie zwischen einem CSS -Gitterlayout und einem CSS -Framework?

Wenn Sie sich zwischen einem CSS -Netzlayout und einem CSS -Framework auswählen, berücksichtigen Sie die Bedürfnisse des Projekts sowie Ihre Fähigkeiten und Vorlieben als Entwickler. Wenn Sie viel Kontrolle über das Layout benötigen und CSS bevorzugen, bevorzugen Sie möglicherweise das CSS -Gitterlayout. Wenn Sie vorentwickelte Komponenten bevorzugen und schnell eine Website starten möchten, ist ein CSS-Framework möglicherweise eine bessere Option.

Ist Bootstrap ein CSS -Framework?

Ja, Bootstrap ist ein CSS -Framework. Es ist eines der beliebtesten CSS-Frameworks, die heute für sein reaktionsschnelles Design, die vorgezeichneten Komponenten und eine breite Palette von Dokumentationen bekannt sind.

Was sind einige der Vorteile der Verwendung von CSS -Netzlayout?

CSS Grid Layout bietet einige Vorteile. Es ermöglicht es, komplexe Layouts mit Zeilen und Spalten zu erstellen. Es handelt sich um eine native Funktion von CSS. Dies bedeutet, dass keine zusätzlichen Bibliotheken oder Plugins erforderlich sind und viel Flexibilität und Steuerung über das Weblayout bietet.

Was sind einige der Vorteile der Verwendung von CSS -Frameworks?

CSS Framework bietet einige Vorteile. Sie können Ihnen Zeit und Mühe ersparen, indem sie vorgefertigte Komponenten und Stile bereitstellen. Sie werden häufig von der Entwicklergemeinschaft gut dokumentiert und unterstützt.

Wie kann man mit CSS Grid Layout beginnen?

Um mit CSS Grid Layout zu beginnen, müssen Sie die Grundlagen von HTML und CSS verstehen. Von dort aus können Sie über Online -Tutorials, Dokumentation und Praktiken mehr über das CSS -Grid -Layout erfahren.

Wie kann man mit CSS -Frameworks beginnen?

Um mit dem CSS -Framework zu beginnen, müssen Sie auch die Grundlagen von HTML und CSS verstehen. Von dort aus können Sie ein CSS -Framework auswählen, das Ihren Anforderungen entspricht, es herunterladen und seine Dokumentation und Funktionen erkundet.

Das obige ist der detaillierte Inhalt vonDas CSS Grid Layout gegen CSS -Frameworks -Debatte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!