In diesem Beitrag beginnen wir damit, eine Website mit Bootstrap zu erstellen, das Open-Source-Framework, das es uns leicht macht, es reaktionsfähig zu machen und ihm eine gewisse Interaktivität zu verleihen. Es ist eine grundlegende Vorlage, die automatisch von einem Entwicklungsumgebungs-Plugin generiert wird, das wir zuvor empfohlen haben und das wir ändern müssen.
Bei der vorheriger Artikel Sie finden die Anweisungen zur Installation von VS Codium, zur Übersetzung der Benutzeroberfläche ins Spanische und zur Installation des Bootstrap-Plugins.
Zwei Dinge sind zu beachten:
- Die Befehle, die wir verwenden, sind Tastaturkürzel, Sie müssen sie eingeben. Kopieren/Einfügen funktioniert nicht.
- Unser Content-Manager erlaubt mir nicht, den HTML-Code anzuzeigen, daher muss ich Screenshots verwenden. Damit Sie Zugriff auf den Code der Beispiele haben, habe ich sie hochgeladen zu GitHub.
So klonen Sie ein GitHub-Repository
Was die Großen von uns unterscheidet, ist die Art und Weise, wie sie auf Probleme reagieren. Richard Stallman mochte seinen Druckertreiber nicht und da sie ihn nicht ändern ließen, startete er die Freie-Software-Bewegung. Linus Torvalds war von keiner der Codesharing-Plattformen überzeugt und gründete seine eigene. git.
Im Gegensatz zu herkömmlichen Softwareverteilungssystemen, bei denen die einzige zulässige Benutzerinteraktion das Herunterladen ist, Mit Git können Sie die Entwicklung des Projekts im Laufe der Zeit verfolgen. Andere Leute können das Repository klonen, Änderungen vornehmen und vorschlagen, dass die Entwickler des ursprünglichen Projekts sie integrieren. Wenn dies akzeptiert wird, können Entwickler dies problemlos tun, ohne die Dateien herunterladen und erneut hochladen zu müssen.
Es gibt mehrere Dienste, die auf Git basieren, ich habe mich für GitHub entschieden einfach weil es in VS Codium integriert ist.
Um die Beispieldateien auf Ihren Computer herunterzuladen, müssen Sie nur das Git-Paket installieren, indem Sie den Anweisungen Ihrer Distribution zum Installieren von Paketen im Terminal folgen.
Dann geben Sie die folgenden Befehle ein.
Ich bevorzuge es, die Dateien im Ordner Dokumente zu speichern, also ändere ich das Verzeichnis mit
cd Documentos
Dann klon ich die Dateien mit:
git clone https://github.com/dggonzalez1971/bootstrap.git
Ich werde Sie in jedem der verbleibenden Artikel an diese Schritte erinnern, da Sie auf diese Weise die Beispieldateien aktualisieren, während sie hochgeladen werden.
Um die Dateien anzuzeigen, öffnen Sie einfach den Datei-Explorer und suchen Sie nach dem Ordner Bootstrap.
Erstellen einer Website mit Bootstrap
Falls Sie es vorziehen, den Code manuell einzugeben, erstellen wir zunächst einen Ordner, in dem wir die Site speichern. Sie können einen beliebigen Namen eingeben.
Dann folgen wir den nächsten Schritten:
- Gehen wir zum Menü Archiv.
- Klicke auf Neue Textdatei.
- Klicke auf Speichern.
- Wir suchen nach dem von uns erstellten Ordner und geben den Namen der Datei ein beispiel1.html.
- Klicke auf Speichern.
Manchmal kann das Datei-Explorer-Fenster durch das VSCodium-Fenster ausgeblendet werden.
Lassen Sie die Erweiterung die grundlegende Vorlage für uns erstellen. Dazu tippen wir !b5-$
Dadurch wird der Code generiert, den Sie im Beispielordner als example1.html finden
Wir werden folgendes sehen:
Dies ist der von der Bootstrap-Erweiterung generierte Code.
Wir werden einige Änderungen an dieser Datei vornehmen. Sie finden die Modifikationen unter dem Namen example2.html
- In Zeile 2 ändern wir die Sprache, indem wir eng durch es ersetzen. Dies zeigt Suchmaschinen an, dass die Sprache der Website Spanisch ist.
- In Zeile 6 ändern wir den Text, der unter den Labels steht Titel. Wir stellen Meine erste Bootstrap-Seite.
- In Zeile 12 ändern wir den Inhalt zwischen den Tags h1 von Dies ist eine Website, die mit Bootstrap erstellt wurde.
Als nächstes werden wir einige wichtige Änderungen vornehmen. Diese Modifikationen haben zu tun mit:
- Mit Bootstrap-Versionen kann der Plugin-Entwickler nicht mithalten und es gibt aktuellere.
- Es gibt viele Optionen für Bootstrap-Komponenten und ich interessiere mich für eine andere.
- Laut offizieller Dokumentation müssen die Aufrufe der Javascript-Bibliotheken innerhalb der Body-Tags stehen.
Zum Beispiel 2 ändern wir den Inhalt von Zeile 7, löschen die Zeilen 8 und 9 und laden den verbleibenden Inhalt hoch, um die Nummerierungskompatibilität aufrechtzuerhalten. Dann klicken wir auf das Ende von Zeile 10, um eine neue Zeile 11 zu erstellen und den Link zu den Javascript-Bibliotheken zu setzen.
Machen Sie sich keine Sorgen, wenn Sie den Code nicht verstehen. Ich werde die Funktion jeder Zeile im nächsten Artikel erklären.