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:

<div class="grid">
  <header>頁(yè)眉內(nèi)容</header>
  <main>主要內(nèi)容</main>
  <aside>側(cè)邊欄</aside>
  <footer>頁(yè)腳</footer>
</div>

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

.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;
}

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!