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