Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Die Indexdatei anlegen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Bei den Quelldateien ist keine HTML-Seite dabei – diese müssen Sie selbst anlegen und dann gegebenenfalls die Pfadangaben anpassen.
03:18

Transkript

Mit welchen Editor Sie Ihre "Bootstrap"-Dateien bearbeiten, bleibt Ihnen überlassen. Ich verwende gerne Aptana Studio. Das ist eine open-source Entwicklungsumgebung, vor allem auch für Webprojekte. Ich habe hier auf dem Desktop meinen "Bootstrap"-Ordner liegen, und öffne jetzt Aptana, lasse die Einstellungen hier im Workspace, so wie Sie sind, und habe hier jetzt mal die Oberfläche geöffnet. Ich mag Aptana deswegen gerne, weil es einen eigenen Webserver mitbringt, das heißt, ich kann mir meine Seiten dann über den Webserver anschauen. Aber zuerst muss ich mir erst mal mein Projekt holen, das heißt, über "File" und "Import" habe ich hier die Möglichkeit, unter "General" einen bereits bestehenden Ordner als neues Projekt einzubinden. Ich klicke auf "Next", muss jetzt noch meinen Ordner suchen gehen -- der liegt auf meinem Desktop. Ich bestätige mit "OK", den Namen hier lasse ich gleich. Ich könnte hier frei einen Namen wählen; der würde nur innerhalb dieses Arbeitsbereichs gelten. Aber ich bin mit dem zufrieden, und mit "Finish" habe ich jetzt den Ordner hier eingebunden. Was bei all meinen Dateien noch fehlt, ist ein "index". Die kann ich mir erzeugen, indem ich mit der rechten Maustaste auf "New" klicke und auf "File", und hier einfach als Filename meine "index.html" eingebe. Die ist jetzt noch ziemlich jungfräulich, und für den Start hole ich mir einfach die Basisdatei von "Bootstrap". Bei der Abteilung "Los geht's!" haben Sie die Möglichkeit, sich die Basisvorlage zu holen, was ich hiermit auch tue, und ich markiere Sie mir, mit Strg + C kopiere ich Sie mir, hier in Aptana mit Strg + V hole ich mir meine "index"-Datei. Das Einzige, was ich jetzt noch tun muss, ist, dass ich beachte ob meine diversen Pfadangaben stimmen, was sie jetzt nicht tun, denn meine "index" liegt auf derselben Ebene wie die anderen prinzipiellen Dateien, und meine fertigen Dateien liegen aber hier im "dist"-Folder drin, das heißt, ich muss hier noch ergänzen, eigentlich liegt bei mir alles im Ordner "dist", da in meinem "css"-Folder und ich werde "bootstrap.min.css" verwenden. Dasselbe haben wir unten bei den JavaScript-Dateien, das heißt, auch hier ist es der Ordner "dist". Im Ordner "dist" ist es aber JavaScript und die JavaScript-Datei, die letztendlich verwendet werden wird, ist "bootstrap.min.js". Das war's. Ich speichere jetzt das Ganze, und werde es mir das erste Mal im Browser ansehen. So, dass ist es. Mehr war es für Anfang nicht. Ich habe hier meinen "Hello World", und ich habe das Ganze, wie Sie es sehen können, über den kleinen Webserver aufgerufen.

One-Page-Webseiten mit Bootstrap, LESS und Sass

Erstellen Sie eine moderne Website im One-Page-Design, die mit wenigen Dateien auskommt und mit Effekten wie Parallax Scrolling aufwartet.

2 Std. 1 min (28 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!