Bootstrap ist ein Frontend-Framework, mit dessen Hilfe Webentwickler geräteübergreifende Websites verschiedenster Art erstellen können. Zu diesem Zweck bietet das Open-Source-Projekt diverse Gestaltungsvorlagen, die auf HTML und CSS basieren, sowie optionale JavaScript-Erweiterungen. Ursprünglich plante Twitter Bootstrap als firmeninternes Werkzeug für die Vereinheitlichung der Designs, veröffentlichte das Framework jedoch im August 2011 auf der Open-Source-Hosting-Plattform GitHub, wo es sich innerhalb kürzester Zeit mit zehntausenden Abspaltungen (Weiterentwicklungen) zu einem der beliebtesten Projekte entwickelte.
Dank der HTML- und CSS-Vorlagen müssen Sie bei einer guten Idee für eine neue Website nicht mit der Entwicklung komplett von vorn beginnen. Sie übernehmen wie aus einem Baukasten vorgefertigte Inhalte und binden sie in Ihr HTML-Dokument ein. Dadurch entfallen viele der sonst sehr mühsamen CSS-Konfigurationen, was Ihnen eine Menge Arbeit erspart. Abgedeckt sind unter anderem die folgenden Elemente:
Eine weitere wichtige Komponente ist das Bootstrap-Grid-Layout. Dieses Ordnungssystem erleichtert es Ihnen, Abstände und Positionierung der einzelnen Website-Elemente punktgenau zu bestimmen, indem es Layouts in 12 Spalten aufteilt. Bei der Anordnung der Elemente im Layout-Gitter können Sie zwischen den verschiedensten Bildschirmgrößen unterscheiden – egal, ob Desktop-PC, Mobiltelefon, Tablet oder PC mit kleinem Bildschirm. Mit Bootstrap sind Sie also für ein Responsive Webdesign bestens gerüstet.
Mit optionalen JavaScript-Plug-ins, die auf dem JavaScript-Framework jQuery basieren, binden Sie zusätzlich nützliche Benutzeroberflächen-Elemente wie Tooltipps oder Dialogfenster in Ihr Projekt ein oder erweitern die Funktionalität vorhandener Bedienelemente, beispielsweise durch ein Autovervollständigungs-Feature für Eingabefelder. Um Bootstrap mit JavaScript-Elementen zu nutzen, binden Sie einfach die jQuery-Bibliothek in Ihr HTML-Dokument ein.
Da Bootstrap von Twitter als freies Framework publiziert wurde, fallen für den Download und die Verwendung keinerlei Kosten an. Erfahreneren Webentwicklern bietet sich durch den frei verfügbaren Programmcode auch die Möglichkeit, das Framework an die eigenen Bedürfnisse anzupassen. In der folgenden Anleitung erfahren Sie, welche Schritte nötig sind, um die vorgefertigten Bootstrap-CSS- und JavaScript-Vorlagen nutzen zu können.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Hallo, das ist mein erstes Bootstrap-Template!</h1>
</body>
</html>Das Meta-Tag „viewport" innerhalb des Head-Bereichs sichert die optimale Darstellung der Website auf mobilen Geräten.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name=viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/class" href="Bootstrap/css/bootstrap.min.css">
</head>
<body>
<h1>Hallo, das ist mein erstes Bootstrap-Template!</h1>
<script src="Bootstrap/js/jquery-1.12.0.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>Auch wenn Bootstrap Ihnen vorgefertigte Inhalte präsentiert, werden Sie mit dem Framework ohne HTML- und CSS-Know-how nicht sehr weit kommen. Eine Einarbeitungszeit ist auch bei versierten Entwicklern sinnvoll – und zahlt sich in der Regel aus. Mittlerweile gibt es zudem diverse mit Bootstrap erstellte Templates anderer User, die teils kostenfrei teils kostenpflichtig zum Download angeboten werden und Ihnen den Großteil der Arbeit abnehmen. Wer regelmäßig mit HTML, CSS und JavaScript zu tun hat, wird die Vorteile des Frameworks schnell zu schätzen wissen. Dabei sind vor allem
hervorzuheben. Zusammen mit der Tatsache, dass es sich um ein Open-Source-Projekt handelt, sorgen diese Faktoren dafür, dass Bootstrap zu Recht eines der beliebtesten Frameworks fürs Webdesign ist.
Die Web Content Accessibility Guidelines (WCAG) des W3C dienen Webseitenbetreibern als Empfehlung zum Erstellen barrierefreier Internetangebote. Dazu stützen sich die WCAG auf die vier Prinzipien: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit. Diesen werden zwölf grundlegende Richtlinien zugewiesen, wie man Webinhalte für Menschen mit sensorischen, motorischen oder kognitiven...
HTML5 ist die neue Kernsprache des Internets. Doch noch immer greifen Webentwickler auf veraltete Auszeichnungssprachen wie HTML 4.01 oder XHTML zurück. Diese erfordern im modernen Webseitenbetrieb oft eine Vielzahl externer Plug-ins, die sowohl die Kompatibilität als auch die Sicherheit einer Webseite gefährden. HTML5 hingegen ermöglicht eine direkte Integration von Multimedia-Elementen und...
JSON-LD bietet Programmieren die Möglichkeit, Metadaten als Skript separat vom Webseiteninhalt im beliebten JSON-Format einzubetten. Die Trennung von HTML-Markup und semantischer Annotation sorgt für eine bessere Lesbarkeit des Quelltextes und ermöglicht eine komfortable Auszeichnung von Metadaten für dynamische Webinhalte. Damit ist JSON-LD ein ernst zu nehmender Konkurrent für Datenformate wie...
Bootstrap gilt als die beliebteste Framework-Lösung zur Konzeption und Kreation funktionsstarker Weboberflächen. Die Sammlung aus HTML-, CSS- und JavaScript-Komponenten, die Twitter im Jahr 2011 unter der freien MIT-Lizenz veröffentlichte, erfreut sich ohne Zweifel einer großen Community sowie einer Vielzahl an Erweiterungen, Schnittstellen zu Content-Management-Systemen und vorgefertigten Themes....
Was gibt es für Neuerungen? Bootstrap 5 soll das Erstellen von modernen, eleganten Websites noch einfacher machen. Die Entwickler versprechen schnellere Ladezeiten, bessere User Experience und sinnvolleren Code: kein jQuery mehr, keine Unterstützung für den Internet Explorer und dafür noch mehr Flexibilität in der Gestaltung.
Nur für kurze Zeit: So erhalten Sie zwei Gratis-Domains!
Kaufen Sie eine .de-Domain und erhalten Sie eine .com und .info Domain gratis dazu.
Sie empfehlen unsere Produkte über unseren Partner Aklamio weiter. Wir bedanken uns mit einer Geldprämie.
Weiterempfehlen
Professionell: 100% werbefrei