Die Arbeit mit Webseiten erfordert viel mehr als nur die Kenntnis der Sprachen, die wir verwenden müssen. Es gibt eine Reihe von Meilensteinen, die wir erfüllen müssen, um ein Produkt mit einem außergewöhnlichen Ergebnis zu entwickeln. Einer dieser Meilensteine ist die Gestaltung und Anordnung der Elemente, die auf dem Bildschirm angezeigt werden.
Stellen wir uns vor, wir müssen eine Webseite entwerfen, wenn wir von vorne beginnen, müssen wir berücksichtigen, wie das Menü, die Tabellen, die Schaltflächen aussehen sollten, Dinge so einfach wie die Symbole, die wir auf einigen Aktionsschaltflächen platzieren usw.
Wie wir sehen, ist es harte Arbeit, vor allem wenn wir wollen, dass sie optimal aussieht und ansprechend ist, müssen wir auch detailliert sein, um der Site eine persönliche Note zu verleihen. Was ist, wenn wir keine Designer sind? Das ist die große Frage, es gibt Entwickler, die in Bezug auf guten Geschmack und Design ein Auge zudrücken, und diese Art von Profilen sind daran gehindert, qualitativ hochwertige Webauftritte zu erstellen. Oder wenn wir guten Geschmack haben, aber wenig Zeit zum Gestalten?
Um diese beiden großen Anforderungen zu lösen, haben wir Bootstrap was nichts anderes ist als ein CSS-Framework das erlaubt uns, das grundlegende aspekt unserer seite sofort zu erhalten, ohne mit dem design leiden zu müssen, aber abgesehen davon hilft es uns auch bei grundlegenden effekten und einer ganz besonderen art der strukturierung der inhalte, die wir präsentieren werden.
Bootstrap-VorteileDas wissen wir schon Bootstrap es ist ein CSS-Framework und das hilft uns, die grundlegenden Aspekte für unsere Website festzulegen, aber darüber hinaus hat sie bestimmte Vorteile in Bezug auf ihre Nutzung. Wir werden im Folgenden einige der positiven Dinge sehen, die sie uns bringt Bootstrap:
1. WiederverwendungMit Bootstrap Wir haben viele Komponenten standardmäßig erstellt, sodass wir sie ohne Änderungen in verschiedenen Teilen unserer Website verwenden können, wodurch die Zeit und der Umfang des von uns verwendeten Codes reduziert werden. Dies begünstigt auch die modulare Entwicklung unserer Anwendungen.
2. KonsistenzDank der Tatsache, dass wir viele Komponenten generisch erstellt haben, ist der Code konsistent, dh er behandelt sehr ähnliche Strukturen, sodass wir beim Lesen oder Warten der Anwendung bereits wissen, wie es viel einfacher funktioniert.
3. Flexibles DesignMobiles Design ist sehr wichtig und Bootstrap von Anfang an berücksichtigt, haben wir die Flexibilität, dass sich unsere Seite automatisch an verschiedene Auflösungen und Bildschirmlayouts anpasst, was uns viel Arbeit erspart, mobile Ansichten von Grund auf neu entwerfen zu müssen.
4. GemeinschaftEin weiterer zu berücksichtigender Aspekt ist die Dokumentation. Wenn wir ein Framework von Drittanbietern verwenden, ist es sehr wichtig, dass wir uns im Zweifelsfall und in diesem Sinne an wen wenden können Bootstrap Es ist nicht vergleichbar, da wir ohne großen Aufwand fast jede Antwort auf unsere Zweifel bekommen.
Nachteile von BootstrapObwohl fast alles gut ist, müssen wir auch über die Nachteile oder nicht so guten Aspekte sprechen, die uns bei der Verwendung begegnen CSS-FrameworkSehen wir uns unten einige seiner Schwächen an.
1. Kleines OriginalWenn wir uns nicht ein wenig Zeit für unser Design nehmen, können wir so wenig originell bleiben, wenn wir verwenden Bootstrap ohne mehr, obwohl dieses Framework dafür ausgelegt ist, müssen wir aufgrund der großen Akzeptanz, die es gefunden hat, ein wenig mehr arbeiten, um nicht wie die Kopie der Kopie auszusehen.
2. LernkurveWie bei allem müssen wir eine Lernkurve durchlaufen, wenn wir das Beste daraus machen wollen. Das Problem ist, dass der Schock etwas stark ist, wenn wir vom grundlegenden zum fortgeschrittenen Aspekt gelangen wollen.
3. Schlechte Kompatibilität zwischen den VersionenBei einem Versionswechsel verliert die vorherige Version stark an Gültigkeit und wenn wir aktualisieren möchten, kostet es uns, insbesondere wenn wir wichtige Änderungen vorgenommen haben, damit unsere Site anders aussieht.
InstallationSobald wir wissen, was es ist Bootstrap, und den Vor- und Nachteilen seiner Verwendung in unseren Projekten, müssen wir zum praktischen Teil des Tutorials kommen, jetzt werden wir lernen, woher wir dieses Framework bekommen und wie wir es in unser Projekt einbinden können.
Bootstrap bekommenDas erste, was wir tun müssen, ist, die erforderlichen Dateien zu beschaffen, um einzuschließen Bootstrap In unserem Projekt müssen wir daher die Website getbootstrap.com besuchen und die erforderlichen Dateien herunterladen oder alternativ a . verwenden CDN um das Hosten der Dateien auf unserem Server zu vermeiden und die Nutzung unserer Bandbreite zu reduzieren.
Unabhängig von der Option müssen wir uns auf einer Seite ähnlich der folgenden befinden, wenn wir beim Besuch der Framework-Seite auf die Schaltfläche zum ersten Herunterladen klicken:
VERGRÖSSERN
Um die Arbeit zu erleichtern, nehmen wir an, dass wir das Projekt heruntergeladen haben, es kommt in einer komprimierten Datei, die wir an einem Ort extrahieren müssen, den wir verwenden können und der ungefähr wie folgt aussehen sollte:
Wie wir sehen, muss es in unserem Projekt drei Ordner geben, einen für die CSS, ein weiteres für die verwendeten Quellen und schließlich eines für die JS notwendig. Damit haben wir bereits zur Verfügung Bootstrap, was nichts anderes ist, als das Projekt in unseren Ressourcenordner zu kopieren.
Starten Sie mit BootstrapDa wir alle Ressourcen in unserem Besitz haben, müssen wir sie in unser Design einbeziehen, dafür können wir eine Datei erstellen HTML und dort die notwendigen Einschlüsse vornehmen, können wir dies im folgenden Code genauer sehen:
Bootstrap installierenWie wir sehen, haben wir nur drei Dateien eingefügt, genauer gesagt zwei .css und ein .js, das ist es, was wir brauchen, um die gesamte Struktur zu verwenden. Wenn wir jetzt unsere Datei mit einem Browser öffnen, sehen wir, wie sich die Schriftart der Buchstaben von der unterscheidet, die wir normalerweise mit einem Etikett sehen würden H1:
Das Bootstrap-GitterUm die Organisation unserer Designs zu erreichen, Bootstrap benutze ein Gitter oder Netz, diese besteht aus 12 Spalten, also muss alles, was wir auf unserem Bildschirm sehen, auf diese Weise organisiert sein, damit wird erreicht, dass die Seite so strukturiert werden kann, dass wir die uns angebotenen Tools nutzen können auf sehr transparente Weise.
Natürlich ist es ein Anpassungsprozess, aber wichtig ist, dass wir Spalten erstellen können, die mehrere gruppieren, sowie wenn wir mit den Tabellen von . arbeiten HTML dass wir mit der span-Eigenschaft Spalten mit mehreren Joins erstellen können. Um eine Website zu erstellen, die diese Struktur verwendet, müssen wir nur Folgendes haben:
Ein Div mit der Klasse Container, darin ein div mit der klasse die Zeile, und schließlich in einem oder mehreren div mit der Klasse Kohl, sehen wir uns im folgenden Code ein Beispiel für eine Seite mit 3 Spalten an, dafür muss jede Spalte 4 gruppieren, um insgesamt 12 hinzuzufügen, was wir erklärt haben, ist der Standardwert von Bootstrap.
Spalten in BootstrapDies führt zu einer Seite, auf der sich die drei internen Divs in einer einzigen Zeile befinden, die in drei gleiche Spalten unterteilt ist, wie wir in der folgenden Abbildung sehen können:Beispiel für die Verwendung von Spalten in Bootstrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue und laoreet aliquam. Aliquam erleichtert mein in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam nur ex, Antrag auf efficitur vel, placerat sit amet purus. Cras id semper felis. Seien Sie ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue und laoreet aliquam. Aliquam erleichtert mein in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam nur ex, Antrag auf efficitur vel, placerat sit amet purus. Cras id semper felis. Seien Sie ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue und laoreet aliquam. Aliquam erleichtert mein in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Integer aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra massa. Nam nur ex, Antrag auf efficitur vel, placerat sit amet purus. Cras id semper felis. Seien Sie ac hendrerit purus. Vestibulum congue dui vel maximus convallis. Integer eu eleifend mauris.
VERGRÖSSERN
Diese Struktur ist, obwohl sie etwas quadratisch aussieht, sehr flexibel, da wir nur eine Art Spiel mit den Containern und ihren Säulen machen müssen, um die gewünschten Ergebnisse zu erzielen. Damit beenden wir dieses Tutorial, mit dem wir effektiv unsere ersten Schritte gemacht haben Bootstrap und jetzt können wir beginnen, seine Vorteile direkter in unseren Projekten oder Webanwendungen zu nutzen.
