====== 4) Frameworks ======

Ein Framework ist selbst noch kein fertiges Programm, sondern stellt den Rahmen zur Verfügung, innerhalb dessen der Programmierer eine Anwendung erstellt, wobei u. a. durch die in dem Framework verwendeten Entwurfsmuster auch die Struktur der individuellen Anwendung beeinflusst wird.

  * Ein Framework können Sie als eine Vorprogrammierung verstehen. Verschiedene Funktionen und Elemente sind bereits enthalten und müssen nicht jedes mal neu programmiert werden. Auf diese Elemente kann der Entwickler innerhalb des Framework zugreifen.

  * Es gibt verschieden Arten von Frameworks. Der Begriff ".NET Framework" wird Ihnen sicher schon mal begegnet sein, wenn Sie sich für Programm-Code interessieren. Das ist beispielsweise das Framework für Microsoft-Anwendungen. Tipp: In einem anderen Artikel lesen Sie, wofür Sie das .NET-Framework brauchen.

  * Frameworks gibt es nicht nur für Programme. Zur Erstellung von dynamischen Webseiten werden etwa Web-Frameworks (z.B. Bootstrap) bereitgestellt. Und Programmierer testen Ihre Software beispielsweise mit sogenannten Test-Frameworks.

===== 4.1) Vorteile =====

  * Wiederkehrende Aufgaben sind im Framework schon "vorprogrammiert" und können beliebig oft wiederverwendet werden.
  * Ein Framework bietet außerdem genormte Schnittstellen zu bestimmten Quellen, etwa zu Datenbanken. Dadurch lässt sich eine Quelle einfacher ansprechen.
  * Frameworks erleichtern die Programmierarbeit und sparen dem Entwickler viel Zeit.

===== 4.2) Bootstrap als HTML/CSS & JS -Framework =====

**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. 

==== 4.2.1) Entwicklung von Bootstrap ====

Ursprünglich wurde Bootstrap als internes Werkzeug für Twitter entwickelt, um der Nutzung unterschiedlicher Bibliotheken und der damit einhergehenden Inkonsistenz Einhalt zu gebieten. Als sich herausstellte, dass Bootstrap viel weitreichender genutzt werden konnte, veröffentlichte Twitter das Werkzeug im August 2011 als Open Source Projekt. Es steht über den Hosting-Dienst GitHub zur Verfügung und wird seit der Veröffentlichung konsequent von freien Entwicklern erweitert.


==== 4.2.2) Funktionen von Bootstrap ====

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:

  * Typografie und Hervorhebungen
  * Formulare
  * Buttons/Schaltflächen
  * Icons
  * Dropdown-Menüs
  * Tabellen
  * Navigationsmöglichkeiten
  * Breadcrumbs
  * Grid-System
  * Pagination
  * Labels und Badgets
  * Prozessleisten
  * Alarmfenster

==== 4.2.3) Aufbau von Bootstrap ====

Bootstrap besteht aus einzelnen Komponenten, die du in deine Website einfügen kannst. Dabei handelt es sich um HTML-Codes, die mit CSS-Klassen und ggf. Javascript-Code ausgestattet sind. Bootstrap 4 ist modular aufgebaut und wird in folgende vier Bereiche gegliedert:

  * Layout
  * Inhalt
  * Komponenten
  * Werkzeuge

=== Layout === 

Das Herzstück von Bootstrap 4 ist das Raster. Standardmäßig verwendet Bootstrap ein 12-spaltiges Raster-Layout mit einer Breite von 1140 Pixel (.container). Dabei wird die Rasterbreite entsprechend der Displaygröße via CSS-Breakpoints angepasst. Eine Alternative bietet die Klasse .container-fluid, welche den Container immer über die komplette Displaygröße darstellt

Ein Raster besteht aus Zeilen (.row) und Spalten (.col), wobei die Spalten mithilfe von CSS-Klassen passend für das jeweilige Endgerät angeordnet werden können.

{{:inf:inf7bi_202021:pasted:20210426-153637.png?700}}


=== Inhalt=== 

Nachdem du das Raster verstanden hast, sollen im Folgenden die Möglichkeiten aufgezeigt werden, wie du den Inhalt deiner Website anpassen kannst.
  * Überschriften
  * Bilder mit Unterschriften
  * Tabellen
  * ...

=== Komponenten ===

Das Herzstück von Bootstrap sind die Komponenten, die dir helfen, deine Website zu strukturieren. 

  * Buttons
  * Forms
  * Breadcrumbs
  * Navbars
  * Accordion
  * ...

{{:inf:inf7bi_202021:pasted:20210426-153811.png?700}}

==== 4.2.4) Vorteile von Bootstrap ====

  * Es eignet sich, um Responsive Designs umzusetzen.
  * Es gibt ein großes Angebot an vorgefertigten Themes und Elementen, die direkt verwendet werden können.
  * Das Framework lässt sich erweitern und anpassen.
  * Das System ist logisch strukturiert und einfach umsetzbar.
  * Es ist durch JavaScript und jQuery-Plugins erweiterbar.
  * Es realisiert eine hohe Zeitersparnis durch vorgefertigte Komponenten.
  * Bootstrap verfügt über eine hervorragende Kompatibilität zu verschiedenen alten und neuen Browsern.
  * Der Wartungsaufwand ist im Vergleich zum Einsatz verschiedener Frameworks geringer.

==== 4.2.5) Nachteile von Bootstrap ====

Bootstrap ist nicht grade klein. Schon die Grundausstattung Bootstrap mit Grid, Typo, Tabellen und Formularen schlägt mit 90K plus zu Buche. Komplett mit jQuery, Glyphicons usw. müssen 350K geladen werden und somit die Ladezeit erhöhen.