Ich habe auch einige Videotutorials zum Bootstrap Thema gemacht. Dort erkläre ich unter anderem auch wie man das Grid System oder Raster Layout benutzt.
siehe auch:
Videotutorial zu dieser Seite: Thema Bootstrap einbinden
Videotutorial zum Thema Grid- oder Rasterlayout
Beispielseiten zum Thema Grid- oder Rasterlayout
Ich richte mich an Einsteiger in Sachen Bootstrap setze jedoch Grundkenntnisse in Html und CSS voraus.
Ich liefere mit meinen Tipps Hilfestellungen, indem ich das ein oder andere Bootstrap Beispiel vervollständige.
Dreamweaver und Bootstrap wird bestens erklärt auf der Seite von Andreas Stocker. Dort gibts auch die besten Videokurse zu diesem Thema.
Nutzt man die "neue" Version Bootstrap 3, kann man sich gleich auf der ersten Seite Bootstrap runterladen. In einem Ordner "dist" befinden sich die Dateien, die eingebunden werden müssen. Auf der Bootstrap Seite "Getting Started" sieht man ein Beispiel "Startertemplate" welches man sich 1 zu 1 kopieren kann. Selbstverständlich müssen die Referenzierungen an die eigene Ordnerstruktur angepasst werden. Außerdem gibt es immer eine Datei mit dem Kürzel -min und eine ohne. Binde immer nur eine der beiden ein. Die minimierte Version lässt sich nicht anpassen und hat eine kleinere Dateigröße.
Im folgenden Beispiel habe ich die heruntergeladenen Bootstrap Dateien in einen übergeordneten Ordner "bootstrap" entpackt. Die jQuery Javascript Datei liegt im Ordner jquery
Die Ordnerstruktur sollte man, so wie man sie in der Zip Datei erhalten hat, beibehalten und hochladen, denn sonst kann es sein, dass die Icons / Glyphicons nicht richtig angzeigt werden. Die Glyphicons liegen im Ordner fonts und werden in n der bootstrap.css oder bootstrap.min.css eingebunden. Man braucht sie in Bootstrap 3 nicht mehr selbst auf der Seite einbinden.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- Optionales Theme -->
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
Binde die Javascript Dateien am Ende der Seite ein, damit die Seite schneller angezeigt wird. Jquery muss vor dem Bootstrap eingebunden werden.
<script src="jquery/jquery-1.11.0.min.js"> </script>
<script src="bootstrap/js/bootstrap.min.js"></script>
Man kann die Dateien auch aus dem Netz einbinden.
<!-- Das neueste kompilierte und minimierte CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optionales Theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Das JavaScript am Ende der Seite-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"> </script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"> </script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Less die dynamische Stylesheet Sprache wurde für Bootstrap verwendet. Aus einer oder mehreren Less Dateien, wird eine CSS Datei kompiliert.
Wenn du Dreamweaver dein eigen nennst, kannst du mit der kostenlosen "LESS" Erweiterung von dmxzone auf einfache Weise eine bootstrap.css erzeugen.
Lade dir Bootstrap bei Github runter. Dort sind auch die dazugehörigen Less Dateien enthalten.
Lade dir die LessCompiler Erweiterung bei DMX Zone runter und installiere sie mit dem Adobe Extensionmanager.
Kopiere die Less Dateien irgendwo in einen Ordner deiner Site. Weitere Infos, zu den Dateien gibt es auf der Bootstrap Seite. Ändere Farben etc. und speichere die einzelnen Less Dateien.
Wähle zum Schluß die bootstrap.less und speicher diese ab. Wähle die Option "In gleiche Datei compilieren. Dadurch wird eine bootstrap.css im gleichen Ordner erstellt.
Diese bootstrap.css kannst du für dein Projekt benutzen.
In den Bootstrap Beispielen sieht man des öfteren Attribute wie aria oder role. Diese Attribute sind keine Bootstrap spezifischen Attribute, sondern es sind HTML Attribute, die ein barrierefreies Netz unterstützen. Siehe dazu arial landmark roles
Dreamweaver und Bootstrap wird bestens erklärt auf der Seite von Andreas Stocker. Dort gibts auch sehr gute Videokurse zu diesem Thema.
https://github.com/twbs/bootstrap bootstrap on github
http://builtwithbootstrap.com/ Beispiele
http://gui.repixdesign.com/#bootstrap Photoshop-Dateien für Bootstrap
http://www.lavishbootstrap.com/ Farbschema anhand eines Bildes
http://lesscss.org/ Less
http://t3n.de/news/besseres-css-mit-less-488092/ Less Tutorial
http://okonski.org/bootstrap2.0/docs/less.html Less Tutorial
https://wrapbootstrap.com/ Themen für Bootstrap
http://cssmediaqueries.com/what-are-css-media-queries.html was sind media queries