Entwerfen von Responsive-Websites mit Bootstrap

Bootstrap ist ein populäres kostenloses HTML-, CSS- und JavaScript-Framework zum Entwickeln von Responsive-Websites mit Priorisierung von Mobilgeräten. Das Framework enthält Responsive-CSS- und -HTML-Vorlagen für Schaltflächen, Tabellen, Navigation, Bildkarussells und andere Elemente, die Sie auf der Webseite verwenden können. Es sind einige optionale JavaScript-Plug-ins verfügbar, die selbst Entwicklern mit lediglich grundlegenden Codierungskenntnissen das Entwickeln großartiger Responsive-Websites ermöglichen.

Mit Dreamweaver können Sie Bootstrap-Dokumente erstellen und außerdem vorhandene Webseiten bearbeiten, die mit Bootstrap erstellt wurden. In Dreamweaver können Sie fertige Bootstrap-Dateien und vorläufige Designs bearbeiten und dabei nicht nur Codeänderungen vornehmen, sondern auch visuelle Bearbeitungsfunktionen verwenden, z. B. die Bearbeitung in der Live-Ansicht, den visuellen CSS-Designer, visuelle Medienabfragen und „Extract“, um Änderungen am Design vorzunehmen.

Beim Erstellen von Dokumenten mit fließendem Rasterlayout wurden die entsprechenden Klassen für das Responsive-Layout Ihrer Webseiten von Dreamweaver automatisch angewendet. So konnten Sie sich auf Ihre Inhalte konzentrieren und mussten nur festlegen, wie das Layout in den verschiedenen Formfaktoren umbrochen werden sollte.

In Bootstrap-Dokumenten konzentrieren Sie sich ebenfalls auf Inhalt und Design und Dreamweaver kümmert sich um das Responsive-Layout Ihrer Webseite. Dazu ist es eng mit dem Bootstrap-Framework integriert.

Dreamweaver unterstützt derzeit die Bootstrap-Version 3.3.7 und 4.0.0:

„Bootstrap 3.3.7 umfasst ein fließendes Rastersystem mit einem für Mobilgeräte optimierten Responsive Design, das entsprechend der Geräte- oder Viewport-Größe auf bis zu 12 Spalten skaliert werden kann. Außerdem sind Klassen für benutzerfreundliche Layout-Optionen sowie leistungsstarke Mixins zum Generieren von semantischen Layouts enthalten.“ – Bootstrap-Dokumentation.

„Bootstrap 4.0.0 weist grundlegende Änderungen auf, z. B. ein vielseitiges Flexbox-Raster mit Priorisierung von Mobilgeräten, mit dem Sie Layouts in beliebiger Form und jeder Größe erstellen können. Ermöglicht wird dies durch ein zwölfspaltiges System, fünf Responsive-Standardebenen, Sass-Variablen und Mixins sowie Dutzende vordefinierte Klassen.“ – Bootstrap-Dokumentation.

Für den Einstieg in Bootstrap-Dokumente mit Dreamweaver sollten Sie die Bootstrap-Startvorlagen verwenden. Dreamweaver enthält eine Reihe von Vorlagen für verschiedene Arten von häufig erstellten Websites, z. B. für E-Commerce oder Portfolios.

Nein, es gibt kein direktes Verfahren zum Konvertieren von vorhandenen Dokumenten mit fließendem Rasterlayout in Bootstrap-Dokumente. Bootstrap-Dokumente werden in Dreamweaver jedoch ähnlich wie Dokumente mit fließendem Rasterlayout erstellt. Sie können z. B. zunächst ein Bootstrap-Dokument direkt über das Dialogfeld Neues Dokument erstellen. Während Dokumente mit fließendem Rasterlayout für drei grundlegende Formfaktoren erstellt werden (Mobilgeräte, Tablets und Desktop), erstellen Sie für Bootstrap zunächst ein Dokument für Standard-Bildschirmgrößen – klein, mittel, groß und sehr groß. Die Optionen zur Layoutbearbeitung, die beim Klicken auf Elemente in Bootstrap-Dokumenten angezeigt werden, sind ebenfalls mit den Optionen für Dokumente mit fließendem Rasterlayout vergleichbar.

Ja, Sie können alte Sites in der neuesten Version von Dreamweaver importieren. Dabei sucht Dreamweaver im Ordner Stammordner der Site/css/ nach der Bootstrap-CSS-Datei.

• Wenn die Site über eine Bootstrap v3-CSS-Datei verfügt, wird die Bootstrap-Version unter Sites verwalten > Erweiterte Einstellungen > Bootstrap auf 3.3.7 festgelegt.
• Wenn die Site über eine Bootstrap v4-CSS-Datei verfügt, wird die Bootstrap-Version unter Sites verwalten > Erweiterte Einstellungen > Bootstrap auf 4.0.0 festgelegt.
• Wenn für die Site keine Bootstrap-CSS-Datei im Ordner Site-Stammordner/css vorhanden ist, wird die Bootstrap-Version unter Sites verwalten > Erweiterte Einstellungen > Bootstrap auf 4.0.0 festgelegt.

Beginnen Sie mit dem Entwurf Ihrer Bootstrap-Website, indem Sie eine der folgenden Optionen im Dialogfeld Neues Dokument wählen:

• Bootstrap-Startvorlagen (Startvorlagen > Bootstrap-Vorlagen): Verwenden Sie diese Option, wenn Sie sofort loslegen und mit einem bereits vorgefertigten Seitenlayout beginnen möchten. Bearbeiten Sie einfach die Texte und ersetzen Sie die Elemente nach Bedarf, um in wenigen Schritten eine fertige Responsive-Website zu erstellen. Weitere Informationen finden Sie unter Bootstrap-Startvorlagen verwenden.
• Ein HTML-Dokument basierend auf dem Bootstrap-Framework erstellen (Neues Dokument > HTML > Bootstrap): Verwenden Sie diese Option, wenn Sie Ihre Site Stück für Stück mithilfe von CSS und Bootstrap-Komponenten in Dreamweaver erstellen möchten. Weitere Informationen finden Sie unter HTML-Dokumente basierend auf dem Bootstrap-Framework erstellen.
  

Mit Bootstrap-Startvorlagen können Sie in wenigen einfachen Schritten Webseiten in vielen beliebten Layouts erstellen. Alle abhängigen Dateien im Framework werden automatisch gespeichert.

Sie können ein auf dem Bootstrap-Framework basierendes HTML-Dokument als Ausgangspunkt für Ihre Responsive-Website verwenden. Dabei können Sie angeben, ob Sie einen neuen Satz Bootstrap-Framework-Dateien erstellen oder die vorhandenen Dateien verwenden möchten. Nachdem das Dokument erstellt wurde, können Sie über das Bedienfeld „Einfügen“ in Dreamweaver zusätzliche Bootstrap-Komponenten wie Akkordeons oder Karussells hinzufügen. Wenn Sie mit Photoshop-Kompositionen arbeiten, können Sie mit Extract Bilder, Schriften, Stile, Text und weitere Inhalte in das Bootstrap-Dokument einfügen.

Sie können Bootstrap-Dateien mit einer der folgenden Methoden öffnen:

• Klicken Sie auf Datei > Öffnen und navigieren Sie zur Bootstrap-HTML-Datei.
• Empfehlung: Erstellen Sie eine Dreamweaver-Site und legen Sie als Site-Ordner den Ordner fest, der Ihre Bootstrap-Dateien enthält.

Beim Öffnen einer Bootstrap-HTML-Datei in Dreamweaver:

• Zeilen werden durch graue gestrichelte Linien mit runden Ecken hervorgehoben.
• Spalten werden durch blaue gestrichelte Linien hervorgehoben.

Dreamweaver erkennt die CSS-Dateien, die mit einer Bootstrap-HTML-Datei verknüpft sind, wenn der CSS-Dateiname „bootstrap“ enthält. Als CSS-Dateiverweis kann jeder der folgenden Verweise verwendet werden:

• Lokaler Pfad:

  Die minimierte oder nicht minimierte CSS-Datei ist lokal vorhanden. Beispiel:

  <link href="css/bootstrap.css" rel="stylesheet"> oder
  <link href="css/bootstrap.min.css" rel="stylesheet">

• Remote-Pfad:

Eine minimierte oder nicht minimierte Remote-CSS-Datei. Beispiel:

<link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">

• CDN

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/<Bootstrap-Versionsnummer>/css/bootstrap.min.css" rel="stylesheet">

In einigen Fällen sollen bestimmte Elemente nur in einem Viewport angezeigt werden und in anderen Viewports aus Designgründen nicht sichtbar sein. 

Um ein Bootstrap-Element auszublenden, klicken Sie mit der rechten Maustaste darauf und wählen Sie „Element ausblenden“. Das Element wird vorübergehend ausgeblendet.

Um ausgeblendete Elemente einzublenden, klicken Sie mit der rechten Maustaste darauf und wählen Sie „Ausgeblendete Elemente verwalten“. Die ausgeblendeten Elemente werden mit grau schraffiertem Hintergrund angezeigt. Klicken Sie auf das Augensymbol, um das Element einzublenden.

Mit der Option „Bootstrap-Komponenten“ im Bedienfeld Einfügen werden alle Bootstrap-Komponenten aufgeführt, die Sie der Webseite in Dreamweaver hinzufügen können. Welche Komponenten im Bedienfeld Einfügen aufgeführt werden, hängt von der Bootstrap-Version in der Datei „bootstrap.css“ ab, die mit der HTML-Seite verknüpft ist.  Für Bootstrap 4.0.0 werden z. B. zusätzliche Komponenten wie Karten und Badges aufgeführt. Komponenten wie Glyphicons, Bedienfelder, Wells und Miniaturansichten sind nur in Bootstrap 3.3.7 verfügbar. Abhängig von der Bootstrap-Version werden die entsprechenden Komponenten im Bedienfeld Einfügen angezeigt.

Die Komponenten im Bedienfeld Einfügen werden anhand folgender Kriterien ausgefüllt:

• Das aktive Dokument: Die Komponenten, die im Bedienfeld „Einfügen“ aufgeführt werden, hängen von der Bootstrap-Version in der Bootstrap-Datei ab, die mit dem Dokument verknüpft ist. 
• Version in den Site-Voreinstellungen: Bei Nicht-Bootstrap-Dokumenten sucht Dreamweaver nach der Version unter Site-Einstellungen > Erweitert > Bootstrapping. Abhängig von der mit dieser Option festgelegten Version werden die entsprechenden Komponenten ausgefüllt. Standardmäßig lautet die Version für neue Sites 4.0.0.
• Speicherort der Dateien: Bei einem Nicht-Bootstrap-Dokument, das zu keiner Site gehört, werden im Bedienfeld „Einfügen“ die Komponenten für Version 4.0.0 angezeigt.

Um eine Komponente hinzuzufügen, ziehen Sie sie aus dem Bedienfeld auf die Webseite. Bevor Sie die Komponente einfügen, beachten Sie auch die visuellen Hilfsmittel, z. B. Live-Hilfslinien, die Funktion zum präzisen Einfügen (mit DOM) und den Positionierungsassistenten. Mit diesen Hilfsmitteln können Sie die Komponenten schnell und genau auf der Seite einfügen. Weitere Informationen zum Einfügen von Elementen auf der Webseite finden Sie unter Überblick über das Bedienfeld „Einfügen“.

Klicken Sie auf die gewünschte Zeile, nach der Sie die neue Zeile einfügen möchten. Klicken Sie dann auf „Neue Zeile hinzufügen“. Es wird eine Bootstrap-Zeile zusammen mit zwei untergeordneten Spaltenelementen mit jeweils sechs Spalten hinzugefügt.

Der Code für die hinzugefügte Zeile lautet wie folgt:

<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>

Dabei stellt „*“ die aktuelle Bildschirmgröße in Dreamweaver dar.

Wählen Sie die gewünschte Spalte aus und klicken Sie dann auf das Symbol „Neue Spalte hinzufügen“. Die ausgewählte Spalte wird ohne ihre untergeordneten Elemente dupliziert.

Allen leeren Spalten wird eine Mindesthöhe von 20 px zugewiesen. Diese Höhe wird jedoch nicht wirklich der Seite hinzugefügt. Sie wird nur in der Live-Ansicht angezeigt, um Elemente einfacher in die Spalten einfügen zu können.

Klicken Sie auf die Zeile oder Spalte, die Sie duplizieren wollen, und klicken Sie dann unten rechts auf das Symbol zum Duplizieren. Die gesamte Zeile bzw. Spalte wird zusammen mit ihrem Inhalt kopiert.

Das Ändern der Größe von Spalten und das Anwenden eines Offsets auf Spalten sind zwingend erforderlich, insbesondere beim Erstellen von Responsive Designs für verschiedene Viewports. 

Klicken Sie auf die gewünschte Spalte und ziehen Sie den Griff, um die Größe zu ändern. Wenn Sie bei einem Bootstrap 4.0.0-Dokument die Größe einer Spalte ändern, wird die Klasse „col-*-n“ hinzugefügt. Dabei stellt „*“ die aktuelle Medienabfrage dar („sm“, „md“, „lg“ oder „xl“) und „n“ stellt die Anzahl der eingenommenen Spalten dar. Bei der Bildschirmgröße Sehr klein wird die Klasse „col-n“ hinzugefügt.

Wenn Sie bei einem Bootstrap 3.3.7-Dokument die Größe einer Spalte ändern, wird die Klasse col-*-n hinzugefügt. Dabei stellt „*“ die aktuelle Medienabfrage dar („xs“, „sm“, „md“ oder „lg“) und „n“ stellt die Anzahl der eingenommenen Spalten dar.

Dreamweaver erkennt die aktuelle Bildschirmgröße und fügt die entsprechende Klasse hinzu. Um die Spaltengröße an bestimmte Viewports anzupassen, ändern Sie die Viewport-Größe mit den Optionen in der rechten unteren Ecke oder in der Navigationsleiste. Ändern Sie dann die Größe der Spalten nach Bedarf.

Klicken Sie auf die gewünschte Spalte und ziehen Sie den Griff nach links, um einen Offset auf die Spalte anzuwenden. Der Offset wird als schraffierter Bereich angezeigt. Wenn Sie bei einem Bootstrap 4.0.0-Dokument einen Offset auf die Spalte anwenden, wird die Klasse „offset-*-n“ hinzugefügt. Dabei stellt „*“ die aktuelle Medienabfrage dar („sm“, „md“, „lg“ oder „xl“) und „n“ stellt die Anzahl der eingenommenen Spalten dar.

Wenn Sie bei einem Bootstrap 3.3.7-Dokument einen Offset auf die Spalte anwenden, wird die Klasse „col-*-offset-n“ hinzugefügt. Dabei stellt „*“ die aktuelle Medienabfrage („xs“, „sm“, „md“ oder „lg“) dar und „n“ stellt die Anzahl der Spalten dar, um die die Spalte verschoben wird.

Dreamweaver erkennt die aktuelle Bildschirmgröße und fügt die entsprechende Klasse hinzu. Um den Offset von Spalten an bestimmte Viewports anzupassen, ändern Sie die Viewport-Größe mit den Optionen in der rechten unteren Ecke oder in der Navigationsleiste. Wenden Sie dann nach Bedarf einen Offset auf die Spalten an.