Tem­plate-Styles

Auf dieser Seite werden einige Template-Styles demonstriert.


Text

This is bold and this is strong. This is italic and this is emphasized. This is superscript text and this is subscript text. This is underlined and this is a code snippet for (;;) { ... }.

Here we have A LINK with the css class scrollTo that smoothly scrolls up to an internal link.

A piece of text was highlighted with <span class="coloredTxt">.

This text has the class text-justify and is therefore displayed in justified text. Bla bla bla bla. This text has the class text-justify and is therefore displayed in justified text. Bla bla bla bla.

This is text-right.

This is text-center.

Zitate

Ich habe einen Kurs im Schnellesen mitgemacht und bin nun in der Lage „Krieg und Frieden“ in zwanzig Minuten durchzulesen.
Es handelt von Russland.

_Woody Allen

Überschriften

Level 1

This is a paragraph with the CSS class: lead.

Level 2

Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum.

Level 3

Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit.

Level 4

Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus.

Level 5

Fusce pulvinar ante non sapien.

Level 6

This is a paragraph with the CSS class: small.

Listen

Ungeordnete Listen
sollten die CSS-Klasse listUnordered erhalten.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl.
    • Donec ullamcorper, nulla eu faucibus sagittis.
      • Sed a leo. Suspendisse nisl tellus, volutpat vel.
      • Fusce pulvinar ante non sapien. Aliquam iaculis.
  • Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis.
  • Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu.

Geordnete Listen
können ohne Klassenangabe verwendet werden.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Quisque cursus, mauris nec sagittis dictum.
    1. Donec ullamcorper, nulla eu faucibus sagittis.
    2. Fusce pulvinar ante non sapien.
  3. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis.

Tabellen

Rolle Schauspieler Hauptrolle
(Episoden)
Nebenrolle
(Episoden)
Dr. Leonard Leakey Hofstadter Johnny Galecki 1.01–  
Dr. Dr. Sheldon Lee Cooper Jim Parsons 1.01–  
Penny Hofstadter Kaley Cuoco 1.01–  
Howard Joel Wolowitz, M.Eng. Simon Helberg 1.01–  
Dr. Rajesh „Raj“ Ramayan
Koothrappali
Kunal Nayyar 1.01–  
Dr. Bernadette Maryann
Rostenkowski-Wolowitz
Melissa Rauch 4.04– 3.05–3.14
Dr. Amy Farrah Fowler Mayim Bialik 4.08– 4.01–4.05
Stuart Bloom Kevin Sussman 6.01–6.17, 8.01– 2.20–5.24, 7.02–7.24
Debbie Wolowitz † Carol Ann Susi
(nur Stimme)
  1.07–8.08
Barry Kripke John Ross Bowie   2.12, 2.13, 3.01, 3.09, 4.17,
5.14, 5.17, 5.22, 6.14, 6.20,
7.10, 7.20, 8.10, 8.15, 9.05,
9.06, 9.15, 9.17, 10.09, 11.08

(Daten nur zur Illustration/Demonstration. Quelle: Wikipedia)

Die Tabelle hat die CSS-Klasse respTable und wird dadurch bei zu schmalen Viewports horizontal scrollbar.

Boxen

Um Boxen mit jeweils (nebeneinanderliegend) gleicher Höhe, flexibel und zentriert zu verwenden, muss der betreffende Bereich von einem DIV umschlossen werden.
<div class="row flexi"></div>

Die einzelnen Boxen darin erhalten die gewünschte col-Klasse für ihre Breite und zusätzlich die Klasse box. Der eigentliche Inhalt wird dann in <div class="boxContent"></div> gesetzt.

<div class="col-md-4 col-sm-6 box">
<div class="boxContent">

... Inhalt ...

</div>
</div>
<div class="col-md-4 col-sm-6 box">
<div class="boxContent">

... Inhalt ...

... mehr Inhalt ...

... noch mehr Inhalt ...

</div>
</div>
<div class="col-md-4 col-sm-6 box">
<div class="boxContent">

... Inhalt ...

... mehr Inhalt ...

</div>
</div>
<div class="col-md-8 col-sm-12 box">
<div class="boxContent">

... Inhalt ...

</div>
</div>
Please activate JavaScript in your browser! —
Click here for the SiteMap.