Bootstrap Tutorial

G

glupto

Mitglied
Hallo, bin neu hier. Ich möchte nachdem ich mir bisher eine Seite mit HTML, CSS und PHP und etwas JS erstellt habe, eine weitere mithilfe von bootstrap erstellen (mit Links zum Thema Essen, Rezepte, Restaurants). Bootstrap wird ja immer sehr gelobt und empfohlen, aber ich bin mir über manches noch im Unklaren: Ich lese da etwas von Compilieren, also muss man vor dem Hochladen auf den webServer erst noch andere Schritte machen? Kurz ich habe natürlich im Netz gesucht, aber kein wirklich gutes deutschsprachiges Tutorial gefunden. In YOutube-Tutorials zu diesem Thema wird immer nur im Überblick gezeigt, was bootstrap alles kann, aber nicht Schritt für Schritt erklärt wie und wann ich das Ganze, also meine Seite, zusammenbastele. Runtergeladen habe ich bootstrap schon, auch schon mal probehalber hochgeladen, um Beispielseiten anzuschauen, normalerweise würde ich jetzt ins HTML und CSS gehen und Details verändern, aber bei bootstrap läuft das doch anders, wenn ich es richtig verstanden habe.

Danke für Tipps oder Links zu dem Thema.

Gruß
glupto
 
Am einfachsten kaufst du dir ein HTML5-Template, welches auf Bootstrap basiert. Dieses kannst du dann nach deinem Wünschen anpassen.

Hier mal ein Beispiel, welches ich gekauft habe:
http://themeforest.net/item/porto-responsi...emplate/4106987

Auf der erwähnten Themeforest-Site findest du viele solcher Templates.

Die paar Dollars sind es wert, um mal eine gute Vorlage zu haben und das Ganze besser zu verstehen.

Gruss
Pico
 
Danke, vielleicht werde ich das Geld auch investieren, man denkt ja immer, ach das schaffe ich selbst, aber man muss es ja eh anpassen und wenn die Templates ansprechend sind,...Obwohl ich so auf Anhieb nichts zum Thema food gefunden habe, aber werde mal stöbern.

Gruß und Dank
glupto
 
Um Bootstrap zu nutzen muss man übrigens nichts kompilieren. Man kann, wenn man sein eigenes individualisiertes Bootstrap möchte, muss aber nicht.

Es reicht im Header das css einzubinden und im Footer das js (und JQuery). Alles kann man direkt ab CDN einbinden.

Im Header:
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

... und ...

<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

am Ende vor </body>.

Die offizielle Bootstrap-Seite ist eigentlich nicht so kompliziert, einfach die Dinge mit dem Kompilieren/LESS ignorieren.
 
Ja, danke für den Hinweis. (Wann sollte man die responsive Version einbinden und wann nicht. Will nicht jeder seine Seite für möglichst viele Nutzer adäquat und richtig präsentieren?). Ich finde die Seite nicht unbedingt schwierig, für eine Übersetzung anhand praktischer Beispiele wäre ich dennoch dankbar. Es gibt ein gutes Tutorial auf Deutsch - aber leider nur in Ansätzen (die ersten drei Kapitel) Twitter Bootstrap.



Aber Danke für alle Hinweise, vielleicht nehme ich doch ein fertiges Template.

Gruß und Frohes Neues Jahr
glupto
 
Habe jetzt ein paar Tage mit bootstrap herumexperimentiert. Ich möchte eine Seite umgestalten, die bisher nicht responsive programmiert war und zwei Dutzend unsortierte Listen mit jeweils zwischen 10 und 20 Zeilen in zwei Columns nebeneinander anzeigte. Ich hätte aber gern drei Columns nebeneinander, um die Monitorbreite besser auszunutzen, habe es mit dem Vierer-Grid von bootstrap versucht. Wenn man dann den Bildschirm verkleinert, rutscht die Liste von ganz rechts oben unter die nächste links daneben, anstatt nach ganz links, dann die vierte daneben usw. Ich hoffe, es wird verständlich und jemand hat eine Idee. Ich kann sonst auch noch screenshots anfügen.

Gruß und Dank glupto
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben