Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Bootstrap 3 Grundkurs

Vordefinierte Einstellungen

Testen Sie unsere 2017 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Bootstrap kommt mit eigenen CSS-Stilen – und die sind durch Klassen ganz einfach ansprechbar. Damit entsteht ein stimmiger Gesamteindruck, noch bevor Sie sich weitere Gedanken, etwa über Typographie, machen müssen.
09:48

Transkript

Bootstrap bringt Ihnen einiges an CSS Grundeinstellungen mit. Diese Grundeinstellungen ermöglichen es Ihnen, dass Sie einfach zu arbeiten beginnen können, und von Anfang an einen gewissen Style auf Ihrer Seite vorweisen können, der natürlich sehr dieses Twitter Gesamterlebnis beinhaltet. Aber es ist einfacher, etwas bereits gegebenes, den eigenen Bedürfnissen anzupassen, als wenn man z. B. bei null anfangen müsste. Das interessante bei diesen CSS Grundeinstellungen ist hauptsächlich das, dass man sich grundlegend einmal wenigstens gesehen haben sollte, damit man dann weiß an welchen Rädchen man drehen muss, falls man irgendetwas dran verändern möchte. Die Grundeinstellungen beginnen damit, ich darf Ihnen das vielleicht hier gleich zeigen, das z. B. ein anderes Projekt, was zufällig auch bei GitHub gehostet wird, verwendet wird, nämlich die sogenannte normalize CSS. Das ist ein Projekt, dass versucht prinzipielle Aussagen für ein Web Projekt zu tätigen, und damit eine Unabhängigkeit beim Starten von diesen einzelnen Browser Voreinstellungen zu treffen. Jeder Browser bringt das selber wieder eigene Grundeinstellung mit, und diese normalize CSS tut nichts anderes, als zu versuchen, die alle zurückzusetzen. So das Sie, wenn Sie dann mit Ihrem Design starten, oder wenn Sie mit dem Bootstrap Design starten, auf jeden Fall quasi bei null anfangen können. Was das ähnliche Aussehen in den unterschiedlichen Browsern anbelangt. Ein zweites Detail, was recht spannend ist, ist das es z. B. im body tag vorgesehen ist, dass es auf jeden Fall mal einen weißen Hintergrund gibt. Hier background-color im body tag ist weiß oder auch welche Schriftart mal prinzipiell verwendet wird. Das die prinzipielle Schriftgröße eben bei 14 Pixel liegt und das bei dieser Linienhöhe. Das sind einfach grundlegende Einstellungen, auf die Sie sich verlassen können und an denen Sie wieder ein eigenes Design auch messen können. Es ist z. B. so, dass es eine Voreinstellung gibt, das ist sehr praktisch für, warten Sie mal, ich habe hier schon vorbereitet, für Links, also wie ein Link aussieht in Bootstrap bevor Sie dann vielleicht was anderes von ihm wollen. Und das ist fast klassisch. Nämlich, Sie sehen es hier, es ist farblich anders aber z. B. dieser klassischer Unterstrich für Links kommt erst mit dem Hover Effekt dazu. Das ist also eine von Bootstrap vorgegebene grundlegende Einstellung. Dann, das nächste spannende ist, dass Sie die Möglichkeit haben Bilder sehr, sehr flexibel einzubinden, d. h. Sie geben einem Bild eine Klasse mit, und diese Klasse sorgt dann dafür, dass je nach umgebenden Elternelement dann, das Bild in einer unterschiedlichen Größe dargestellt wird. Auch das möchte ich Ihnen ganz gerne zeigen. Ich fange also z. B. hier auf dieser Höhe der h1 Unterschrift an und sage ich möchte gerne ein Bild einfügen, und dann gebe ich dem Bild natürlich auch noch einen gewissen source code mit. Und meine Bilder liegen jetzt in einer image Datei und das einzige Bild was da im Moment drinnen liegt, ist eben die Kirschblüte. Und wenn Sie das geklärt haben, dann geben Sie dem ganzen noch eine Klasse mit und diese Klasse heißt image-responsive und diese Klasse tut eigentlich nichts anderes, als eine Weite von 100% zu setzen, eine maximale Weite und eine automatische Höhe. Aber das alleine genügt schon, dass Sie einen sehr guten Effekt haben werden, den zeige ich Ihnen auch gleich, ich füge jetzt nur noch hier den Alt ein. alt=responsive. Und dann schauen wir's uns gleich mal an. Ich habe da hinten übrigens jetzt zu einen ähnlichen Text, den kann ich wegtun, den brauche ich bei html5 so nicht. Ich speicher dieses eine Element und jetzt kopiere ich das aber zu Vergleichszwecken auch noch in andere Abteilungen. Z. B. habe ich hier die Nebenspalte und jetzt in dieser Seitenspalte möchte ich das Bild auch einmal einfügen mit denselben Attributen und vielleicht auch noch im ersten Hauptteil. Da mache ich das auch nach dem Artikel. So. Steuerung S ich speicher das alles. Und jetzt sehe ich mir mein Ergebnis auf der Web Seite an. Ich habe also auf der einen Seite das erste Bild, das ist genau so groß wie der Container ist und hier ist dasselbe Bild mit denselben Attributen. Aber, weil das Elternelement eben die Nebenspalte ist, ist das Bild automatisch in dieser Größe eingefügt. Oder hier habe ich eben innerhalb des ersten Hauptteils das Bild eingefügt und da hat es wieder exakt die Größe dieser Spaltenbreite und wenn ich das ganze dann noch versuche zu verkleinern, dann werden Sie merken, dass das Bild in seiner Größe sogar beim Verkleinern der Seiten sich noch mit verkleinern lässt, bis zu einem Punkt wo es dann wahrscheinlich und wesentlich zu klein wäre. D. h. mit diesen einfachen im Bootstrap innen-wohnenden Attributen, können Sie Bilder genau passend einfügen ohne großartig jetzt unterschiedliche Bildgrößen sich selbst erarbeiten zu müssen. Der nächste spannende Punkt betrifft die Typographie. Da gehe ich jetzt mit Ihnen auf die Bootstrap Seite zum Thema CSS, weil da sind wir ja gerade und gehen wir gleich mal hierher. Schauen wir uns eben an. Sie haben vorgegebene Größen für diese einzelnen Unterschrift Ebenen. Oder was ich Ihnen schon erzählt habe, Sie haben einfach diese 14 Pixel Anschrift Größe. Sie können mit einer eigenen Klasse, nämlich mit dieser lead Klasse, bestimmte Absätze hervorheben, da brauchen Sie sonst nicht sehr viel mehr zu tun, als eben einfach den Paragraphen dieses Attribut lead dazu geben. Überhaupt den Bereich der Typographie ist sehr viel gearbeitet worden, was hier unter der Überschrift Emphasis z. B. zu lesen ist, ist das, dass es ja in html, html eigene Texts gibt um bestimmte Aussagen oder Zustände zu treffen, und all diese Texte können Sie verwenden, um Ihren Text etwas interessanter zu gestalten. Und hier haben Sie z. B. das tag, was mit der Bezeichnung small dafür jetzt sofort, dass Text kleiner dargestellt wird, oder Sie können mit strong wieder einen etwas fetter geschriebenen Text erzeugen, wobei es da jetzt von der Semantik spannend ist, während strong früher eher für fett und dick gestanden ist, hat's jetzt eine semantische Bedeutung und steht für wichtig. Wichtig im Absatz. Oder wenn Sie das em tag nehmen, dann steht es für emphasising und ist aber vom Style her dieses schräg gestellte. Wenn Sie sich nicht mehr ganz im klaren sind, welche Attribute das jetzt eventuell sein könnten, dann gibt's auf der Seite von der w3cschule eigene Beispiele. Welches von diesen Abkürzungen wofür steht, und in bewerterweise gibt's dann hier auch diesetry it yourself Abteilung, wo Sie dann selbst die Texte sehen und ausprobieren können wie die funktionieren. Auf jeden Fall mit diesen Style Mitteln können Sie arbeiten ohne großartig das CSS, dass da hinterlegt, verändern zu müssen. Und um zurückzukommen zu Bootstrap, das geht soweit, dass Sie das aligned vom Text z. B. durch ganz einfache Klassen, wie eben text-left für einen links gerichteten Text. text-center für einen zentrierten Text, text-right für einen nach rechten Rand orientierten Text haben. Oder was sehr hübsches und irgendwie sehr typisch für diese Art des Styles. Sie haben eigene Klassen für unterschiedliche Stimmungs-gesteuerte farbliche Unterscheidungen im Text. Das wird uns vielleicht gelegentlich auch in anderen Zusammenhängen begegnen. Aber es ist eben sehr hübsch, dass eben farbliche Unterscheidungen durchaus mit empathischen Reaktionen verbunden werden. Und so gibt es, wenn Sie auf der CSS Seite weiter nach unten schauen einige solche vordefinierte Einstellungen, die Sie nahtlos übernehmen und so verwenden können. Oder Sie haben eben die Chance sich was eigenes zu schaffen und das bestehende zu überschreiben. Sie merken CSS Eigenschaften sind soweit vor eingerichtet, dass Sie sofort zu arbeiten beginnen können und mal schauen können, ob das, was Ihnen da jetzt grundsätzlich geboten wird, dem entspricht was Sie brauchen wollen oder ob Sie dann eigene Einstellungen noch treffen wollen.

Bootstrap 3 Grundkurs

Lernen Sie, wie Sie über Bootstrap 3 mit dem Gridsystem - einem ausgeklügelten Spaltensystem – beliebige Gestaltungsmöglichkeiten schnell und flexibel umsetzen können.

2 Std. 14 min (25 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!