Webdesign mit Bootstrap Studio

Wenn Sie ein Abonnement des Magazins 'DATENBANKENTWICKLER' besitzen, können Sie sich anmelden und den kompletten Artikel lesen.
Anderenfalls können Sie das Abonnement hier im Shop erwerben.

Webdesign mit Bootstrap Studio

Wer einmal eine Webseite mit CSS designt hat, weiß, wie aufwendig das ist. Selbst das Anpassen bestehender Seiten ist nicht gerade intuitiv, wenn man sonst eher in der Programmierung unterwegs ist. Manchmal führt allerdings kein Weg um Designarbeit herum, und dann ist es wichtig, ein gutes Tool an der Hand zu haben. Die mit ASP.NET Core Razor Pages verwendete Technik namens Bootstrap können Sie beispielsweise mit dem Tool Bootstrap Studio sehr gut in den Griff bekommen. Dieser Artikel zeigt die grundlegenden Schritte zum Designen einer Webanwendung mit Bootstrap Studio.

Das Tool Bootstrap Studio finden Sie unter dem Link bootstrapstudio.io. Es kostet regulär 50$, zum Zeitpunkt der Erstellung dieses Artikels gab es einen reduzierten Preis von 25$. Nachdem Sie das Tool heruntergeladen und installiert haben, können Sie es gleich starten. Es liefert dann praktischerweise gleich den Getting Started Guide (siehe Bild 1). Bevor wir dort einsteigen, noch ein paar Erläuterungen, warum wir neben Visual Studio noch ein weiteres Tool benötigen. Visual Studio ist eine exzellente Entwicklungsumgebung, aber für die Razor Pages bietet es eben noch keine guten Tools zur Entwicklung der Benutzeroberflächen. Dies ist gerade anspruchsvoll, wenn Sie Webanwendungen bauen wollen, die nicht nur auf einem Endgerät laufen sollen, sondern sich an verschiedene Bildschirmgrößen anpassen. Genau dabei unterstützt uns Bootstrap als ein CSS-Framework, das Vorlagen für die unterschiedlichen Design-Elemente liefert. Die Razor Pages können Bootstrap nutzen, was uns eine Menge Zeit sparen würde, wenn wir die Möglichkeit hätten, das Bootstrap-Framework zur Erstellung der Gestaltungselemente zu nutzen. Und hier setzt Bootstrap Studio an.

Startbildschirm von Bootstrap Studio

Bild 1: Startbildschirm von Bootstrap Studio

Bootstrap Studio

Bootstrap Studio kommt mit drei Bereichen. Der linke liefert, ähnlich wie die Toolbox in Visual Studio, die verschiedenen Elemente, die Sie in Ihre Internetseiten integrieren können. Diese ziehen Sie dann einfach auf den Bereich in der Mitte, der die aktuelle Ansicht der Internetseite liefert. Sie können hier an beliebigen Stellen Design-Elemente einfügen, wobei Sie zunächst einmal das erste Element hinzufügen müssen. Wenn Sie eine komplette Webseite wie beispielsweise die automatisch beim Anlegen eines neuen ASP.NET Core-Webprojekts generieren wollen, würden Sie beispielsweise wie folgt vorgehen:

  • Als Erstes ziehen wir eine geeignete Navigation aus der Toolbox in den Entwurf. Um herauszufinden, welche Navigationen es gibt, klappen Sie den Eintrag Navigation auf und überfahren die einzelnen Einträge mit der Maus. Der Eintrag Navigation with Button entspricht etwa der Navigation, die Visual Studio anlegt, wenn Sie die Option zum Hinzufügen einer Benutzerverwaltung aktivieren (siehe Bild 2). Ziehen Sie diesen Eintrag einfach in den Entwurf der Seite im mittleren Bereich.
  • Ansehen der verschiedenen Navigationen

    Bild 2: Ansehen der verschiedenen Navigationen

  • Das Ergebnis sieht dann wie in Bild 3 aus. Bevor wir dieses Element anpassen, fügen wir zunächst weitere Elemente hinzu.
  • Die Navigation als erstes hinzugefügtes Element

    Bild 3: Die Navigation als erstes hinzugefügtes Element

  • Danach benötigen wir den Inhalt. Den Slider, den wir im Beispielprojekt von Visual Studio finden, wollen wir an dieser Stelle weglassen und stattdessen eines der Article-Templates hinzufügen. Wir überfahren diese wieder, um das für uns passende Template zu finden, und entscheiden uns für die Vorlage Article Clean. Diese können wir nun per Drag and Drop an zwei Stellen einsetzen – entweder über oder unter dem bereits vorhandenen Element. Der Artikel soll natürlich darunter platziert werden. Dies fügt auch gleich noch ein paar Bilder hinzu – praktisch, wenn Sie auch Bilder in ihrem Inhalt aufnehmen möchten (siehe Bild 4).
  • Die Webseite mit Navigation und einem Artikel-Inhaltselement

    Bild 4: Die Webseite mit Navigation und einem Artikel-Inhaltselement

  • Nun fehlt noch der Fußbereich. Diesen finden wir unter dem Element Footers. Wir ziehen den Eintrag Footer Basic unter dem Inhaltselement in den Entwurf und erhalten die Ansicht aus Bild 5. Damit haben wir im Prinzip schon den Aufbau des Beispiels nachgebaut, das auch in Visual Studio verwendet wird.
  • Navigation, Inhalt und Footer – fertig ist die Webseite.

    Bild 5: Navigation, Inhalt und Footer – fertig ist die Webseite.

Anpassen des Entwurfs

Nun wollen Sie die Elemente natürlich nicht wie hier zu sehen übernehmen, sondern gegebenenfalls diverse Änderungen vornehmen – beispielsweise am Inhalt, an den Farben von Text und Hintergrund, an der Schriftart und an anderen Elementen der Benutzeroberfläche. Vielleicht möchten Sie auch noch Elemente entfernen oder hinzufügen.

Navigation bearbeiten

Die Navigation besteht aktuell aus dem Namen der Seite, einigen Navigationslinks und einem Dropdown-Menü. Wenn Sie zum Beispiel den Namen der Seite anpassen möchten, klicken Sie auf das Element, klicken auf das Symbol zum Bearbeiten und ändern dann den Inhalt des Elements. Auf die gleiche Art passen Sie die Beschriftungen der Navigationslinks an. Die Bearbeitung der Beschriftungen können Sie allerdings auch ganz einfach per Doppelklick auf das jeweilige Element aktivieren (siehe Bild 6).

Anpassen der Beschriftung

Bild 6: Anpassen der Beschriftung

Wenn Sie Navigationseinträge hinzufügen oder entfernen oder als aktiv oder inaktiv markieren möchten, erledigen Sie das über die Schaltflächen über dem Entwurf (siehe Bild 7). Im Bild haben wir etwa durch Anklicken der Schaltfläche After ein neues Element namens Nav Item rechts vom Element First Item hinzugefügt.

Bearbeiten der Navigationsleiste

Bild 7: Bearbeiten der Navigationsleiste

Übergeordnetes Element markieren

Manchmal klicken Sie ein Element an, um es beispielsweise zu löschen, und der dann um das Element gezeichnete Rahmen bietet nur die beiden Einträge mit dem Pfeil nach oben- und dem Bearbeiten-Eintrag an. Der Grund, warum Sie das Element zu diesem Zeitpunkt nicht löschen können, ist, dass aktuell das Beschriftungs-Element markiert ist, das zu dem Objekt gehört. Zum Löschen klicken Sie einmal auf die Select Parent-Schaltfläche mit dem Pfeil nach oben, dann finden Sie in der Regel auch die Befehle zur weiteren Bearbeitung wie etwa die Löschen-Schaltfläche.

Navigationselemente bearbeiten

Wenn Sie nun die Navigationselemente bearbeiten wollen, können Sie neue Elemente an der gewünschten Stelle hinzufügen, die vorhandenen Elemente verschieben, die Beschriftungen anpassen oder Elemente löschen.

Wenn Sie das Dropdown in der Navigationsleiste bearbeiten wollen, klicken Sie dieses zunächst an. Dann finden Sie oben links neben der Beschriftung Dropdown eine Schaltfläche namens Open. Damit klappen Sie das Dropdown-Element auf, um seine Einträge zu bearbeiten.

Stellt sich noch die Frage, wie Sie ein weiteres Dropdown zur Navigationsleiste hinzufügen. Wie Sie einfache Button-Elemente zur Navigationsleiste hinzufügen, haben Sie ja schon erfahren. Und auch das Hinzufügen von weiteren Dropdowns gelingt ganz einfach: Diese finden Sie nämlich in der Toolbox unter dem Eintrag Controls. Das Dropdown-Element ziehen Sie dann einfach von dort an die gewünschte Stelle in der Navigationsleiste.

Inhalt bearbeiten

Den Inhalt können Sie zunächst durch Eingabe der gewünschten Texte bearbeiten. Wenn Sie Texte in verschiedenen Formatierungen benötigen, können Sie jeweils neue Absätze aus dem Bereich Text der Toolbox an die gewünschte Stelle ziehen – also etwa Überschriften (Heading) oder einfache Absätze (Paragraph).

Sie können auch beispielsweise neue Bilder zum Inhalt hinzufügen. Dazu ziehen Sie das Element Image|Image an die gewünschte Stelle im Inhalt. Gleich nach dem Hinzufügen erscheint zunächst ein viereckiger Platzhalter. Per Doppelklick auf diesen öffnen Sie den Dialog Choose an Image, der die Möglichkeit bietet, bereits vorhandene Bilder einzufügen oder über die Schaltfläche Import Image neue Bilder zur Vorlage hinzuzufügen (siehe Bild 8). Klicken Sie dann eines der angezeigten Bilder an, erscheint dieses im Inhalt.

Hinzufügen einer Bilddatei

Bild 8: Hinzufügen einer Bilddatei

Fußzeile bearbeiten

Wenn Sie zum Beispiel keine Links auf Twitter, Facebook und Co. im Footer anzeigen möchten, können Sie diese einfach entfernen. Die dort angezeigten Elemente bearbeiten Sie grundsätzlich genauso wie die in der Navigationsleiste. Auch den Namen des Unternehmens ganz unten passen Sie beispielsweise per Doppelklick und Ändern des Inhalts an.

Mit Rastern arbeiten

Wenn Sie kein schnödes einzeiliges Layout wünschen, können Sie über die Grid-Elemente auch ein Raster definieren, das Ihre Inhalte anzeigt. Dazu ziehen Sie zunächst ein Row-Element aus dem Bereich Grid der Toolbox an die gewünschte Stelle. Diese trägt dann die Beschriftung Empty Row (siehe Bild 9).

Hinzufügen eines Row-Elements als Basis für ein Grid

Bild 9: Hinzufügen eines Row-Elements als Basis für ein Grid

Dem neuen Element können Sie nun Column-Elemente hinzufügen. Ziehen Sie eines aus der Toolbox in ein Empty Row-Element, wird dieses mit dem Empty Column-Element gefüllt. Diesem können Sie nun ein weiteres Column-Element hinzufügen. Um festzulegen, ob diese links oder rechts vom bereits vorhandenen Column-Element eingefügt wird, lassen Sie es erst dann fallen, wenn links oder rechts nach dem Überfahren mit der Maus ein entsprechender Pfeil auftaucht. Experimentieren Sie einfach damit herum. Sie können damit dann beispielsweise solche Konstrukte wie in Bild 10 erzeugen.

Dies war die Leseprobe dieses Artikels.
Melden Sie sich an, um auf den vollständigen Artikel zuzugreifen.

Bitte geben Sie die Zeichenfolge in das nachfolgende Textfeld ein

Die mit einem * markierten Felder sind Pflichtfelder.

Ich habe die Datenschutzbestimmungen zur Kenntnis genommen.