Kurt-Tucholsky-Gesamtschule der Stadt Minden - Sekundarstufe I und II
articel
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
<div uk-tooltip="title: Hallo World"></div>
Test video
Test Alert
<div class=alert"alert-primary" role="alert">A simple primary alert—check it out!</div>
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
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>
<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>
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>
Test bootstrap small buttons
<button type="button" class="btn btn-primary btn-sm">Primary</button>
Postanschrift
<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
<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
<span title="Fax" data-uk-tooltip><a class="uk-icon-button" uk-icon="print"></a>
<button class="btn btn-secondary btn-sm"> ... </button></span>
<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
uk-alert
uk-alert-primary
uk-alert-success
uk-alert-warning
uk-alert-danger
Die Homepage der Kurt-Tucholsky-Gesamtschule ist umgezogen und umgestaltet worden.
UIkit.modal(#new-modal-winwow).show();
Neue Homepage
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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)
figur
- (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 ohochgestellt und itiefgestellt
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
- eins
- zwei
- zwei eins
- zwei eins eins
- zwei zwei
- zwei eins
- drei
- vier
- eins
- zwei
- drei
- drei eins
- drei eins eins
- drei zwei
- drei eins
- vier
