Bootstrap 3 Layout lernen – mit Beispielen

Bootstrap 3 Layout einfach lernen – geht das?

Ja, ganz sicher. Auch wenn Bootstrap 3 viele Möglichkeiten bietet, ist das Layout echt einfach aufgebaut. Die Spalten: “cols” in Bootstrap 3 sind mit Prozentangaben und Floats (floats tutorial) realisiert. Weil floats auch in den alten Browers am besten unterstützt wurden. Du erfährst in diesem oder durch diesen Artikel, alles was du wissen musst, um Webseiten mit Bootstrap 3 zu erstellen. Die von Boostrap 3 mitgelieferten Beispiele erläutere ich auch und was das für deine Webseiten entwicklung mit Bootstrap 3 bedeutet. Bootstrap 3 examples, in “bootstrap3.4.1/docs/examples/” Ordner.

Bootstrap 3 unter die Lupe genommen.

Schwierigkeitsgrad: “durchschnittlich” Um diesen Artikel zu verstehen, solltest du in HTML,CSS und Javascript fit sein. Falls du die Beispiele nicht verstehst, hier die Links um einfach und schnell Html oder CSS zu lernen:
Link zu Html lernen
Link zu Css lernen

Wozu Boostrap 3 2020 lernen und nutzen?

Wozu Bootstrap3 2020 lernen und nutzen? Ist das nicht schon aus der Mode gekommen? Immerhin gibt es mittlerweile Bootstrap 4, noch besser, noch toller!!! Ja das stimmt! Doch warte mal kurz? Hast du da nicht was vergessen???. He…? Ja was denn? Bootstrap 4 unterstützt die Browser ab IE10 und größer. Ja, du hast richtig gehört. Deshalb, wenn du auch ältere Browser unterstützen möchtest, ab dem IE8, dann kannst du Bootstrap 3 auch 2020 nutzen. Und wenn du Bootstrap 3 über diesen Artikel hier einfach schnell gelernt hast, kanns du auch mit Bootstrap 4 Webseiten erstellen.

Was ist Bootstrap 3?

Bootstrap 3 ist schnell und einfach zu erlernen. Bootstrap 3 ist ein Grid-Template mit Html, Css und jQuery gebaut. Es sind nur ein paar Grundlagen nötig um Webseiten damit zu erstellen. Nach diesem Artikel bist du Bootstrap 3 Meister.

Das wichtigste in Bootstrap 3

Nach diesem Artikel weißt du wie Bootstrap3 aufgebaut ist und kannst es dann an deine Bedürfnisse anpassen. Ich zeige dir wie das geht und warum das so geht.

Gitterlayout:

Du hast vielleicht schon gehört, Bootstrap 3 wurde anhand eines Gitter-Layouts erstellt. Das bedeutet, eine Spalte am Bildschirm wurde in mehrere Spalten in Prozenten unterteilt, damit sich diese Spalten an vorhandene Bildschirmbreiten im Verhältniss zur vorhandenen Bildschirmbreite anpassen. Gehn wir gleich in die Praxis über. Bootstrap 3 macht es möglich! 😉

Die “col-1-col-12” Klassen in Bootstrap:

Das wichtigste am Bootstrap 3 Layout sind die “div” Elemente mit ihren Klassen “<div class=’col-1 bis col 12′>…</div>. So werden in Bootstrap 3 Spalten erzeugt. Die Summe dieser Spalten in einer Reihe muss immer 12 ergeben. Zum Beispiel: (12 mal col-1) Klasse, oder (2 mal col-6 Klasse) oder (4 mal col-3 Klasse) und und und…

Was bestimmt die Breite des Bootstrap3 Templates im Browser? Bestimmen die Spalten (“cols”) die Breite der Bootstrap3 Seite im Browser? Probieren wir es aus!

Hier zwei Spalten mit (2x col-6):

zwei spalten mit bootstrap3
zwei bootstrap3 spalten mit col-6 und col-6

Bei glitch kannst du das geschriebene ausprobieren.
https://glitch.com/~luxurious-panoramic-ceres
Geben wir zum Beispiel mehr als die Summe von 12 bei den “cols” Spalten an z.B col-8 und col-8, macht 16.
Dann sehen wir, wir haben nur die Spalten kaputt gemacht, das Template insgesamt ist nicht breiter geworden. Schauen wir uns die .”cols” im “bootstrap.css” code mal an: “.col-xs-1” oder .col-lg-1″ oder auch “.col-md-1” sind gleich breit in Prozent.

Wozu der ganze Umstand mit den verschiedenen “cols-…” Bezeichnungen, wenn die Spalten sowieso die selben Werte für die Breite haben?

Und die Auflösung des Rätsels ist ganz einfach: “col-lg” bis “col-sm” verwenden “Mediaqueries” (@media screen and …) und bei kleinen Handybildschirmbreiten bestimmen die media queries die Breite des Bildschirms und nicht die “cols-xs..”. Und das ist ganz toll! Und ganz, ganz wichtig! Verändern wir die breiten der Mediaqueries “Mediaqueries (@media screen and…), so verändern wir auch die Breite unserer Spalten und das ohne unsere Spalten aus versehen kaputt zu machen und die Spalten passen sich im gegebenen Verhältnis zueinenader an. Probier es aus 😉

Bootstraps 3 Beispiele unter die Lupe genommen

Ich habe Bootstrap nie kapiert, bis ich die Beispiele unter die Lupe genommen habe. Sich die Bootstrap Beispiele mal genauer anzuschauen ist wirklich das Beste was du machen kannst um Bootstrap zu verstehen. Wir schauen uns die Beispiele an, die beim kompletten Download von Bootstrap 3 angeboten werden. In dem Ordner “docs” ist der “examples” Ordner, hier findest du die Beispiele. Wir besprechen, wie die Templates realisiert wurden.
Zum Bootstrap 3 download.

Bootstrap Blog Beispiel:
Link zum Bootstrap Blog Example

Die Navigation in “.blog-masthead” wurde vom Entwickler erstellt, ohne die mit Bootstrap mitgelieferten Navigationsvariationen einzusetzen. Die Bootstraps Container Klasse wird verwendet um die Navigation und den gesamten Inhalt zu zentrieren. In den Spalten “.col…” sind verschiedene Texte, das schaut ja soweit recht simpel aus. Und dank des neuen Box-Models seit CSS3 “box-sizing: border-box;” verändern die seitlichen Margins die Breite des “.sidebar-module” in “blog.css”, was sonst zu einem Umbruch der Spalten führen würde. Wozu dann überhaupt Bootstrap 3 für so ein einfaches Blog-Template verwenden?
Warum nicht gleich alles selbst machen? Du sparst dir Zeit, viel von dem Bootstrap3 Code müsstest du eh schreiben. Gerade bei geringem Verändern des Bootstrap3 Css kannst du davon ausgehen, das deine Seite auf den von Bootstrap getesteten Browsern einwandfrei dargestellt wird. Du sparst dir also viel Zeit und Aufwand. Bedenke, wir sind Menschen, wir machen Fehler, jedes Rumwurschtelt hat Potenzial für neue Fehler.

Bootstrap Carousel Beispiel:
Link zum Bootstrap Caroussel Example

Durch die “container” Klasse wird dem Template wieder die Breite vergeben und der container selbst wird zentriert und Bootstraps Navigation wird verwendet. Bei dieser Navigation ist gleich ein Dropdown Menu mit dabei, damit bei sehr schmalen Bildschirmbreiten ein”off-canvas” menu erscheint. Das ist richtig toll!
Spart viel Aufwand und Zeit. Der Carouselslider lässt sich über Htmlelemente und Dataattribute schnell konfigurieren und das Aussehen per Css anpassen. In der Item Klasse können wir statt “<div class=’carousel-caption’>”, auch unsere eigenen Elemente verwenden und diese beliebig anpassen.

Bootstrap Cover Beispiel:
Link zum Bootstrap Cover Example

Dieses Template ist besonders, weil für die Positionierung ein “Div Element” über die ganze Bildschirmbreite gezogen wird. Dieses ist mit der Css3 Displayeigenschaft “table-cell” versehen, damit der Inhalt vertical zentriert werden kann. Es ein Template, das ohne “col-…” Klassen auskommt.

Bootstrap Dashboard Beispiel:
Link zum Bootstrap Dashboard Example

Dieses Template ist besonders cool, weil hier nur die sidebar mit “position: fixed” and Ort und Stelle gehalten wird beim scrollen und die Navigation gestaltet wurde, den Rest macht Bootstrap. Auch die Gestaltung der gestriffelten Tabellen macht Bootstrap mit der Klasse “table-striped” und die macht das mit “nth-child” CSS3 Einstellung, was haufen Arbeit spart, denn ohne CSS3 müsste jedes einzelde “td” Tag mit einer Klasse gestaltet werden.

Bootstrap Grid Beispiel:
Link zum Bootstrap Grid Example

Das Besondere an den Gridbeispielen ist die Info über die Offset, Pull und Push Klassen. Offset ist nichts anderes als ein “margin-left” genauso breit wie eine Spalte mit derselben Nummer. Die Klasse “pull-right” hat den Wert “float: right” und “pull-left” hat den Wert “float: left” ist im CSS auf “!important” gesetzt, überschreibt das float der “cols” Spalten, tauscht damit die Reihenfolge der Spalten aus. Die Spalten “col-x-push”sind mit den Werten “left: x%” belegt und die Spalten “col-x-pull” mit den Werten “right: x%” und können in den mit “position: relative” gesetzten cols benutzt werden um die Positionen der Spalten links order rechts zu bestimmen.

Bootstrap Navigation Navbar Beispiel:
Link zum Boostrap Navbar Example

In die Navbar lässt sich ein Off-Canvas Dropdown Menü und auch ein Dropdown Menü schnell integrieren. Dabei sollte Bootstrap Javascript “bootstrap(.min).js” in die Html Datei integriert sein, damit die Navbar auch einwandfrei funktioniert. Und mit von Bootstrap mitgelieferten Methoden und Klassen lässt sich noch mehr damit machen.

Bootstrap Offcanvas Beispiel:
Link zum Bootstrap Offcanva Example

Das Offcanvas mit der Toggle Nav wird mit der Zugabe einer “.active” Klasse über Javascript und ein wenig CSS realisiert. So, das wesentliche über die Bootstrap 3 Layouterstellung habe ich hier nun erläutert. Sollte dir was unklar sein, schreibs in die Kommentare 😉

Wenn du mit Bootstrap 3 Layouts erstellen kanns, kannst du das auch mit Bootstrap 4.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Please reload

Please Wait