Twitter benötigte 2010 eine einheitliche Bibliothek für die Gestaltung von Oberflächen von Webseiten. So entstand ein Framework, das 2011 als Open Source-Projekt veröffentlicht wurde und heute in mittlerweile fünfter Version große Verbreitung findet. Definition Bootstrap ist ein kostenloses und quelloffenes Frontend-Web-Framework zur Erstellung von Webseiten. Es dient nur der Front-End-Entwicklung und enthält HTML- und CSS-basierte Designvorlagen für Typografie, Formulare, Schaltflächen und Navigation sowie optionale JavaScript-Erweiterungen. Das Ergebnis ist ein einheitliches Erscheinungsbild in Webbrowsern. Darüber hinaus können Entwickler die in Bootstrap definierten CSS-Klassen nutzen, um das Erscheinungsbild ihrer Inhalte weiter anzupassen.Durch die JavaScript-Module ist es möglich, Nutzerinteraktionen einzubinden, z.B. Dialogboxen, Bilder-Slideshows und Tabs. Bootstrap bietet zudem alle Voraussetzungen für responsives Webdesign, so dass Webseiten auf allen Geräten (Desktop, Smartphones und Tablets) optimal dargestellt werden. Wie funktioniert Bootstrap? Bootstrap stellt einzelne Komponenten zur Verfügung, die man in seine Webseite einfügen kann. Jede Komponente besteht aus einer HTML-Struktur, CSS-Deklarationen und in einigen Fällen begleitendem JavaScript-Code. Bootstrap nutzt eine Obermenge von CSS, die Stylesheet-Sprache Sass (Syntactically Awesome Stylesheets). Das modular aufgebaute Bootstrap 4 ist in die Bereiche Layout, Inhalt, Komponenten und Werkzeuge gegliedert. Der Entwickler kann festlegen, welche Komponenten er davon nutzen möchte. Anpassungen in Bottstrap vornehmen Über das zentrale Konfigurationsstylesheet können weitere Anpassungen vorgenommen werden. Darin sind unter anderem Schriftart, -größe und -farbe sowie der Aufbau des Grid-Layouts definiert. Weitere Änderungen sind möglich, indem die Sass-Deklarationen überschrieben werden. Ab Version 2 lässt sich Bootstrap auch über eine spezielle Customize-Option konfigurieren. Der Entwickler wählt dabei die gewünschten Komponenten über ein Formular und passt ggf. die Werte der Optionen seinen Bedürfnissen an. Daraufhin wird ein Paket erzeugt, das das fertig kompilierte CSS-Stylesheet enthält. Zentrale Bootstrap Komponenten Die zentralen Komponenten von Bootstrap sind die Layoutkomponenten, da sich diese auf die gesamte Webseite auswirken. Die grundlegende Layoutkomponente heißt Container, da alle Elemente der Seite darin platziert werden. Entwickler können zwischen einem Container mit fester Breite und einem Container mit dynamischer (Fluid-)Breite wählen. Während letztere immer die Breite der Webseite ausfüllt, verwendet die erstere eine von vier vordefinierten festen Breiten, responsiv abhängig von der Größe des Bildschirms, auf dem die Seite angezeigt wird. Sobald ein Container eingerichtet ist, implementieren andere Bootstrap-Layoutkomponenten ein CSS-Rasterlayout mit Zeilen und Spalten. Das Bootstrap-Layout Das Bootstrap-Layout basiert auf einem 12-spaltigen Raster mit einer Gesamtbreite von 1140 Pixeln. Die Rasterbreite wird via CSS-Breakpoints der Displaygröße des Anzeigegeräts angepasst. Alternativ kann das Rasterlayout über die komplette Displaygröße dargestellt werden. Die JavaScript-Komponenten enthält Bootstrap in Form von JQuery-Plugins. Diese bieten zusätzliche Elemente für die Benutzeroberfläche wie Dialogboxen, Quick-Infos und Bilder-Slideshow. Vorteile und Nachteile von Bootstrap Vorteile Bootstrap vereinfacht die Frontend-Webentwicklung durch einheitliche Layout-Vorgaben. In gewissem Rahmen sind diese Vorgaben anpassbar und können mit neuen Funktionen erweitert werden. Bootstrap wurde auf Basis von HTML5 und CSS3 entwickelt. Dabei wurde Wert auf Abwärtskompatibilität zu älteren Browser-Versionen gelegt. In CSS3 eingeführte Eigenschaften wie beispielsweise Farbverläufe, Schatten und abgerundete Ecken werden von älteren Webbrowser nicht unterstützt, trotzdem lassen sich auf ihnen Bootstrap-Seiten anzeigen. Lediglich der Internet Explorer 9 und frühere Versionen werden ab Bootstrap Version 4 nicht mehr unterstützt. Nachteile Das komplette Framework ist umfangreich, was die Ladezeit der Webseite verzögern kann. Inbesondere auf Smartphones mit langsamer Internetverbindung kann sich dies auswirken. Abhilfe schafft das Weglassen unnötiger Komponenten und die Optimierungen der Performance im CMS bzw. auf der Webseite. Das Layout muss sich dem Framework anpassen. Die vorgegebenen Komponenten sind zwar anpassbar, dennoch hat jedes Design einen gewissen Bootstrap-Touch. Wenn Websites sehr individuell gestaltet werden sollen, würde man andere Frameworks wählen. Wie kann ich Bootstrap beim Entwickeln nutzen? Eine vorkompilierte Version von Bootstrap ist in Form einer CSS-Datei und drei JavaScript-Dateien verfügbar, die zu einem Webprojekt hinzugefügt werden können. Die Grundform von Bootstrap ermöglicht es Entwicklern, Anpassungen zu implementieren. Diese Grundform ist modular, d.h. der Entwickler kann nicht benötigte Komponenten entfernen und die nicht kompilierten Sass-Dateien ändern. Um Bootstrap für eine HTML-Seite zu verwenden, muss nur ein ZIP-Archiv von der Bootstrap-Webseite genutzt werden. Dieses Archiv enthält fast alle einzubindenden Dateien, darunter die Stylesheetdatei mit allen Komponenten, die JavaScript-Datei mit allen Plugins sowie eine Icon-Schriftart. Auf GitHub steht ein vollständiges, deutlich umfangreicheres ZIP-Archiv für Entwickler zur Verfügung. Hier sind auch Beispiele für typische Webseiten enthalten. Die Dateien des ZIP-Archivs müssen in das eigene HTML-Dokument eingebunden werden. Im Falle der Nutzung von Javascript-Komponenten muss im HTML-Dokument ebenfalls die Javascript-Datei zusammen mit der JQuery-Bibliothek referenziert werden. Für angepasste Stileigenschaften und Javascript-Funktionalität können fast alle Elemente von Bootstrap auf der offiziellen Website verändert werden und in einem angepassten Paket heruntergeladen werden. Man kann Bootstrap aber auch vom Standard abweichend lokal kompilieren. Fazit Entwickler erhalten mit Bootstrap eine solide Grundlage für die Frontend-Entwicklung. Die Arbeit wird beschleunigt, da Komponenten bereits vorgegeben sind. Die technischen Eigenschaften der verschiedenen Anzeigegeräte (Desktop, Smartphones, Tablets) werden responsiv unterstützt. Weitere Funktionen wie JQuery können auf das bestehende Gerüst aufsetzen und so die Funktionalität der Benutzeroberfläche erweitern. Bootstrap-Tutorial im Video Videos von YouTube werden aus Gründen des Datenschutzes erst angezeigt, wenn die Entsprechenden Cookies akzeptiert wurden. Bitte akzeptiere statistik, Marketing cookies, um das Video zu sehen. Der Beitrag Was ist Bootstrap? erschien zuerst auf IT-Talents.de.
Charify The Charity Challenge. Whats the idea Play Games. Support Charity. Charify makes giving to charity competitive and fun. Check it out Website: jazzity.net Facebook: facebook.com/charify Twitter: twitter.com/CharifyHQ LinkedIn: linkedin.com/co
NaviChat der Chatbot für die Fahrplanauskunft im ÖPNV. Whats the idea NaviChat ist die mobile Fahrplanauskunft im Facebook Messenger. Einfach NaviChat anschreiben und fragen, wie du von A nach B kommst. Check it out Facebook Messenger: m.me/NaviChat W
Lesedauer 3 Minuten Purity III ist ein schnelles Joomla-Template. Damit kannst du eine einfache Seite, einen modernen Blog und auch eine professionelle Business-Website erstellen. Dieses Schweizer-Taschenmesser-Template ist auf einem T3-Framework aufgebau
zum Artikel gehenJazzity Your pocket guide to jazz in Berlin. Whats the idea Jazzity is your pocket guide to jazz in Berlin. Jazzity not only gives you an overview of the jazz clubs in Berlin, it also aggregates the programmes from the clubs websites and makes them acces
<div class="container"> <div class="row"> <div class="col"> </div><!-- col --> </div><!-- row --></div><!-- container -->7 - 5 Grid<div class="co
zum Artikel gehen