Bootstrap 3

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.


Seite einrichten

Die neue Version Bootstrap 3

Was ist neu in 3.0

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.

 


Einbinden der Dateien.

Im folgenden Beispiel habe ich die heruntergeladenen Bootstrap Dateien in einen übergeordneten Ordner "bootstrap" entpackt. Die jQuery Javascript Datei liegt im Ordner jquery

Glyphicons

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 Tag und Styles im Head

<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">

 

 

Das Javascript am Ende des Body

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>


 

CDN

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

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.


Attribute aria, role

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


Bootstrap Erweiterung für Dreamweaver

Es gibt eine kostenlose Bootstrap Erweiterung von dmxzone für Bootstrap 2.3.2. Es gibt eine kostenpflichtige Version für Bootstrap 3, die ich mir gekauft habe. Jedoch bin ich davon sehr enttäuscht, da sie auf meinem Rechner so langsam ist, dass ich sie praktisch gar nicht gebrauchen kann. Außerdem kann man damit lediglich das Grid System erstellen. Das ist allerdings mit der Erweiterung auch nicht einfacher, als es gleich im Quellcode zu machen.

 

Weitere Links

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