ASP.NET MVC 5 Fundamentals - Bootstrap

20 Januar 2015
Simon Steinkrüger

Auf pluralsight gibt es den empfehlenswerten (und kostenlosen) Videokurs „ASP.NET MVC 5 Fundamentals“. Der Kurs ist in Englisch und wird von Scott Allen gesprochen, einem erfahrenen Sprecher und Microsoft MVP. Durch seine deutliche Aussprache und gute Betonung ist er leicht zu verstehen und er bespricht die Inhalte des Kurses sehr ausführlich.

Ein Teil des Kurses handelt von Bootstrap 3, einem bekannten Open Source CSS Framework, welches ursprünglich von twitter entwickelt wurde. Das Framework ist ein Front-End Toolkit für Webapplikationen und unterstützt Responsive Design, so dass das Endergebnis auf mobilen Geräten wie auch auf dem Desktop gut aussieht.

Scott Allen geht zunächst auf die Bestandteile von Bootstrap ein, das Framework bietet viele verschiedene Widgets und Typographien. Er beschreibt die einfache Handhabung der vorgefertigten CSS-Klassen, da diese immer nur für eine Aufgabe oder Funktion verantwortlich sind. Es wird also das Single-Responsibility-Prinzip auf die CSS-Klassen angewendet. Bootstrap baut zudem auf den Mobile-First-Ansatz auf, will heißen, dass die Anwendung von Beginn an für mobile Endgeräte optimiert wird.

In den kommenden Unterkapiteln wird auf den internen Aufbau von Bootstrap eingegangen, außerdem wird erklärt wie Bootstrap mittlerweile in ASP.NET MVC integriert ist. Das Grid-Layout wird behandelt und die nötigen CSS-Klassen und Schachtelungen, um das Grid-Layout anzuwenden. Auch dem Responsive Design wird ein größerer Teil reserviert. Folgend beschreibt Scott Allen die einzelnen integrierten Komponenten in Bootstrap, wie zum Beispiel das Dropdown Menü.

Weiterhin wird beschrieben, wie Bootstraps Typography auf einzelne Elemente angewendet werden kann und wie gut aussehende Formulare mit wenig Aufwand erzeugt werden können. Auch mit tabellarischen Daten kann Bootstrap umgehen, um z.B. die gerade gehoverte Zeile zu kennzeichnen. Um das Paket abzurunden, gibt es auch Unterstützung für Buttons.

Ein Unterkaptiel widmet sich dem JavaScript-Part von Bootstrap, zum Beispiel gibt es Bild-Karusselle und Dialoge, die mittels JavaScript konfiguriert werden können. Auch Klick-Aktionen können somit eingestellt werden, um zum Beispiel einen modalen Dialog wieder schließen zu können.

Es ist durchaus möglich, dass die Standard-Bordmittel von Bootstrap nicht ausreichen oder dass das Standard-Theme von Bootstrap den Ansprüchen nicht genügt. Hierfür gibt es weitere Themes auf der Seite von bootswatch. Die Themes werden unter der MIT License veröffentlicht und sind allesamt Open Source, ein Blick dorthin lohnt sich.

Insgesamt ist die kleine Einführung in Bootstrap eine gute Möglichkeit, leicht verständlich in die Welt von Bootstrap und Responsive Design zu gelangen. Aber nicht nur dieser Teil des Videokurses ist sehr informativ, sondern der gesamte Kurs von Scott Allen ist seine Zeit definitiv wert.

  .NET  ASP.NET  Bootstrap  CSS3  HTML5  MVC