Thema: Vorlage für den Einsatz von CSS-Elementen
Hinweis 1: Die grünen und die roten Texte sind jeweils die Kommentare und die CSS- und JQuary-Quelldateien, die in dieser Website eingesetzt wurden.
Hinweis 2: Die CSS-Komponenten finden Sie unter dem Abschnitt 2. Alle CSS-Komponenten, die in diese IT-Plattform eingesetzt wurden, sind unter den Punkten 2.1 - 2.15 dargestellt. Wenn Sie die Quelldateien von Ihrem Bereich einbinden wollen, dann können Sie sie hier herunterladen und in Ihren Bereich speichern.
Dies soll hier unten in dem MovieClip (CSS-Komponenten einbinden) demonstriert werden.
MovieClip zum Einbinden von den CSS- und JS-Dateien
<!-- 1. Teil: Das HTML-Grundgerüst besteht aus HTML-, HEAD-, META-, TITLE-Tags.
In den HEAD-Bereich können META-Daten und CSS-Daten bzw. Dateien eingetragen werden.
Wenn Sie die in dieser Website verwendeten CSS-Dateien direkt benutzen wollen, können
Sie sie zwischen dem öffnenden <head>-Tag und schließenden </head>-Tag eintragen. -->
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta name='description' content=''>
<meta name='author' content='Ihr Name' >
<title>Titel Ihrer Website</title>
<link href='http://www.bandegani.de/itkurs/css/bootstrap.min.css' rel='stylesheet'>
<link href='http://www.bandegani.de/itkurs/css/startmin.css' rel='stylesheet'>
<link href='http://www.bandegani.de/itkurs/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
</head>
<!-- 2. Teil: Im Body-Bereich sollen Menü, Navigation und Content aufgeteilt und positioniert werden.
Dafür sind u.a. die Navbar, Rasterklassen (Grid), footer usw. geeignet. -->
<body>
<!-- Um z.B. in einer Zeile 3 Panels zu positionieren, zeigt folgendes Beispiel: -->
<!-- Anfang der ersten Zeile -->
<div class='row show-grid'>
<!-- Anfang des 1. Grid für Mobile und desktop -->
<div class='col-xs-6 col-sm-3'>
<h4>1. Ausgabe für Primary Panels</h4>
<!-- Anfang des 1. Panels -->
<div class='panel panel-primary'>
<div class='panel-heading'>
Olives und Weißes Damen T-Shirt von Gerry Weber
</div>
<div class='panel-body'>
<img style='width:360px; height:480px;' src='http://www.bandegani.de/itkurs/images/gerryweberxxa.jpg'>
</div>
<div class='panel-footer'>
Damen T-Shirt mit Rundausschnitt und glitzem Muster, Olive, 100 % Baumwolle G
</div>
</div>
<!-- Ende des 1. Panels -->
</div>
<div class='col-xs-6 col-sm-3'>
<h4>2. Ausgabe für Danger Panels</h4>
<!-- Anfang des 2. Panels -->
<div class='panel panel-danger'>
<div class='panel-heading'>
Purples Damen T-Shirt von H&M
</div>
<div class='panel-body'>
<img style='width:360px; height:480px;' src='http://www.bandegani.de/itkurs/images/hundmxbx3.jpg'>
</div>
<div class='panel-footer'>
Damen T-Shirt mit V-Ausschnitt,Purple, 50% Bio-Baumwolle, 47% Baumwolle und 3% Elasthan
</div>
</div>
<!-- Ende des 2. Panels -->
</div>
<div class='col-xs-6 col-sm-3'>
<h4>3. Ausgabe für Success Panels</h4>
<!-- Anfang des 2. Panels -->
<div class='panel panel-success'>
<div class='panel-heading'>
Weißes Herren Poloshirt von Mikava
</div>
<div class='panel-body'>
<img style='width:360px; height:480px;' src='http://www.bandegani.de/itkurs/images/mikavaxxa.jpg'>
</div>
<div class='panel-footer'>
Herren Poloshirt mit Kragen, kurzen Ärmeln und Knopfleiste vorne, Weiß, 100% Polyester
</div>
</div>
<!-- Ende des 3. Panels -->
</div>
<!-- Ende des 1. Grid für Mobile und desktop -->
</div>
<!-- Ende der ersten Zeile -->
<!-- Anfang der zweiten Zeile -->
<div class='row show-grid'>
<div class='col-md-3 col-md-offset-3'>
<h4>4. Ausgabe für Warning Panels</h4>
<div class='panel panel-warning'>
<div class='panel-heading'>
Dunkelblaues Herren T-Shirt von Domyos
</div>
<div class='panel-body'>
<img style='width:360px; height:480px;' src='http://www.bandegani.de/itkurs/images/domyosxbx.jpg'>
</div>
<div class='panel-footer'>
Herren T-Shirt mit Rundhalsausschnitt, Dunkelblau, 75% Polyamide und 25% Elasthan
</div>
</div>
</div>
</div>
<!-- Ende der zweiten Zeile -->
<!-- 3. Teil: Wenn Sie die in dieser Website verwendeten jQuary-Dateien direkt benutzen wollen, können
Sie sie vor dem schließenden </body>-Tag eintragen. -->
<!-- jQuery -->
<script src='http://www.bandegani.de/itkurs/js/jquery.min.js'></script>
<!-- Bootstrap Core JavaScript -->
<script src='http://www.bandegani.de/itkurs/js/bootstrap.min.js'></script>
<script src='http://www.bandegani.de/itkurs/js/startmin.js'></script>
<script>
// tooltip demo
$('.tooltip-demo').tooltip({
selector: '[data-toggle=tooltip]',
container: 'body'
})
// popover demo
$('[data-toggle=popover]').popover()
// carousel demo
$('.carousel').carousel()
</script>
</body>
</html>
Die Ausgabe für das o.g. Beispiel
1. Ausgabe für Primary Panels
Olives und Weißes Damen T-Shirt von Gerry Weber
2. Ausgabe für Danger Panels
Purples Damen T-Shirt von H&M
3. Ausgabe für Success Panels
Weißes Herren Poloshirt von Mikava
4. Ausgabe für Warning Panels
Dunkelblaues Herren T-Shirt von Domyos
