![\"Startbildschirm](\"..\/fileadmin\/_temp_\/2018_02\/pic_128_001.png\")
<\/p>\n<\/p>\n
Bild 1: Startbildschirm von Bootstrap Studio<\/span><\/b><\/p>\n 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.<\/b><\/p>\n Das Tool Bootstrap Studio <\/b>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<\/b> (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.<\/p>\n Bild 1: Startbildschirm von Bootstrap Studio<\/span><\/b><\/p>\n 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:<\/p>\n Bild 2: Ansehen der verschiedenen Navigationen<\/span><\/b><\/p>\n Bild 3: Die Navigation als erstes hinzugefügtes Element<\/span><\/b><\/p>\n Bild 4: Die Webseite mit Navigation und einem Artikel-Inhaltselement<\/span><\/b><\/p>\n Bild 5: Navigation, Inhalt und Footer – fertig ist die Webseite.<\/span><\/b><\/p>\n<\/ul>\n 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.<\/p>\n 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).<\/p>\n Bild 6: Anpassen der Beschriftung<\/span><\/b><\/p>\n 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 <\/b>ein neues Element namens Nav Item <\/b>rechts vom Element First Item <\/b>hinzugefügt.<\/p>\n Bild 7: Bearbeiten der Navigationsleiste<\/span><\/b><\/p>\n 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<\/b>– und dem Bearbeiten<\/b>-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<\/b>-Schaltfläche mit dem Pfeil nach oben, dann finden Sie in der Regel auch die Befehle zur weiteren Bearbeitung wie etwa die Löschen<\/b>-Schaltfläche.<\/p>\n 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.<\/p>\n Wenn Sie das Dropdown in der Navigationsleiste bearbeiten wollen, klicken Sie dieses zunächst an. Dann finden Sie oben links neben der Beschriftung Dropdown <\/b>eine Schaltfläche namens Open<\/b>. Damit klappen Sie das Dropdown-Element auf, um seine Einträge zu bearbeiten.<\/p>\n 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<\/b>. Das Dropdown-Element ziehen Sie dann einfach von dort an die gewünschte Stelle in der Navigationsleiste.<\/p>\n 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 <\/b>der Toolbox an die gewünschte Stelle ziehen – also etwa Überschriften (Heading<\/b>) oder einfache Absätze (Paragraph<\/b>).<\/p>\n Sie können auch beispielsweise neue Bilder zum Inhalt hinzufügen. Dazu ziehen Sie das Element Image|Image <\/b>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<\/b>, der die Möglichkeit bietet, bereits vorhandene Bilder einzufügen oder über die Schaltfläche Import Image <\/b>neue Bilder zur Vorlage hinzuzufügen (siehe Bild 8). Klicken Sie dann eines der angezeigten Bilder an, erscheint dieses im Inhalt.<\/p>\n Bild 8: Hinzufügen einer Bilddatei<\/span><\/b><\/p>\n 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.<\/p>\n 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<\/b>-Element aus dem Bereich Grid <\/b>der Toolbox an die gewünschte Stelle. Diese trägt dann die Beschriftung Empty Row <\/b>(siehe Bild 9).<\/p>\n Möchten Sie weiterlesen? Dann lösen Sie Ihr Ticket!<\/span><\/p>\nBootstrap Studio<\/h2>\n
\n
![\"Ansehen](\"..\/fileadmin\/_temp_\/2018_02\/pic_128_002.png\")
<\/p>\n![\"Die](\"..\/fileadmin\/_temp_\/2018_02\/pic_128_003.png\")
<\/p>\n![\"Die](\"..\/fileadmin\/_temp_\/2018_02\/pic_128_004.png\")
<\/p>\n![\"Navigation,](\"..\/fileadmin\/_temp_\/2018_02\/pic_128_005.png\")
<\/p>\nAnpassen des Entwurfs<\/h2>\n
Navigation bearbeiten<\/h2>\n
![\"Anpassen](\"..\/fileadmin\/_temp_\/2018_02\/pic_128_006.png\")
<\/p>\n![\"Bearbeiten](\"..\/fileadmin\/_temp_\/2018_02\/pic_128_007.png\")
<\/p>\nÜbergeordnetes Element markieren<\/h2>\n
Navigationselemente bearbeiten<\/h2>\n
Inhalt bearbeiten<\/h2>\n
![\"Hinzufügen](\"..\/fileadmin\/_temp_\/2018_02\/pic_128_008.png\")
<\/p>\nFußzeile bearbeiten<\/h2>\n
Mit Rastern arbeiten<\/h2>\n
![\"Hinzufügen](\"..\/fileadmin\/_temp_\/2018_02\/pic_128_009.png\")
<\/p>\n
\nHier geht es zur Bestellung des Jahresabonnements des Magazins Visual Basic Entwickler<\/strong>:<\/span>
\nZur Bestellung ...<\/a><\/span>
\nDanach greifen Sie sofort auf alle rund 200 Artikel<\/strong> unseres Angebots zu - auch auf diesen hier!<\/span>
\nOder haben Sie bereits Zugangsdaten? Dann loggen Sie sich gleich hier ein:<\/span><\/p>\n<\/div>\n\n\t\n\t