Für eine Responsive-Website mit Priorisierung von Mobilgeräten können Sie in Dreamweaver Bootstrap-Startvorlagen und Bootstrap-Komponenten mit Unterstützung für Drag & Drop verwenden.

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.

Hinweis:

Zurzeit werden u. a. die Bootstrap-Versionen 4.0.0 und 3.3.7 unterstützt.

Häufige Fragen

Ich habe fließende Rasterlayouts in Dreamweaver verwendet. Wie steige ich auf Bootstrap um?

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.

Wenn Sie ein Bootstrap-Dokument von Grund auf neu erstellen möchten, finden Sie weitere Informationen im Abschnitt Bootstrap-Dokumente erstellen.

Können vorhandene Dokumente mit fließendem Rasterlayout in Dreamweaver zu Bootstrap-Dokumenten migriert werden?

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.

Kann ich alte Sites in der neuesten Version von Dreamweaver importieren?

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.

Bootstrap-Dokumente erstellen

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.

Bootstrap-Startvorlagen verwenden

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.

  1. Klicken Sie auf Datei > Neu.

  2. Klicken Sie im Dialogfeld Neues Dokument auf Startvorlagen und wählen Sie aus der Liste der Bootstrap-Vorlagen die gewünschte Vorlage.

  3. Klicken Sie auf Erstellen

    Es wird eine HTML-Seite erstellt, die auf der gewählten Vorlage basiert. Sie können die Seite jetzt bearbeiten, indem Sie Komponenten hinzufügen oder löschen und nach Bedarf Text oder Elemente ändern.

HTML-Dokumente basierend auf dem Bootstrap-Framework erstellen

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.

  1. Klicken Sie auf Datei > Neu.

  2. Das Dialogfeld Neues Dokument wird angezeigt. Klicken Sie auf Neues Dokument > HTML und klicken Sie dann auf die Registerkarte Bootstrap.

  3. Um eine neue Datei „bootstrap.css“ (und zugehörige Bootstrap-Dateien) zu erstellen, führen Sie die folgenden Schritte aus:

    Geben Sie an, ob Sie ein neues Bootstrap-CSS erstellen oder ein vorhandenes CSS verwenden möchten.

    Wenn Sie ein neues CSS erstellen, wird im Stammverzeichnis der Site ein Ordner mit dem Namen „css“ erstellt und die Datei „bootstrap.css“ wird in den neuen Ordner kopiert. Wenn Sie ein vorhandenes CSS verwenden, geben Sie den entsprechenden Pfad an oder suchen Sie nach der CSS-Datei.

    1. Klicken Sie auf Neu erstellen.

      Neues Bootstrap-Dokument erstellen
      Neues Bootstrap-Dokument erstellen
    2. (Optional) Wenn Sie ein anderes CSS an Ihr Dokument anhängen möchten, klicken Sie im Abschnitt CSS anfügen auf das Symbol . Das Dialogfeld Externes Stylesheet anfügen wird angezeigt. Geben Sie die gewünschten Einstellungen an und klicken Sie auf OK.

    3. Mit der Option „Vordefiniertes Layout einbinden“ wird eine grundlegende Bootstrap-Dokumentstruktur bereitgestellt.

      Wenn das Dokument keine grundlegende Struktur enthalten soll und Sie mit einem leeren Dokument beginnen möchten, deaktivieren Sie die Option Vordefiniertes Layout einbinden.

    4. (Optional) Das Standardlayout enthält 12 Spalten mit einer Stegbreite von 30 px. Die Standardbildschirmgrößen sind 576 px, 768 px, 992 px und 1200 px.

      Wenn Sie diese Einstellungen ändern möchten, klicken Sie auf Anpassen. Die Datei „bootstrap.css“ wird entsprechend geändert.

      Hinweis:

      Bei Bootstrap 3.3.7 sind die Standardbildschirmgrößen 768 px, 992 px und 1200 px.

    5. Wählen Sie Seite mit Extract aus Photoshop-Kompositionen erstellen, wenn das Bedienfeld „Extract“ geöffnet werden soll (falls es geschlossen ist). Auf diese Weise können Sie sofort beginnen, Elemente aus Photoshop-Kompositionen direkt zu extrahieren.

      In der Standardeinstellung wird die Site mit Bootstrap 4.0.0 erstellt. Nach dem Erstellen des Dokuments befinden sich die Ordner „css“ und „js“ im Stammordner der Site. Wenn Sie die Site jedoch mit der Bootstrap-Version 3.3.7 erstellen möchten, wählen Sie Site > Sites verwalten. Wählen Sie den Stammordner der Site aus. Klicken Sie auf Erweiterte Einstellungen > Bootstrap. Wählen Sie im Dropdown-Menü Bootstrap-Version die Version 3.3.7 aus. Bei der Bootstrap-Version 3.3.7 finden Sie die Ordner „css“, „js“ und „fonts“ im Stammordner der Site.

      Bootstrap-Version 3.3.7 auswählen
      Bootstrap-Version 3.3.7 auswählen
  4. Wenn Sie vorhandene Bootstrap-Framework-Dateien verwenden möchten, führen Sie die folgenden Schritte aus:

    1. Klicken Sie auf Vorhandene verwenden und geben Sie den Pfad zur Datei „bootstrap.css“ an. Alternativ können Sie nach dem Speicherort der CSS-Datei suchen.

      Bootstrap-Dokumente mit vorhandenen Framework-Dateien erstellen
      Bootstrap-Dokumente mit vorhandenen Framework-Dateien erstellen

    2. (Optional) Wenn Sie ein anderes CSS an Ihr Dokument anhängen möchten, klicken Sie im Abschnitt CSS anfügen auf das Symbol . Geben Sie im Dialogfeld Externes Stylesheet anfügen die gewünschten Einstellungen an und klicken Sie auf OK.

    3. Mit der Option „Vordefiniertes Layout einbinden“ wird eine grundlegende Bootstrap-Dokumentstruktur bereitgestellt. Wenn das Dokument keine grundlegende Struktur enthalten soll und Sie mit einem leeren Dokument beginnen möchten, deaktivieren Sie die Option Vordefiniertes Layout einbinden.

  5. Klicken Sie auf „Erstellen“.

Hinweis:

Die erstellte Datei „bootstrap.css“ ist schreibgeschützt. Daher können diese Stile nicht mit dem CSS Designer bearbeiten; das Eigenschaftenfenster im CSS Designer ist für Bootstrap-Dateien deaktiviert.

Wenn Sie die Stile des Bootstraps-Dokuments bearbeiten möchten, erstellen Sie eine andere CSS-Datei, um die vorhandenen Stile zu überschreiben, und fügen Sie die Datei an das Dokument an.

Bootstrap-Dateien öffnen

Hinweis:

Es wird empfohlen, Dokumente, die in Bootstrap ab der Version 3 erstellt wurden, in Dreamweaver zu öffnen und zu bearbeiten.

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

Hinweis:

In Dreamweaver werden Bootstrap-Stylesheets in link- und import-Tags unterstützt. Ein verschachtelter Import – Verknüpfung mit einem Stylesheet, in das wiederum ein anderes Stylesheet importiert wird – wird jedoch nicht unterstützt.

Bootstrap-Elemente ausblenden, einblenden und ausgeblendete Bootstrap-Elemente verwalten

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.

Bootstrap-Elemente in Dreamweaver ausblenden
Bootstrap-Elemente in Dreamweaver ausblenden

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.

Ausgeblendete Bootstrap-Elemente verwalten
Ausgeblendete Bootstrap-Elemente verwalten

Bootstrap-Komponenten hinzufügen

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.
In Bootstrap 4.0.0 unterstützte Komponenten
In Bootstrap 4.0.0 unterstützte Komponenten

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“.

Zeilen hinzufü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.

Spalten hinzufügen

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.

Zeilen und Spalten duplizieren

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.

Hinweis:

Mit der Option zum Hinzufügen von Zeilen oder Spalten wird die Zeile bzw. Spalte mit den Klassen, aber ohne den Inhalt dupliziert.

Größe von Spalten ändern und Offset auf Spalten anwenden

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. 

Spaltengröße ändern

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.

Offset auf Spalten anwenden

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.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie