Weshalb Bootstrap so angenehm für die Webentwicklung ist

erstellt am: 21.02.2018 | von: Kristina Schmelzer | Kategorie(n): Blog, Tutorials, We Code It

Bist du noch in den Anfängen deiner Coder-Erfahrung und willst in ein gängiges sowie praktisches Web-Entwicklungstool reinschnuppern? Oder möchtest du einfach aus Interesse verstehen, was programmiertechnisch geschieht bei einer Webentwicklung? Willst du aus Ehrgeiz ein eigenes Web-Projekt selbstständig auf die Beine stellen? Dann kann diese erste Übersicht zu Bootstrap hilfreich für dich sein.

Zu allererstmal…

Was ist Bootstrap?

Es handelt sich hierbei um ein Framework, das von Twitter entwickelt wurde und Open Source ist, das heißt für jeden frei zugänglich und verwendbar. Es verbindet HTML, CSS und JavaScript miteinander und hält zahlreiche CSS und JavaScript basierte Gestaltungsvorlagen bereit. Mit diesen Grundlagen ermöglicht dir Bootstrap designtechnisch einiges aus deinem Webprojekt rauszuholen und kann mit zahlreichen Oberflächengestaltungselementen dienen.

Nutzerfreundlichkeit

Zudem ist es responsive. Das bedeutet, es passt sich der Bildschirmgröße an und präsentiert dir die Oberfläche der Website deinem Bildschirm entsprechend – egal ob du die Seite gerade auf deinem Computerbildschirm, auf deinem Smartphone oder auf einem Tablet anschaust, es wird immer passen und du musst nicht wie bei anderen Websites links und rechts rumscrollen bis du alles erfasst hast. Responsive Designs steigern die Nutzerfreundlichkeit ungemein und es gibt eigentlich nichts Fataleres als eine Website, die nur für einen Computerbildschirm gedacht ist. Damit verscheucht man jegliche User, die durch andere Endgeräte auf die Website gelangen und für diese die Inhalte der Website nur halb so anschaulich angezeigt werden. Somit ist Bootstrap für mobilfreundliche Websites geeignet.

Für jeden was dabei

Das Schöne an Bootstrap ist, dass man eine Auswahl an verschiedensten Styling Elementen hat, die man nach seinem Geschmack wählen kann. Die verschiedenen Themes, Navigationsbars, Covers und andere Gestaltungselemente bieten dir die Möglichkeit das Aussehen an deine Wünsche und Anforderungen anzupassen. Hier ein paar Beispiele:

   

 

Durch die vorgefertigt gestalteten Elemente spart man sich die viele Zeit alles selbst zu entwickeln, und hat um einiges Schneller das komplette Layout einer Homepage erstellt.

 

 

 

 

 

 

 

Unter https://getbootstrap.com/ kannst du ganz unkompliziert starten und kriegst alle nötigen Codes zum Einbinden und Loslegen.

Dort lädst du dir alle CSS, JavaScript-Dateien herunter – einmal in minimierter Form und einmal in der normalen, lesbaren Variante. Zur Info: Diese erkennst du jeweils an der Endung bootstrap.min.css für den minimierten Code und an bootstrap.css für die lesbare Variante.

Nicht zu vergessen ist die JavaScript Bibliothek jQuery, die du für Bootstrap brauchst. Hiermit hast du alle wesentlichen DOM-, Ereignis-, Effekt- und Ajax-Funktionen. Die müsstest du dir einzeln auf jQuery.com runterladen.

Wie beginne ich ein Projekt?

Erst einmal solltest du ein einfaches HTML-Dokument erstellen mit einem Beispielsatz deiner Wahl (oder wie hier mit dem klassichen „Hallo, Welt“ Satz.)

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
</head>
<body>
<h3>Hallo, Welt! <h3>
</body>
</html>

Dir fällt sicherlich auf, dass hier im Head ein sogenannter Viewport gesetzt ist. Dieser Tag sorgt dafür, dass andere mit mobilen Endgeräten deine Website ebenso sehen. Um diese soeben angepriesene Funktionalität jedoch auch benutzen zu können müsst ihr die bootstrap-responsive.css-Datei einbinden. Die JS-Dateien bindest du zum Schluss ein, damit optimierst du die Ladezeit.

Beachte

Folgenden Code musst du in deinen Head setzen, um Bootstrap vollständig zu integrieren und dementsprechend alle Vorteile des Frameworks nutzen zu können:

<link rel=”stylesheet” type=”text/css”href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” />

<scripttype=”text/javascript”type=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js”></script>

Auf der Website kannst du nun alle Funktionen wie die Beispiele von oben einbinden. Alle Codes für Funktionen wie z.B. Buttons und vieles mehr sind auf der bootstrap-Homepage zu finden.

Kommentar schreiben