Test neues UIkit & Bootstrap & Font Awesome

Icons UIkit 3.11.1

  Mail | <a uk-icon="mail"></a>
  Link | <a uk-icon="link"></a>
  Download | <a uk-icon="download"><>/a>
  VideoKamera | <a uk-icon="video-camera"></a>
  Youtube | <a uk-icon="youtube"></a>
  World | <a uk-icon="icon: world"></a>ybr />
  Telefon| <an uk-icon="receiver"></a>
 Fax | <a uk-icon="print"></a>
 Handy | <a uk-icon="phone"></a>
 Handy quer | <a uk-icon="phone-landscape"></a>
 Tablet | <a uk-icon="tablet"></a>
 Tablet quer | <a uk-icon="tablet-landscape"></a>
 Laptop | <a uk-icon="laptop"></a>
 Bildschirm | <a uk-icon="desktop"></a>
 Fernseher | <a uk-icon="tv"></a>
 PDF-Datei | <a uk-icon="filet-pdf"></a>
 Uhr | <a uk-icon="clock"></a>
 Kalender | <a uk-icon="calendar"></a>
>UIkit Alternative: statt <a></a> <span></span> verwenden

Icon Button <span class="uk-icon-button uk-icon-clock"></span>
normal <span class="uk-icon-clock"></span>
ratio=1 <span class="uk-icon-clock"></span>
ratio=2 <span class="uk-icon-clock uk-icon-small"></span>
ratio=2.5 <span class="uk-icon-clock uk-icon-large"></span>
ratio=3 <span class="uk-icon-clock uk-icon-medium"></span>

 <div class="spinner-grow" role="status"></div>

 <div class="spinner-grow text-info" role="status"></div>

 <div class="spinner-grow text-warning" role="status"></div>

 <div class="spinner-grow text-danger" role="status"></div>

<div uk-spinner></div>>

Icons Font Awesome 6.0

 Pointing Hand rechtst | <i class="fa fa-hand-point-right"></i>
 Postanschrift | <i class="fa fa-envelope"></i>
 E-Mail | <i class="fa fa-at"></>
 Person | <i class="fa fa-user"></i>
 Schloss | <i class="fa fa-lock"></i>
  Word-Datei | <i class="fa fa-file-word"></i>
  Excel-Datei | <i class="fa fa-file-excel"></i>
  Powerpoint-Datei | <i class="fa fa-file-powerpoint"></i>
  Bild | <i class="fa fa-image"></i>
  Bilder | <i class="fa fa-images"></i>
  Uhr | <i class="fa fa-clock"></i>
  Kalender | <i class="fa fa-calendar"></i>
  Kalender | <i class="fa fa-calendar-check"></i>
 Fax | <i class="fa fa-fax"></i>
 Telefon | <i class="fa fa-phone"></i>
 Laptop | <i class="fa fa-laptop"></i>
 Desktop | <i class="fa fa-desktop"></i>
 Fernseher | <i class="fa fa-tv"></i>
 Handy | <i class="fa fa-mobile"></i>
 Copyright | <i class="fa fa-copyright;></i>
 Uhr | <i class="fa fa-clock"></i>

<i class="fa fa-clock" ></i>
<i class="fa fa-clock fa-lg"></i>
<i class="fa fa-clock fa-2x"></i>
<i class="fa fa-clock fa-3x"></i>
<i class="fa fa-clock fa-4x"></i>
<i class="fa fa-clock fa-5x"></i>

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-cog fa-spin fa-lg"></i>
<i class="fa fa-cog fa-spin fa-2x"></i>
<i class="fa fa-cog fa-spin fa-3x"></i>
<i class="fa fa-cog fa-spin fa-4x"></i>

 <a uk-icon="icon: home"></a>
 <span uk-icon="icon: home"></span>
 <span uk-icon="home"></span>
 <i class="fa fa-home"></i>

Tooltip

Hoover me

Top Left

Button

Test video

Video 1

Video 2

Test Alert

<div class=alert"alert-primary" role="alert">A simple primary alert—check it out!</div>

Test Badge

Primary Secondary Success Danger Warning Info Light

<span class="badge badge-primary">Primary</span>: Primary

<a href="#" class="badge badge-primary">Primary</a>: Primary

Telefon

  +49 571 82971-0
<span title="Telefon" data-uk-tooltip><a class="uk-icon-button" uk-icon="receiver"></a>
<a class="badge badge-primary"> ... </a></span>

Fax

  +49 571 82971-29
<span title="Fax" data-uk-tooltip><a class="uk-icon-button" uk-icon="print"></a>
<a class="badge badge-success"> ... </a></span>

E-Mail

  Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein.
<span title="E-Mail" data-uk-tooltip><a class="uk-icon-button" uk-icon="mail"></a>
<a href="mailto: ... " class="badge badge-primary"> ... </a></span>

Link

  Homepage der KTG
<span title="Link" data-uk-tooltip><a class="uk-icon-button" uk-icon="link"></a>
<a href="/ ... " class="badge badge-success"> ... </a></span>

Download

  Satzung des Fördervereins
<span title="Download" data-uk-tooltip><a class="uk-icon-button" uk-icon="download"></a>
<a href="/ ... " class="badge badge-info"> ... </a></span>

Video

  Satzung des Fördervereins
<span title="Video" data-uk-tooltip><a class="uk-icon-button" uk-icon="video-camera"></a> 
<a href="/ ... " class="badge badge-warning"> ... </a></span>

Youtube

  Sandbienen
<span title="Youtube" data-uk-tooltip><a class="uk-icon-button" uk-icon="youtube"></a> 
<a href="/ ... " class="badge badge-danger"> ... </a></span>

UIKit buttons

<button class="uk-button uk-button-primary">Primary</button>

Default Primary Secondary Danger Text Link

UIKit labels

GROSSBUCHSTABEN dutch CSS erzwungen!!!
<span class="uk-label label-success">Success</span>

Default Success Warning Danger

lt;span title="Youtube" data-uk-tooltip><a class="uk-icon-button" uk-icon="youtube"></a> 
<a href="/ ... " class="uk-label uk-label-danger"> ... </span></span>

Bootstrap buttons

<button type="button" class="btn btn-primary">Primary</button>

Primary Secondary Success Danger Warning Info Light Dark Link

Test bootstrap small buttons

<button type="button" class="btn btn-primary btn-sm">Primary</button>

Primary Secondary Success Danger Warning Info Light Dark Link

Postanschrift

Kurt-Tucholsky-Gesamtschule | Königswall 10 | 32423 Minden
<span title="Postanschrift" data-uk-tooltip><a class="uk-icon-button" uk-icon="home"></a>
<button class="btn btn-light btn-sm"> ... </button></span>

Telefon

  +49 571 82971-0
<span title="Telefon" data-uk-tooltip><a class="uk-icon-button" uk-icon="receiver"></a>
<button class="btn btn-primary btn-sm"> ... </button></span>

Fax

  +49 571 82971-29
<span title="Fax" data-uk-tooltip><a class="uk-icon-button" uk-icon="print"></a>
<button class="btn btn-secondary btn-sm"> ... </button></span>

E-Mail

  Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein.
<span title="E-Mail" data-uk-tooltip><a class="uk-icon-button" uk-icon="mail"></a>
<button class="btn btn-success btn-sm"><a href="mailto: ... "> ... </a></button></span>

Link

  Homepage der KTG
<span title="Link" data-uk-tooltip><a class="uk-icon-button" uk-icon="link"></a>
<button class="btn btn-warning btn-sm"><a href="/ ... "> ... </a></button></span>

Download

  Satzung des Fördervereins
<span title="Download" data-uk-tooltip><a class="uk-icon-button" uk-icon="download"></a>
<button class="btn btn-danger btn-sm"><a href="/ ... "> ... </a></button></span>

Video

  Satzung des Fördervereins
<span title="Video" data-uk-tooltip><a class="uk-icon-button" uk-icon="video"></a> 
<button class="btn btn-info btn-sm"><a href="/ ... "> ... </a></button></span>

Youtube

  Sandbienen
<span title="Youtube" data-uk-tooltip><a class="uk-icon-button" uk-icon="youtube"></a> 
<button class="btn btn-info btn-sm"><a href="/ ... "> ... </a></button></span>

UIKit labels

<span class="uk-label uk-label-success">Success</span>

Default Success Warning Danger

Test Blöcke

Blick vom Haus der Bildung

Die Homepage der Kurt-Tucholsky-Gesamtschule ist umgezogen und umgestaltet worden.

Öffne modales Fenster

Test Textformatierung

Testseite H1  
ABCDEFGHIJKLMNOPQRSTUVWXYZ abc yqg hlf 0123456789

Testseite H2 
ABCDEFGHIJKLMNOPQRSTUVWXYZ abc yqg hlf 0123456789

Testseite H3  
ABCDEFGHIJKLMNOPQRSTUVWXYZ abc yqg hlf 0123456789

Testseite H4 
ABCDEFGHIJKLMNOPQRSTUVWXYZ abc yqg hlf 0123456789

Testseite H5 
ABCDEFGHIJKLMNOPQRSTUVWXYZ abc yqg hlf 0123456789

Testseite H6 
ABCDEFGHIJKLMNOPQRSTUVWXYZ abc yqg hlf 0123456789

Normaler Absatz
ABCDEFGHIJKLMNOPQRSTUVWXYZ abc yqg hlf 0123456789
abcdefghijklmnopqrstuvwxyz ÄäÖöÜüß .,:;-_§$%& / ( ) [ ] { } 0123456789

Dies ist normaler Text und dies ist eine Link|Dies ist normaler Text und dies ist eine Link

Dies ist normaler Text und dies ist eine primary Link

Dies ist normaler Text und dies ist eine info Link

500 px

600 px

680 px

690 px

700 px

720 px

740 px

750 px

760 px

780 px

800 px

vorvormatiert(pre)

Zitat(blockquote

code

Codebeispiel(samp)

(dl)

definitionsterm(dd)

definitionsterm(dt)

Dieser Text ist small normal

Dieser text ist big normal

Dies ist eine "Link"

Diese Schrift ist normal

Diese Schrift ist kusivx

Diese Schrift ist fett

Diese Schrift ist kusiv und fett

Dieser Text ist unterstrichen

Dieser Text ist durchgestrichen

Diese Schrift ist o^hochgestellt und i_tiefgestellt

Dieser text hat Sonderzeichen äöüß ÄÖÜ ©®@ √¼∑ €§$° +-*/ '´` .:,;

text-primary

text-secondary

text-success

text-info

text-warning

text-danger

text-light 

text-dark

text-white

text-black

text-muted

em element

strong

code element

del element

ins element

mark element

abbr element

dfn element

1. eins
2. zwei
   1. zwei eins
      1. zwei eins eins
   2. zwei zwei
3. drei
4. vier

• eins
• zwei
• drei
  • drei eins
    • drei eins eins
  • drei zwei
• vier