Dino Esposito

Autor

Dino Esposito

Dino Esposito ist CTO bei e-tennis.net, einer Firma, die sich auf webbasierte und mobile Lösungen für Sportereignisse in ganz Europa spezialisiert hat. Außerdem ist Dino der Autor von „Programming ASP.NET MVC3“, Microsoft Press, 2011.

Web-Experience mit Bootstrap stylen

Twitter Bootstrap wird überall im Web verwendet, ob über standardmäßige oder benutzerdefinierte CSS-Styles. Die Klassennamen sowie die neuen HTML-Metaelemente, die Bootstrap definiert, sind inzwischen in den meisten Sites gebräuchlich und arbeiten Seite an Seite mit nativen HTML-Elementen wie zum Beispiel Kontrollkästchen, Optionsfeldern und Dropdown-Listen. Allerdings harmoniert eine gute alte browserspezifische Dropdown-Liste nicht mit den farbenfrohen nativen Komponenten von Bootstrap. Dieser Artikel zeigt, wie Sie mithilfe von eigenen Bootstrap-spezifischen Dropdownlisten die Web-Experience vereinheitlichen.

Bootstrap: Kontextabhängige Navigationsleisten

Wenn Seiten zu viel Inhalt bieten, reicht ein Scrollbalken zur Navigation möglicherweise nicht aus. Mit einem Scrollbalken kann man zwar im Inhalt nach oben und unten gehen, doch lässt sich die richtige Stelle so kaum finden. Ein Scrollbalken reagiert eben nur auf Mausbewegungen und nicht auf den Inhalt, durch den man damit scrollt. In Bootstrap ist ein Affix eine Art Breadcrumb, das den Inhalt einer Seite strukturiert und einen visuellen Hinweis auf die aktuelle Position gibt, statt wie bei normalen Breadcrumbs für eine Website. Wenn der Benutzer durch die Seite scrollt, wird die Navigationsleiste mit Links zu Abschnitten des Inhalts dank des Affix am oberen Rand der Seite angeheftet und bleibt ständig sichtbar.

Bootstrap: Listen, Listen und nochmals Listen

Mit Twitter Bootstrap lassen sich viele HTML-bezogene Dinge wesentlich einfacher implementieren. In diesem Artikel erfahren Sie, wie sich verschiedene Typen von Listen mithilfe von DIV-Elementen sowie UL/LI-Kombinationen arrangieren lassen. Listen können Kopf- und Fußleisten erhalten und in Panels und Warnfeldern gruppiert werden. Genauso einfach ist es, grundlegende kosmetische Änderungen vorzunehmen. Die Benennung von CSS-Klassenstilen vereinfacht die Arbeit, sodass sich bildlauffähige Listen überall problemlos platzieren lassen.

Bootstrap: Tooltips und Popovers

Tooltips kennt man von Webseiten schon seit den Anfangsjahren der Browser. Allerdings sind Tooltips an dieser Stelle wahrscheinlich das einzige Feature, das seit seiner Anfangszeit nie eine Wandlung erfahren hat. Mit dem Erscheinen von jQuery sind unzählige Plug-ins für die Implementierung attraktiver Tooltip-Effekte entstanden. Der Entwickler sah sich dann mit dem Problem konfrontiert, das beste und geeignetste Tooltip-Plug-in auszuwählen. Twitter Bootstrap greift uns hier unter die Arme und nimmt uns die Auswahl ab. Wie aus der Dokumentation hervorgeht, wurden Tooltips in Bootstrap durch Tipsy inspiriert, eines der bekanntesten jQuery-Tooltip-Plug-ins. Vor allem aber sind benutzerdefinierte und anpassbare Tooltips jetzt zum Preis eines leicht modifizierten SPAN-Elements verfügbar.

Bootstrap: Responsive Layouts und Bilder

Twitter Bootstrap fällt das Verdienst zu, eine neue Systematik von HTML-Elementen zu definieren, die Benutzer in modernen Seiten erwarten und die Entwickler dementsprechend entwickeln müssen. Bootstrap bietet Elemente wie Pager, Dropdown-Schaltflächen, Karusselle, modale Dialogfelder, Registerkarten, Breadcrumbs und weitere, die jeweils mit ihrem eigenen Layout und einer eigenen Programmieroberfläche aufwarten. Darüber hinaus stellt Bootstrap ein flexibles Grid-System mit einem standardisierten und dokumentierten Layout bereit und rückt das Thema der responsiven Bilder stärker in den Vordergrund.

Ein Webkarussell mit Bootstrap

Karusselle findet man auf der Startseite vieler Websites, die in den letzten Jahren neu entstanden sind oder aufpoliert wurden. Ein Karussell ist ein ringförmiger Gürtel, der Bilder oder HTML-Inhalte unbegrenzt scrollen lässt. Weithin beliebt geworden sind Karusselle mit dem Einzug von jQuery und dem riesigen Fundus von Plug-ins, die dafür entstanden sind. Viele Entwickler sahen sich dem Problem gegenüber, die Karussellkomponente mit der höchsten Qualität aus den Myriaden verfügbarer Plug-ins auszuwählen. Mit Bootstrap 3 bekommen Sie eine integrierte Lösung, die einfach eines der auf dem Markt erhältlichen Plug-ins nutzt. Mit anderen Worten hat Bootstrap 3 Ihnen die Qual der Wahl abgenommen, das am besten geeignete Karussell auszuwählen, und eine Karussellkomponente in das API integriert. Dieser Artikel erläutert, was Sie brauchen, um die Komponente in Ihren Webseiten einsetzen zu können.

Schaltflächen und Drop-down-Menüs in Bootstrap

Twitter Bootstrap abstrahiert einfaches HTML fast so, wie jQuery die JavaScript-Sprache und das Seiten-DOM abstrahiert hat. Bootstrap definiert eine neue Menge von Regeln und schafft eine neue gemeinsame Basis, auf der Entwickler und Designer zusammenarbeiten können – die einen kodieren das Verhalten, die anderen gestalten Seiten. Bis noch vor wenigen Jahren ließen sich die meisten Ziele erreichen, wenn man CSS mit einfachem HTML angewendet hat. Heute ist CSS in Themen einzubinden und einfaches Markup entspricht höchstwahrscheinlich dem Markup, das Bootstrap erkennt und transformiert. Dadurch ist es möglich geworden, komplexere Widgets als native Markup-Elemente zu betrachten, wie zum Beispiel Schaltflächengruppen, Menüs und Drop-downs. Dieser Artikel zeigt, wie Sie diese mithilfe von Twitter Bootstrap 3.0 in Gang bringen.

Ist PhoneGap der (mobile) Zauberstab?

Manchmal hat man keine andere Wahl, als mehrere mobile Anwendungen für eine Reihe von Betriebssystemen zu schreiben – iOS, Android, vielleicht Windows Phone und möglicherweise noch mehr. Ohne Umschweife sei gesagt, dass das meistens bedeutet, die Anstrengungen und das Budget mit der Anzahl der angeforderten Anwendungen zu multiplizieren. Gibt es hier irgendeinen Ausweg? Leider können Ihnen hier weder ein Zauberer noch ein Zauberstab helfen. Sie müssen sich durchkämpfen und Ihre Strategie verbessern, um den Aufwand zu minimieren; wenn Sie ihn nicht einfach über die Zeit verteilen wollen.

Ist PhoneGap der (mobile) Zauberstab?

Manchmal hat man keine andere Wahl, als mehrere mobile Anwendungen für eine Reihe von Betriebssystemen zu schreiben – iOS, Android, vielleicht Windows Phone und möglicherweise noch mehr. Ohne Umschweife sei gesagt, dass das meistens bedeutet, die Anstrengungen und das Budget mit der Anzahl der angeforderten Anwendungen zu multiplizieren. Gibt es hier irgendeinen Ausweg? Leider können Ihnen hier weder ein Zauberer noch ein Zauberstab helfen. Sie müssen sich durchkämpfen und Ihre Strategie verbessern, um den Aufwand zu minimieren; wenn Sie ihn nicht einfach über die Zeit verteilen wollen.

X
- Gib Deinen Standort ein -
- or -