Webentwicklung

2015-06-04

Erstellen von Responsive Websites mit Bootstrap

Es ist nur eine Frage der Zeit, bis ein Kunde die URL Ihrer Website auf einem mobilen Gerät antippt. Bekommt der Benutzer dann eine Darstellung Ihrer Website zu sehen, die man auf dem Smartphone nicht verwenden kann, weil sie nur für den Desktop entwickelt wurde? In dem Fall sucht der Benutzer höchstwahrscheinlich nach einer für mobile Geräte besser geeigneten Website. Aber wenn der Benutzer stattdessen auf eine Benutzeroberfläche träfe, die für den Formfaktor von mobilen Geräten ausgelegt ist und mit der er leicht interagieren kann?

In der Vergangenheit war für eine Website, die sowohl auf mobilen Geräten als auch auf dem Desktop verwendbar war, jeweils eine unterschiedliche Codebasis erforderlich. Heutzutage sind jedoch UI-Frameworks verfügbar, mit denen die Seiten einer Website Smartphones, Tablets, Desktopsysteme und sogar Desktops mit besonders großem Bildschirm unterstützen können – alles mit einer Codebasis. Diese Tools stellen zwar kein Patentrezept für Entwickler von mobilen Webanwendungen dar, sie können den Entwicklungsprozess aber erheblich erleichtern. Trotzdem muss genauer betrachtet werden, ob ein bestimmtes Tool sich für Ihre Website eignet.

Dieser Artikel gibt eine Übersicht zu einem dieser Tools, Bootstrap, das in vielen Webanwendungsvorlagen von Visual Studio 2013 enthalten ist. Bootstrap ist ein Framework, das Responsive Web Design (RWD) ermöglicht – einen Ansatz zum Entwickeln von Websites, der darauf abzielt, mit einer einheitlichen Codebasis eine akzeptable Benutzererfahrung für alle Formfaktoren zur Verfügung zu stellen. Nach der Übersicht erörtere ich noch einige Faktoren, die Ihnen bei der Entscheidung helfen können, ob Bootstrap das richtige Tool für Ihre Website ist.

Anfänge

Tools wir Bootstrap setzen einen gewissen Evolutionsprozess in der Softwarebranche voraus. Nach einem ruckartigen Anfang 1998, bei dem WML (Wireless Markup Language), Compact HTML und XHTML Mobile Profile entstanden und schnell wieder verschwanden, kristallisierte sich 2009 schließlich HTML5 als HTML-Standard der kommenden Generation für alle Geräte heraus. Standards allein bewirken aber noch nichts. Zeitgleich mit der allmählichen Entwicklung des Standards für mobiles Markup im Web wurden auch erhebliche Fortschritte bei Hardware, mobilen Browsern und Bandbreite erzielt. Prozessoren wurden schneller, mobile Browser entwickelten sich bis zu einem Punkt, an dem sie jede Webseite darstellen konnten (selbst wenn die Seite nicht für ein mobiles Gerät ausgelegt war), und die Bandbreite nahm zu. Dadurch entstand eine Situation, die für Entwickler interessant war.

Entwicklern macht es besonderen Spaß, sich Tools für andere Entwickler auszudenken, und mobiles Internet bildet da keine Ausnahme. Zurzeit ist am Markt mehr als ein Dutzend verschiedener UI-Frameworks erhältlich. Es wäre unfair, eins dieser Frameworks als „das Beste“ zu bezeichnen, weil in ihnen unterschiedliche Ansätze verwirklicht sind und Websites unterschiedliche Ansprüche stellen. Meine Wahl ist für diesen Artikel auf Bootstrap gefallen, da es eine gute Verbreitung aufweist, umfassend dokumentiert ist und einen Bestandteil der ASP.NET-Webanwendungsvorlagen bildet.

Was ist Bootstrap?

Bootstrap ist ein UI-Framework für das Erstellen von responsiven Websites. Wie viele andere UI-Frameworks für die Webentwicklung ist das Bootstrap-Framework eine Sammlung von CSS-Klassen, UI-Komponenten und JQuery-Plug-Ins. Bootstrap wird als einfaches („lightweight“) Framework angesehen. Anders ausgedrückt, es setzt zur Erreichung seiner Ziele mehr CSS als JavaScript ein. Auch wenn Bootstrap als einfaches Framework angesehen wird, erfordert die Darstellung einer Webseite, die Bootstrap-Tools verwendet, mehr Rechenleistung als eine Seite, die speziell für einen bestimmten Formfaktor erstellt wurde. Daher sollte der Leistung beim Entwerfen, Entwickeln und Testen von Seiten, die Teile des Bootstrap-Frameworks verwenden, besondere Aufmerksamkeit gelten.

Bootstrap nimmt Ihnen eine Menge Arbeit ab. Es gestattet Ihnen auch, das Standardverhalten für einen bestimmten Formfaktor ganz einfach anzupassen, ohne das Layout Ihrer Seite für andere Formfaktoren übermäßig zu beeinträchtigen. Version 3 von Bootstrap enthält CSS-Klassen, die Browserbreiten, die vor allem bei Browsern in Smartphones, Tablets, Desktops und Desktops mit besonders großen Bildschirmen gebräuchlich sind, speziell unterstützen. Die können die Bootstrap CSS-Klassen verwenden, um HTML5-Elemente mit Anmerkungen zu versehen. Die am häufigsten verwendeten CSS-Klassen nutzen das Bootstrap-Rastersystem, eine Sammlung von Klassen, die das Layout einer Seite In Form von Zeilen und Spalten organisiert. Das Rastersystem wird weiter unten im Artikel ausführlicher beschrieben.

Bootstrap weist eine Reihe von UI-Komponenten für das Erstellen der Benutzeroberfläche einer Website auf, darunter Schaltflächendropdown, Schaltflächengruppe, Navigationsleiste, Breadcrumbnavigation, Medienobjekt, Paginierung und Statusleiste, um nur einige zu nennen. Viele dieser Komponenten sind ihrerseits responsive, d.h. dass sie abhängig von der Browserbreite verschieden dargestellt werden. Beispielsweise ist die Navigationsleiste eine leistungsstarke Komponente, die automatisch von einer Menüleiste, die Menüoptionen über die gesamte Bildschirmbreite auf Desktops anzeigt, zu einer gut aussehenden Kompaktversion wechselt, die Optionen mithilfe einer Dropdownmenüleiste darstellt, die beim Berühren der Navigationsleiste aktiviert wird.

Für höher entwickelte Funktionen der Benutzeroberfläche bietet Bootstrap außerdem eine Sammlung benutzerdefinierter JQuery-Plug-Ins, einschließlich Carousel, reduzierbarer Bedienfelder, Prompts in modalen Dialogfeldern und Popovernachrichten.

Erste Schritte

Die CSS- und JavaScript-Dateien von Bootstrap werden automatisch in Ihr Projekt einbezogen, wenn Sie die ASP.NET-Webanwendungsvorlage für Visual Studio 2013 zum Erstellen Ihres Projekts verwenden. Das neue Projektdialogfeld für Webanwendungsvorlagen ist in Abbildung 1 dargestellt. Bootstrap erfordert darüber hinaus JQuery. Wenn Sie Bootstrap aus der Visual Studio 2013-Webanwendungsvorlage abrufen, erhalten Sie Bootstrap v3.0.0 mit JQuery v1.10.2. Wenn Sie die Vorlagen für Visual Studio 2012 verwenden, werden die Dateien nicht in Ihr Projekt aufgenommen. Außerdem wird Bootstrap nicht automatisch einbezogen, wenn Sie eine neue Website über „Datei“ | „Neue Website“ erstellen.

Abbildung 1 Visual Studio 2013-Dialogfeld „Neues Projekt“ für die ASP.NET-Webanwendungsvorlage

Wenn Sie lieber die neuesten und bestausgestatteten Versionen von Bootstrap und JQuery verwenden möchten, verwenden Sie NuGet, um ihr Projekt zu aktualisieren. NuGet sollten Sie auch verwenden, um sich Bootstrap zu besorgen, wenn Sie eine Version von Visual Studio vor Visual Studio 2013 verwenden. Auf der Bootstrap-Website (getbootstrap.com) wird gezeigt, wie Sie eine Verknüpfung mit einer auf einem CDN gehosteten Version von Bootstrap herstellen, was einen deutlichen Leistungsvorsprung mit sich bringen kann.

Experimente mit dem Bootstrap-Rastersystem

Was Bootstrap bereitstellt, wird als 12-spaltiges responsives Layout bezeichnet. Das Layout Ihrer Seiten kann eine beliebige Anzahl Zeilen umfassen, es muss aber 12 Spalten aufweisen. Diese 12 Spalten sind gleichmäßig über die Breite des Browsers verteilt, und Sie verwenden die Bootstrap-CSS-Klassen, um anzugeben, wie viele Spalten ein HTML-Element belegen soll. Dieser Typ Rastersystem ist anders als das, woran XAML-Entwickler für Windows Phone und Windows 8 gewöhnt sind. Im XAML-Rastersystem kann ein Seitenlayout eine beliebige Anzahl Zeilen und Spalten aufweisen. Darin platzieren Entwickler jedes Steuerelement in einer Zelle, indem sie eine Zeilennummer und eine Spaltennummer angeben. Das Bootstrap-Rastersystem wird dadurch so besonders leistungsfähig, dass Sie für große Desktops, normale Desktops, Tablets und Smartphone eine je verschiedene Spaltenanzahl angeben können. Ein häufiges Layoutmuster erhält man, wenn man eine Reihe von „divs“? erstellt und für jedes „div“ festlegt, dass es 2 Spalten auf einem großen Desktop umfasst (sodass also 6 „divs“ in jede Zeile passen), 3 Spalten auf einem normalen Desktop, 4 Spalten auf einem Tablet und 6 Spalten auf einem Smartphone (was 2 „divs“ pro Zeile ergibt). Der Code für dieses Szenario ist in Abbildung 2 mithilfe der col*-Klassen dargestellt, aus denen das Bootstrap-Rastersystem besteht. Die Farbklassen (grau, orange usw.) steuern lediglich die Farbgebung eines „divs“. Abbildung 3 und Abbildung 4 zeigen, wie diese Seite auf einem Desktop bzw. einem Smartphone dargestellt würde.

Abbildung 2 Ein häufig verwendetes Layoutmuster, mithilfe des Bootstrap-Rastersystems realisiert

<body>
  <div class="container">
    <hr />
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">6</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">11</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">12</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">13</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">14</div>
  </div> <!-- /container -->
</body>

Abbildung 3 Das Beispiel aus Abbildung 2 bei der Darstellung auf einem Desktop mithilfe der col-md-3-Klasse

Abbildung 4 Das Beispiel aus Abbildung 2 bei der Darstellung auf einem Smartphone mithilfe der col-xs-6-Klasse

Sie müssen unbedingt beachten, dass Bootstrap den Gerätetyp nicht erkennt. Stattdessen verwendet Bootstrap Medienabfragen, um zu bestimmen, ob eine CSS-Klasse angewendet werden soll. Die vier Kategorien von Klassen sind in Abbildung 5 zusammen mit den Breitenbereichen dargestellt, die eine Anwendung der einzelnen Kategorien bewirken.

Abbildung 5 Klassenkategorien des Bootstrap-Rastersystems

Kategoriepräfix	Formfaktor	Breite in Pixeln
col-xs-*	Windows Phone	Kleiner als 768
col-sm-*	Tablet	768 bis 991
col-md-*	Desktop	992 bis 1.200
col-lg-*	Großer Desktop	Größer als 1.200

Für das Layout von HTML-Elementen können Sie beliebige Kombinationen dieser Kategorien verwenden. Beispielsweise wird in der folgenden Codezeile eine Klasse aus jeder der Kategorien verwendet:

<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> {Other HTML elements here.} </div>

Dies ist gleichbedeutend mit dem folgenden Pseudocode:

Wenn die Breite des Browsers kleiner als 768 Pixel ist, überspannt dieses „div“ 6 von 12 verfügbaren Spalten und belegt damit die Hälfte (6/12) der Bildschirmbreite.

Wenn andernfalls die Breite des Browsers zwischen 768 und 991 Pixel beträgt, überspannt dieses „div“ 4 von 12 verfügbaren Spalten und belegt ein Drittel (4/12) der Bildschirmbreite.

Wenn andernfalls die Breite des Browsers zwischen 992 und 1.200 Pixel beträgt, überspannt dieses „div“ 3 von 12 verfügbaren Spalten und belegt ein Viertel (3/12) der Bildschirmbreite.

Und wenn andernfalls die Breite des Browsers größter als 1.200 Pixel ist, überspannt dieses „div“ 2 von 12 verfügbaren Spalten und belegt damit ein Sechstel (2/12) der Bildschirmbreite.

Sie brauchen für die einzelnen Kategorien nicht explizit eine Spaltenanzahl anzugeben. Wenn Sie keine bestimmte Kategorie angeben, wird die nächstkleinere Kategorie verwendet. Wenn Sie beispielsweise ein eindeutiges Layout für Smartphones festlegen möchten, nur ein einzelnes anderes Layout sich aber für Tablets, Desktops und große Desktops eignet, brauchen Sie nur eine Klasse für Smartphone und Tablet anzugeben. Wie hier gezeigt:

<div class="col-xs-6 col-sm-4"> {HTML elements here.} </div>

Bootstrap verwendet die Tableteinstellungen für die beiden Formfaktoren Desktop und großer Desktop. Darüber hinaus ist die Standardklasse für Smartphones „col-xs-12“, bei der jedes „div“ in einer eigenen Zeile platziert wird. Wenn dieses Layout für Smartphones akzeptabel ist, lässt sich die vorstehende Codezeile weiter vereinfachen:

<div class="col-sm-4"> {HTML elements here.} </div>

Beachten Sie, dass in Abbildung 2 keine Zeilen angegeben sind. Das Bootstrap-Rastersystem platziert ein „div“ automatisch in der nächsten Zeile, wenn die aktuelle Zeile bereits vollständig belegt ist oder der Platz für das „div“ nicht mehr ausreicht. Sie können die Verwendung einer neuen Zeile mithilfe der Zeilenklasse erzwingen, wie hier:

<div class="row">
  {Place columns here.}
</div>

Warum 12 Spalten? 12 mag zuerst wie eine zufällig gewählte Zahl für dieses Rastersystem erscheinen, das ist sie aber nicht. Die Zahl 12 bietet viele Teilungs- und Zusammensetzungsmöglichkeiten. 12 lässt sich ohne Rest durch die Zahlen 1, 2, 3, 4, 6 und 12 teilen. Die Verwendung dieser Werte für die Spaltenabdeckung ergibt Inhaltslayouts mit 12 Spalten, 6 Spalten, 4 Spalten, 2 Spalten bzw. 1 Spalte. Und darüber hinaus ergeben Kombinationen wie 3+9, 9+3, 4+8 und 8+4 visuell ansprechende Kombinationen für das Inhaltslayout.

Bootstrap-Komponenten

Bootstrap enthält mehr als 20 Komponenten, die in ihrem aktuellen Zustand verwendet oder auf einfache Weise erweitert werden können. Auf der Bootstrap-Website finden Sie eine Beschreibung der einzelnen Komponenten und ein Syntaxbeispiel. Um die Verwendung des Medienobjekts zu veranschaulichen, verwendet dessen Dokumentation sogar ein Musikvideo von REO Speed Wagon. Auch wenn Sie nicht in den 80ern groß geworden sind, sollten Sie es sich einmal anhören.

Ich möchte näher auf die Navbar-Komponente (Navigationsleiste) eingehen, die zum Erstellen einer Menüleiste oben auf einer Seite verwendet wird. In Abbildung 6 können Sie sehen, wie die Navbar-Komponente zum Erstellen eines einfachen Menüs mit dem Firmennamen der Website und ein paar Menüoptionen verwendet werden kann. Wenn ein Browser breiter als 768 Pixel ist, wird die Navigationsleiste wie in Abbildung 7 dargestellt. Wenn der Browser schmaler als 768 Pixel ist, wird die Navigationsleiste wie in Abbildung 8 dargestellt. In diesem Fall werden die Menüoptionen angezeigt, wenn der Benutzer auf die Schaltfläche mit den horizontalen Linien tippt.

Abbildung 6 Verwenden der Navbar-Komponente von Bootstrap

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
        data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link 1
          <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Abbildung 7 Die Navigationsleiste in der Darstellung für Browser mit einer Breite von 768 Pixel oder mehr

Abbildung 8 Die Navigationsleiste in der Darstellung für Browser mit einer Breite von 768 Pixel oder weniger

Das ist natürlich ein sehr einfaches Beispiel. Die Navigationsleiste kann außerdem Dropdown-Menüschaltflächen enthalten, und Sie können sogar eine Suchfunktion in die Navigationsleiste integrieren. Außerdem kann der Firmenteil der Navigationsleiste, der im Beispiel Text ist, auch ein Bild sein.

JQuery-Plug-Ins

Bootstrap verfügt über ungefähr ein Dutzend JQuery-Plug-Ins, die auf der Bootstrap-Website auf der Registerkarte „JavaScript“ beschrieben sind. Auf den ersten Blick scheint ihre Funktion der der im vorherigen Abschnitt beschriebenen Komponenten zu ähneln, insofern, als es sich bei ihnen um CSS-Klassen handelt, die zum Vergrößern von HTML5-Elementen verwendet werden. Diese CSS-Klassen lösen jedoch beim Darstellen von HTML-Elementen oder bei der Ausgabe verschiedener Ereignisse für das HTML-Element JQuery-Aktivitäten aus. Seiten, die ausgiebigen Gebrauch von diesen Plug-Ins machen, sollten auf Leistungsprobleme hin getestet werden, insbesondere auf Geräten mit langsameren CPUs und eingeschränktem Arbeitsspeicher.

Der für die Ausführung dieser Plug-Ins erforderliche JavaScript-Code befindet sich in „bootstrap.js“. Jedes Plug-In ist ferner als eigenständige Datei verfügbar, was Ihnen die Möglichkeit gibt, nur die von Ihrer App benötigten Plug-Ins einzubeziehen, was zu einer schnelleren Darstellung der ersten Seite führt.

Abbildung 9 zeigt, wie Sie das Carousel-Plug-In verwenden, das Präsentationsfunktionen zur Verfügung stellt. Wenn Ihre Seite bereits eine Verknüpfung mit „bootstrap.js“ oder „bootstrap.min.js“ aufweist, sind Sie schon bereit. Alternativ können Sie eine Verknüpfung mit „carousel.js“ verwenden, wenn Sie außer Carousel kein weiteres Plug-In für Ihre Seite benötigen.

Abbildung 9 Verwenden des Carousel-Plug-Ins

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0"
      class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slide content -->
  <div class="carousel-inner" role="listbox">
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ... Only one slide for brevity.
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button"
    data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button"
    data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Abbildung 10 zeigt das Carousel-Plug-In in der Darstellung für Windows Phone. Das Carousel-Plug-In dehnt sich für die Formfaktoren Tablet, Desktop und großer Desktop automatisch passend.

Abbildung 10 Das Carousel-Beispiel, dargestellt im Windows Phone-Emulator.

Überlegungen

Wie bereits früher festgestellt: Bootstrap ist nicht für jede Situation die richtige Wahl. Ein paar Überlegungen helfen Ihnen bei der Entscheidung, ob Bootstrap sich für Ihre Website eignet:

Wenn Sie bereits über eine Website verfügen, deren Leistung im Lauf der Jahre angepasst und für Ihre Benutzer optimiert wurde, empfiehlt sich ein umsichtiges Vorgehen. Komplexe, stark frequentierte Seiten als Prototyp darzustellen, ist ebenfalls empfehlenswert. Wenn eine Bootstrap-fähige Seite keine adäquate Leistung aufweist, erwägen Sie, eine m-Website zu erstellen und den gesamten Code selbst zu schreiben. In Dino Espositos Artikel „Mobilisieren von vorhandenen Websites“ (bit.ly/1CaVEWR) erfahren Sie, wie Sie eine m-Website einrichten.
Wenn Sie eine neue Website erstellen, erstellen Sie Prototypen der besonders komplexen sowie derjenigen Seiten, die Ihrer Meinung nach besonders stark frequentiert werden. Überprüfen Sie, ob sie auf Low-End-Geräten und in Bereichen mit geringer Bandbreite gut funktionieren. Wenn sich eine Seite als problematisch herausstellt, versuchen Sie, sie so umzugestalten, dass sie eine angemessene Leistung erbringt. Eine m-Website stellt auch für neue Websites eine mögliche Option dar, das sollte aber nur ins Auge gefasst werden, wenn eine Neuauslegung nicht zum Ziel führt.
Überzeugen Sie sich, dass das Rastersystem von Bootstrap und die für die Navigation verwendeten Komponenten im Hinblick auf den Websiteentwurf keine zu starke Einschränkung darstellen. Überprüfen Sie das zusammen mit Ihren UX-Entwicklern in einer frühen Evaluierungsphase von Bootstrap. Meines Erachtens zwingt Sie ein Tool wie Bootstrap dazu, für mobile Geräte zu entwickeln, was Sie wiederum zwingt, Ihre Seiten sauber und aufgeräumt zu halten. Ihr UX-Entwickler kann aber bestätigen, ob Ihre Marke mithilfe von Bootstrap angemessen dargestellt werden und eine für Ihre Benutzer befriedigende Erfahrung erzielt werden kann.

Weitere Informationen und Tools

Wenn Sie sich entschieden haben, Ihre Website mithilfe von Bootstrap zu entwickeln, ist es sinnvoll, alle Komponenten und JQuery-Plug-Ins zu überprüfen, die auf der Bootstrap-Website dokumentiert sind. Hier finden Sie außerdem viele nützliche Beispiele. Diese Websites sollten Sie außerdem ansehen:

Bootswatch (bootswatch.com) enthält kostenlose Designs für Bootstrap.
Wrap Bootstrap (wrapbootstrap.com) enthält kostengünstige Designs und Vorlagen für Bootstrap.
Font Awesome (fontawesome.io) ist eine Website, auf der kostenlose skalierbare Vektorsymbole bereitstehen, die mithilfe von CSS leicht angepasst werden können.
„Bereitstellen einer mobilen ASP.NET MVC 5-Webanwendung auf Azure-Websites“ (bit.ly/1CMOGwq) zeigt, wie Sie Bootstrap auf eine vorhandene Website anwenden können, um sie besser an mobile Geräte anzupassen. Der Artikel zeigt außerdem die Bereitstellung einer Website auf Microsoft Azure.

Zusammenfassung

Das hier vorgestellte Material gibt nur einen kurzen Überblick zum Bootstrap-UI-Framework. In keiner Weise sind hier alle CSS-Klassen, Komponenten und Plug-Ins beschrieben, die zum Lieferumfang von Bootstrap gehören. Wenn Sie sich ein umfassendes Bild der verfügbaren Tools machen und die Beispielseiten ansehen möchten, auf denen verschiedene US-Entwürfe dargestellt sind, sollten Sie zur Bootstrap-Website navigieren. Die Beispielseiten stellen einen guten Ausgangspunkt dar, wenn Sie ein Gefühl für die in Bootstrap bereitstehenden Möglichkeiten entwickeln möchten.

Bevor Sie größere Entwicklungsarbeiten mithilfe von Bootstrap oder anderer Frameworks in Angriff nehmen, sollten Sie unbedingt Leistung und Nutzbarkeit beurteilen. Prototypen wichtiger Seiten zu erstellen, ist die beste Möglichkeit, festzustellen, ob Bootstrap in Ihre Website einbezogen werden und die gewünschten Ergebnisse erbringen kann.

Keith Pijanowski ist Engineer, Unternehmer und Geschäftsmann. Er verfügt über mehr als 20 Jahre Erfahrung in der Softwarebranche und hat für Start-Ups und große Unternehmen in Funktionen gearbeitet, die vom Erstellen von Code bis hin zur Geschäftsentwicklung reichen. Sie erreichen ihn unter keithpij@msn.com oder twitter.com/keithpij.

Unser Dank gilt den folgenden technischen Experten von Microsoft für die Durchsicht dieses Artikels: Rick Anderson und Cephas Lin

Freigeben über