Schulwebrahmen "Isa"
Es folgen einige CSS Klassen, die mir wichtig erscheinen.
Hier einige Schriftformatierungen.
Dieser Textblock wurde mit der Klasse lead versehen, welche die Schrift größer macht oder welche es macht, dass die Schrift so aussieht, wie sie hier aussieht. Es macht zwar keinen Sinn, dass ich hier das Offensichtliche erkläre, aber es ist vielleicht immer noch besser als Lorem Ipsum lorem ipsum, das wird auch langweilig.
Der Text da oben ist mit class lead versehen dieser hier nicht.
Aber dieser Text hier ist mit dem Tag <small> versehen. Das kennt man vielleicht schon aus anderen Seiten, Sites, Homepages oder Webseiten. Wussten Sie schon dass Webseiten in der Steinzeit vollständig mit dem Mund gemalt wurden. Dazu wurden die Pixel in den Mund genommen und mit gleichmäßigen Blasen auf die Felswand aufgeblasen. Daher kommt auch der Ausdruck: "Mundart." Im Mittelalter wurde diese Technik abgelöst durch den Webstuhl. Daher auch die Bezeichnung Webseiten. In den 50er Jahren war der Schulwebrahmen für Kinder ein beliebtes Weihnachtsgeschenk. Auch aus dieser Zeit gibt es noch viele Webseiten im WWW, denn es wurde weltweit gewebt. Die Seiten aus den Webrahmen nennt man Frameset. Heute sind Framesets und Kinderarbeit verpönt. So etwas wird nicht mehr gern gesehen.
Die Klassenbezeichnungen gibt es in ähnlicher Form auch für buttons, badges, lables und andere Elemente.
muted
text-warning
text-error
text-info
text-success
text-left ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
text-right, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
text-center Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Das Bootstrap Jumbotron ist ein div mit der Klasse class="jumbotron" In Bootstrap 2.3.2 hieß es class="hero-unit". Das erzeugt einen Textblock, der besonders herausgestellt wird. Die Schrift wird größer, die Innenabstände sind sehr groß.
Siehe auch die CSS Attribute, die man Bildern hinzufügen kann. Bootstrap CSS Image Responsive.
Durch das Attribute img-responsive, werden Bilder auf 100% ihres Elternelements skaliert, Die Größe des Bildes geht aber nicht über seine Originalgröße hinaus.
<img src="..." class="img-responsive" alt="Finn Dog">
Will man etwas zentrieren kann man die Klasse center-block nutzen.
<img src="..." class="img-responsive center-block" alt="Finn Dog">
Man kann den Inhalt einer Seite zentrieren, indem man ihn ein einen .container einschließt Container setzen max-width passend zu den media-query breakpoints, damit sie zum grid system passen. Container drüfen nicht ineinander verschachtelt werden.
<div class="container>....</div>
Es gibt ein paar Hilfsmittel, mit denen man sich ein eigenes Farbschema erstellen kann. Eine Möglichkeit ist Less. Siehe dazu diese Seite, sie gibt einen guten Überblick.
ich kompliriere mir die CSS Datei mit der Less Erweiterung von DMX-Zone oder mit Crunch. Siehe dazu mein Videotutorial. Eine schöne Möglichkeit ein generelles Farbschema anhand der Farben eines Bildes zu erzeugen gibt es bei Lavish. Da die Lavish Version etwas hinterherhinkt gehe ich folgendermaßen vor. Ich erzeuge mir die variables.less von Lavish. Dann öffne ich die Original variables.less von Bootstrap und ersetze folgende Zeilen durch die Lavish Zeilen.
| variables.less | |
|---|---|
| Bootstrap v3.1.1 | Lavish v.3.0.0 |
| 469- 483 | 365- 379 |
| 10-35 | 12-37 |