So erstellen Sie eine schlanke und einfache Website mit Bootstrap 4: 7 Schritte

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:17

Der Zweck dieses Instructable ist es, denjenigen, die mit der Programmierung - HTML oder anders - vertraut sind, eine einfache Einführung in die Erstellung eines Online-Portfolios mit Bootstrap 4 zu geben. Ich werde Sie durch die Ersteinrichtung der Website führen und einige verschiedene Inhaltsblöcke erstellen, und einige Probleme, auf die Sie stoßen könnten.

Das Portfolio ist in mehrere kleinere Schritte unterteilt, um es übersichtlicher zu machen: HTML-Frame, CSS-Frame, Javascript-Frame, Navigationsleiste und die Startseite (mit Inhaltsblöcken).

Wenn Sie meine Erklärungen für etwas immer noch verwirrt haben, können Sie gerne einen Kommentar mit Ihren Fragen und Vorschlägen hinterlassen oder das Element googeln, das Sie verwirrt. Es gibt viele Ressourcen zum Programmieren von Websites und Bootstrap.

Hinweis: Diese Anleitung ist nicht allumfassend und sollte nicht als Ersatz für das Erlernen der Programmierung in HTML, CSS oder Javascript verwendet werden.

Benötigte Ressourcen

• Bootstrap 4
• jQuery 3.3.1

Optionale Ressourcen

• SchriftartAwesome
• Google-Schriften
• Highlight.js

Wenn Sie zum vollständigen Beispiel springen oder sich das Repository ansehen möchten:

• Vollständiges Beispiel
• Repository

Hinweis: Ich werde Sublime in den Bildern für meine Beispiele verwenden, wenn Sie mit demselben Texteditor folgen möchten.

Schritt 1: Einrichten

Ordnereinrichtung

1. Erstellen Sie irgendwo einen Ordner, in dem Sie alles speichern können, was wir herunterladen werden. Dies ist Ihr Stammverzeichnis für das Portfolio.
2. Erstellen Sie einen Ordner mit dem Namen "Bootstrap"
3. Erstellen Sie einen weiteren Ordner in Ihrem Stammportfolioordner mit dem Namen "jquery".

Portfolio-Ordner

|----- Bootstrap |----- jquery

Bootstrap 4

1. Besuchen Sie ihre Website und klicken Sie auf die Schaltfläche "Download" unter dem Abschnitt "Compiled CSS and JS".
2. Speichern Sie die ZIP-Datei in Ihrem Ordner „Downloads“oder an einem anderen geeigneten Ort.
3. Öffnen Sie die.zip-Datei und extrahieren Sie die Ordner „css“und „js“in den Ordner „bootstrap“, den Sie zuvor erstellt haben.

jQuery

1. Besuchen Sie ihre Website und laden Sie das „uncompressed, development jQuery 3.3.1“herunter.
2. Speichern Sie diese Datei im Ordner „jquery“, den Sie zuvor erstellt haben.

Alle Frameworks stehen nun bereit, wenn wir mit der Arbeit am eigentlichen Portfolio beginnen.

Schritt 2: HTML-Frame (index.html)

Dein Name

Dieser Rahmen ist nicht übermäßig komplex, aber ich möchte die allgemeinen Zwecke des Setups erklären.

Bootstrap JS nach jQuery

Es scheint eine Art Überschneidung zwischen der Javascript-Datei von Bootstrap und der von jQuery zu geben. Ich habe nicht getestet, wie umfangreich diese Überlappung ist, aber ein Beispiel ist die Dropdown-Funktionalität, die ich in der Navigationsleiste verwende. Wenn Sie zuerst Bootstrap laden, funktioniert die Dropdown-Schaltfläche nicht.

SchriftartAwesome

Wenn Sie bereits an Webentwicklung gearbeitet haben, wissen Sie wahrscheinlich, was FontAwesome ist. Wenn dies jedoch nicht der Fall ist, handelt es sich um ein Symbolset, das ein Toolkit für zusätzliche Anpassungen enthält. Es ist unglaublich nützlich, wenn man wie ich ist und überhaupt kein künstlerisches Talent hat.

Highlight.js

Dieses Framework ermöglicht dynamisches Code-Highlighting auf Webseiten. Sie können es wie den Rest der von mir verwendeten Frameworks importieren, wenn Sie nur gängige Programmiersprachen verwenden, aber es gibt auch die Möglichkeit, einen benutzerdefinierten Satz von Sprachen herunterzuladen. Ich habe mich aufgrund einiger Makro- und Ini-Sprachen für die letztere Option entschieden, aber es liegt ganz bei Ihnen.

Hinweis: Beachten Sie die Stellen, an denen ich hartcodierte Links zu Dateien wie den beiden Symbolen und Highlight.js verwende. Da nur Bootstrap und jQuery erforderlich sind, können Sie auch andere Frameworks hinzufügen oder entfernen. Wenn Sie einen entfernen, denken Sie daran, die entsprechenden Codezeilen später zu entfernen.

Schritt 3: CSS-Frame (style.css)

/* * Das Abschwächen der bg-Farbe auf Grau und das Ändern des Schriftstils erleichtert hoffentlich die Nutzung der Website */ body { background: grey; Schriftfamilie: 'Open Sans', serifenlos; }

/*

* Dadurch wird sichergestellt, dass die Navigationsleiste über allem steht */ nav { z-index: 9999; }

/*

* Dies sollte den Absatztext lesbarer machen */ p { font-size: 18px; Rand oben: 5px; Rand-unten: 5px; }

/*

* Dies stellt sicher, dass alle meine Codeblöcke korrekt formatiert sind */ code { text-align: left; }

/*

* Ich möchte nicht, dass Listen die Aufzählungszeichen enthalten */ li { list-style-type: none; }

/*

* Links sind standardmäßig blau, und ich möchte, dass sie dem Stil von Bootstrap entsprechen */ li a, a{ color: white; }

/*

* Ich binde ein Klassen-Tag an ein div, das die Navigationsleiste enthält, um sicherzustellen, dass sich der Inhalt nicht überlappt */.navFix { padding-bottom: 70px; }

/*

* Erhöhte Größe dehnt die Navigationsleiste aus */.social-media { font-size: 1.3em; }

/*

* Die Standard-Hervorhebungsfarbe für die Dropdown-Links ist weiß */.dropdown-menu a:hover { background-color: #212529; }

/*

* Erzwinge divs, die PDFs auf eine bestimmte Höhe zeigen */.pdfFill { height: 45rem; }

/*

* Fügen Sie etwas Abstand zwischen den Schaltflächen und Codeblöcken hinzu */.codeStyle { padding-top: 30px; }

Ich habe die inhaltsbasierten CSS-Elemente in diesen Frame eingefügt, um Ihnen später etwas Zeit zu sparen. Sie sind alle sehr einfach und stellen hauptsächlich Änderungen an der Lebensqualität dar, die den Lesern die Interaktion mit dem Portfolio erleichtern.

Navigations-Z-Index

Ich habe nur sehr begrenzte Erfahrung in der Webentwicklung, daher bin ich mir nicht sicher, ob dies ein häufiges Problem bei der Implementierung der Bootstrap-Navigationsleiste ist, aber ohne Angabe der Ausrichtung von vorne nach hinten wird die Navigationsleiste tatsächlich unter anderen Inhalten angezeigt, wie z Bootstrap-Karten. Am auffälligsten ist dies bei der zusammenklappbaren Navigationsleiste, aber ich habe die Indexänderung trotzdem zur Sicherheit aufgenommen.

Codeausrichtung

Da ich normalerweise die Klassen "justify-content-center" und "text-center" von Bootstrap verwende, um Elemente auszurichten, möchte ich nicht, dass mein Code diese zentrierte Natur erbt. Dies lässt sich leicht beheben, indem alle Ausrichtungsänderungen überschrieben und Code-Tags linksbündig ausgerichtet werden: Dadurch wird der Tabulatorabstand im Code beibehalten.

navFix-Polsterung

Wenn die Navigationsleiste von Bootstrap oben auf der Seite hängt, wird der Inhalt darunter geladen. Ich glaube, dies geschieht, weil die Navigationsleiste tatsächlich oben im Ansichtsfenster anstelle der Seite selbst haftet. Unabhängig davon wird dies behoben, indem der Abstand zwischen der Navigationsleiste und dem Rest des Inhalts vergrößert wird.

PDF-Höhe

Die Standardhöhe von PDF-Dateien ist unglaublich klein. Es ist im Wesentlichen unlesbar, also habe ich die Höhe geändert, um zu versuchen, genügend Platz für ungefähr eine Seite zu geben.

Schritt 4: Javascript-Frame (javascript.js)

/* * Dies sucht nach jedem Element mit der Klasse 'toggle' und blendet es entweder aus oder ein */ function toggleSection(id, toggleID) { if (document.getElementById(id)) { var divID = document.getElementById(id); var divArray = document.getElementsByClassName(toggleID);

for (var i = 0; i < divArray.length; i++) { divArray.style.display = "none"; }

divID.style.display = "blockieren";

}

falsch zurückgeben;

}

/*

* Code, der in einer bestimmten Reihenfolge ausgeführt werden muss */ $(document).ready(function() { /* * Inhalt aus Dateien laden */

/*

* Erzwinge eine kleine Verzögerung beim Laden der Daten */ setTimeout(function() { /* * Markiere den gesamten Code, der in */ $('pre code') geladen wurde.each(function(i, block) { hljs.highlightBlock(block);});}, 1000); });

Um dieses Portfolio einfach zu ändern und zu verwalten, habe ich mich für ein einseitiges Format entschieden. Es hält alles größtenteils lokal und beschleunigt das Laden von Inhalten.

toggleSection

Ich habe Klassenwerte verwendet, um zu verwalten, welche Inhalte angezeigt oder ausgeblendet werden müssen, da ich die meiste Zeit Divs verwende, um mehrere Elemente zu trennen und zu gruppieren. Sie können damit auch einzelne Schaltflächen gruppieren, es ist jedoch eine zusätzliche Überprüfung erforderlich, bevor Sie die "Block"-Anzeige einstellen, damit keine Inhalte angezeigt werden.

Dokument laden

Ich habe dies eingefügt, weil es im Allgemeinen chaotisch ist, einen Haufen unabhängiger Programmiercodes in normale HTML-Dateien einzufügen. Wir können diese Methode der dynamischen Hervorhebung verwenden, um den Vorgang zu erzwingen, nachdem wir Inhalte aus anderen Dateien geladen haben.

$('#mq2-intro').load("files/tutorials/mq2/mq2-intro/content.html");

Dies ist ein Beispiel dafür, wie wir Inhalte laden.

Schritt 5: Navigationsleiste

Initialen

• Heim
• Über mich
• Projekte-Tutorials
• Kontaktiere mich

• Die Navigationsleiste ist das komplexeste Element im Portfolio. Die schiere Kombination der Klassen macht es zu einem Puzzle, bei dem Sie ständig in das Regelbuch schauen müssen.

  Bootstrap-Funktionalität

  Bootstrap funktioniert im Wesentlichen über verschiedene Klassenwerte. Wenn man sich das "nav"-Element selbst ansieht, ist es nicht allzu schwierig, den Zweck jeder Klasse zu ermitteln:

  Unsere "Navbar" ist die "md" (mittel), "erweiterbar", "dunkle" Option. Und wir haben es "oben" "fixiert". Es sieht verwirrend aus, weil es ein Durcheinander von Bezeichnern ist, aber wenn Sie sie als Adjektive für das Element betrachten, wird es viel einfacher zu verstehen, was passiert.

  Marke

  Die Marke ist das typische Logo und der Name, den Sie auf jeder Website oben links sehen. Es ist ein bewährtes Gestaltungselement, das jeder Nutzer an dieser Stelle erwartet.

  Hinweis: Die "i"-Tags sind eigentlich die FontAwesome-Symbole, und Sie erhalten diese Tags von jeder Symbolseite.

  Umschalter/zusammenklappbare Taste (Mobil)

  Diese Schaltfläche wird nur auf Mobilgeräten angezeigt. Da wir jedoch in die "nav"-Deklaration aufgenommen haben, dass die Navigationsleiste erweiterbar sein muss, verbinden sich diese Elemente über ihre IDs und "data-toggle"-Kennungen miteinander.

  Navbar-Links (linke Seite)

  Diese Links hängen ganz davon ab, welche Kategorien Sie für Ihr Portfolio benötigen. Ich habe einige der typischen Beispiele als Ausgangspunkt aufgenommen, aber keins ist wie das andere. Möglicherweise benötigen Sie keinen Abschnitt "Tutorials", da Sie sich auf die Herstellung von Kunstskulpturen konzentrieren. Jedes "li"-Element kann kopiert und eingefügt werden. Sobald Sie also herausgefunden haben, was Sie brauchen, ist es einfach, die Navigation einzurichten.

  Hinweis: Sie können technisch Dropdown-Menüs in anderen Dropdown-Menüs erstellen, aber ich würde dies nicht empfehlen, es sei denn, Sie sind bereit, mehr CSS und Javascript hinzuzufügen, um die Benutzeroberfläche sauber aussehen zu lassen.

  Navbar-Links (rechte Seite)

  Indem Sie der richtigen Linkliste die Klasse "ml-auto" geben, trennt Bootstrap die beiden Listen gleichmäßig. Dadurch entsteht die saubere linke und rechte Seitenteilung. Ich habe mich entschieden, diesen Bereich für Social-Media-Links zu nutzen, da dies eine sehr verbreitete und beliebte Methode ist, um Ihre Präsenz zu erhöhen. Wenn dies nicht relevant ist, können Sie diese Links für eine Suchleiste, Anmeldeinformationen usw. entfernen. Aber denken Sie daran, dass es sich um einen wichtigen Platz handelt. Und ähnlich wie bei den Navbar-Links auf der linken Seite können Sie diese auch kopieren und einfügen.

  Hinweis: Wenn Sie die Links verwenden möchten, die ich bereits eingerichtet habe, ändern Sie den "Benutzernamen" in den tatsächlichen "href"-Links selbst.

  Schritt 6: Startseite

  

  

  

  Dein Name

  Programmierer Writer Gamer

  Dieser Abschnitt und Ihre nachfolgenden Inhaltsseiten hängen davon ab, was Sie in Ihr Portfolio aufnehmen möchten. Ich kann natürlich nicht jeden einzelnen Inhaltstyp ansprechen, aber ich habe versucht, Bilder, PDFs, Videos, Codeblöcke und einige der typischen Einschlüsse einzubinden.

  Tabellenformat

  Die Homepage ist als Tabelle eingerichtet. Ich würde mich nicht auf meine erstaunlichen Designfähigkeiten verlassen, um Ihr Endprodukt zu erstellen, aber ich habe die verschiedenen Variationen von Zeilen- und Spaltenkombinationen hinzugefügt, um zu zeigen, dass es sehr dynamisch und flexibel ist. Sie können 3 Zeilen und 2 Spalten erstellen, um links Schaltflächen und rechts Inhalt zu haben, oder Sie können etwas ganz anderes tun. Es braucht nur ein wenig Experimentieren.

  Tasten

  Diese funktionieren im Wesentlichen wie normale Schaltflächen. Die einzige echte Bootstrap-Integration ergibt sich hier aus dem Styling, das mit dem Rest des Themas übereinstimmt. Erstellen Sie andernfalls so viele oder so wenige Schaltflächen, wie Sie benötigen, um Ihre Inhalte zu präsentieren, und stellen Sie dann sicher, dass die href-Links mit den IDs für die Divs übereinstimmen.

  Inhalt des Programmiercodes

  Die "Code"-Tags sind die Standard-Tags, die Highlight.js verwendet, um die gesamte Hervorhebung zu verwalten. Wenn Sie sich an die Datei javascript.js erinnern, gibt es einen Abschnitt zum Laden von Inhalten aus anderen Dateien.

  $('#home-programmer-macro').load("files/home/watchLoot.mac");

  • Der erste Teil sucht nach der "ID" des Elements, in das Sie den Inhalt einfügen möchten.
  • Der zweite Teil ist der Speicherort der Datei, die Sie laden möchten.

  Hinweis: Der Inhalt wird nicht vollständig geladen, da die Wahrscheinlichkeit groß ist, dass Sie diese Webseite lokal statt auf einem Server bearbeiten. Dies kann auf verschiedene Arten angesprochen werden, die ich am Ende des Instructable ansprechen werde.

  YouTube-Video

  Der eingebettete "iframe" stammt eigentlich von YouTube selbst. Ich werde nicht ausführlich erklären, wie Sie sie erhalten, aber wenn Sie ein Video "Teilen" wählen, gibt es eine Option "Einbetten", die Ihnen hilft, den Code zu generieren, der zum Anzeigen Ihres Videos auf der Webseite erforderlich ist.

  Schritt 7: Nach vorne schauen

  Es ist sehr wahrscheinlich, dass ich ein Element oder einen Inhaltstyp, den Sie in Ihre Website aufnehmen möchten, nicht behandelt habe. Zum Glück gibt es viele gute Möglichkeiten, die nächsten Schritte selbst zu gehen.

  Bootstrap-Dokumentation

  Die Dokumentation von Bootstrap ist ein großartiger Ausgangspunkt, wenn Sie nach vorprogrammierten Elementen suchen und Beispiele enthalten, die Sie kopieren und in Ihr Portfolio einfügen können, um mit ihnen zu experimentieren. Ich habe Karten, Karussells oder Formulare nicht berührt. Ich empfehle Ihnen dringend, sich den Abschnitt "Komponenten" anzusehen, um die Optionen zu sehen.

  W3Schulen

  W3Schools ist eine wunderbare Website, auf der Sie so ziemlich alles lernen können, was mit Webprogrammierung und -entwicklung zu tun hat. Sie sind viel schlauer als ich und decken so ziemlich jede HTML-, CSS- und Javascript-Funktionalität ab, die Sie sich vorstellen können.

  Hosten Ihres Portfolios

  Dieses Instructable lehrt Sie, wie Sie Ihre Website auf einigen verschiedenen Plattformen hosten. Dies sind die Schritte, die Sie unternehmen müssen, wenn Sie Personen, Personalvermittlern usw. Ihr Portfolio zeigen möchten.

  Experimentieren und Spaß haben

  Die einzige Möglichkeit, ein großartiges Portfolio zu erstellen, besteht darin, zu experimentieren und alles auszuprobieren, was interessant aussieht. Viele ausgefallene Design-Portfolios und Websites verwenden großartige Übergangseffekte oder dynamische Hintergründe, aber keines davon war vorgefertigt.