Thema: Einführung in CSS und jQuery


Was ist Boottrap?
Wenn Sie in Ihrem Projekt CSS-Elemente hinzufügen möchten, gibt es fertiges Frontend-Framework wie Boottrap, mit dem ein Websites schnell gestaltet werden kann. Es werden HTML- und CSS-Vorlagen bereitgestellt um unterschiedlichste Website-Elemente darzustellen. Dazu gehören Formulare, Buttons, Tabellen, Navigation sowie ein Grid-System für Layouts. Darüber hinaus ist es durch JavaScript-Module möglich, Interaktionen (z. B. eine Bilder-Slideshow, Tabs und Dialogboxen) in die Website einzubinden. Zudem bietet Bootstrap alle Voraussetzungen um responsive Webdesigns zu gestalten, die dann auch auf Smartphones oder Tablets optimal dargestellt werden.


Was ist jQuery?
jQuery ist eine JavaScript-Bibliothek, die Webentwicklern die Arbeit mit JavaScript erleichtern soll. Sie überbrückt technische Unterschiede zwischen verschiedenen Browsern und ermöglicht komfortablen und kompakten Code, der im direkten Vergleich zu JavaScript häufig sehr viel kürzer ist. JavaScript war in der Vergangenheit insofern problematisch in der Webentwicklung, als dass verschiedene Browser teils sehr unterschiedliche Ergebnisse mit ein und demselben Code lieferten. Bestimmte native JavaScript-Funktionen funktionieren in älteren Browsern zum Beispiel schlicht nicht. Wer mit einer Webanwendung alle Browser unterstützen will, muss demzufolge häufig spezielle Weichen in seinen Skripten vorsehen, die je nach Browser und Version auf unterschiedlichen Wegen zum gewünschten Ergebnis führen – oder riskieren, dass bestimmte Nutzer die Webseite eventuell nicht verwenden können. Frameworks wie jQuery sind ein Ansatz, dem Entwickler diese mühsame und fehleranfällige Mehrarbeit abzunehmen. Die Unterschiede zwischen verschiedenen Browsern werden intern behandelt, während Entwickler nur noch ein einziges, allgemeingültiges Skript schreiben.

Verwendete Frameworks für dieses Websites

In diesem Websites wurden Bootstrap und dazugehöriges jQuery 3.0 eingesetzt. Wenn Sie die Quelldateien verwenden wollen, dann können sie hier klick herunterladen.


Einsatz von CSS
1. Möglichkeit: Sie können z.B. einfach das Stylesheet mit dem <link> Tag in Ihren <head> - Bereich einbinden, um CSS-boottrap zu laden.


<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' integrity='sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh' crossorigin='anonymous'>

2. Möglichkeit: Sie können Boottrap herunterladen, dann entpacken Sie die Datei (boottrapneu.zip) und übertragen Sie die entpackten Dateien mit LAB-FTP in Ihren privaten Bereich. Dann können Sie z.B. die CSS-Dateien in Ihren <head> Bereich einbinden.
Hinweis: Da sich in den Ordnern css, js und font viele Dateien befinden, kann die Übertragung in Ihren Bereich einige Minuten dauern!


<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='Mehdi Bandegani' >
	<title>IT-Kurs by Mehdi Bandegani</title>

<link href='css/bootstrap.min.css' rel='stylesheet'> <link href='css/metisMenu.min.css' rel='stylesheet'> <link href='css/timeline.css' rel='stylesheet'> <link href='css/startmin.css' rel='stylesheet'> <link href='css/morris.css' rel='stylesheet'> <link href='css/dataTables.bootstrap.css' rel='stylesheet'> <link href='css/dataTables.responsive.css' rel='stylesheet'> <link href='css/bootstrap-social.css' rel='stylesheet'> <link href='css/font-awesome.min.css' rel='stylesheet' type='text/css'>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js'></script> <![endif]--> </head> <body>

3. Möglichkeit: Sie können den Ort der Boottrap-Dateien in Ihre Hauptdatei (Website) wie unten einbinden!


<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='Mehdi Bandegani' >
	<title>IT-Kurs by Mehdi Bandegani</title>

<link href='http://www.bandegani.de/itkurs/css/bootstrap.min.css' rel='stylesheet'> <link href='http://www.bandegani.de/itkurs/css/metisMenu.min.css' rel='stylesheet'> <link href='http://www.bandegani.de/itkurs/css/timeline.css' rel='stylesheet'> <link href='http://www.bandegani.de/itkurs/css/startmin.css' rel='stylesheet'> <link href='http://www.bandegani.de/itkurs/css/morris.css' rel='stylesheet'> <link href='http://www.bandegani.de/itkurs/css/dataTables.bootstrap.css' rel='stylesheet'> <link href='http://www.bandegani.de/itkurs/css/dataTables.responsive.css' rel='stylesheet'> <link href='http://www.bandegani.de/itkurs/css/bootstrap-social.css' rel='stylesheet'> <link href='http://www.bandegani.de/itkurs/css/font-awesome.min.css' rel='stylesheet' type='text/css'>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js'></script> <![endif]--> </head> <body>

Einsatz von JS

Viele Boottrap Komponenten erfordern die Verwendung von JavaScript, um zu funktionieren. Insbesondere benötigen sie jQuery, Popper.js und die JavaScript-Plugins. Platzieren Sie die folgenden <scripts> am Ende Ihrer Seiten direkt vor dem schließenden < /body> -Tag, um sie zu aktivieren. jQuery muss zuerst kommen, dann Popper.js und dann unsere JavaScript-Plugins.

1. Möglichkeit: Sie können z.B. einfach das JavaScript vor dem schließenden < /body> -Tag in Ihre HTML-Datei einbinden, um JS-Dateien zu laden.


<script src='https://code.jquery.com/jquery-3.4.1.slim.min.js' integrity='sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n' crossorigin='anonymous'></script> <script src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js' integrity='sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo' crossorigin='anonymous'></script> <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js' integrity='sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6' crossorigin='anonymous'></script>

2. Möglichkeit: Wenn Sie Boottrap von dieser Website heruntergeladen haben, können Sie z.B. die JS-Dateien vor schließenden </ body> -Tag in Ihre Hauptdatei (Website) einbinden.


<!-- jQuery --> <script src='js/jquery.min.js'></script> <!-- Bootstrap Core JavaScript --> <script src='js/bootstrap.min.js'></script> <!-- Metis Menu Plugin JavaScript --> <script src='js/metisMenu.min.js'></script> <!-- Morris Charts JavaScript --> <!--script src='js/raphael.min.js'></script> <script src='js/morris.min.js'></script> <script src='js/morris-data.js'></script--> <!-- Custom Theme JavaScript --> <script src='js/startmin.js'></script> <!-- DataTables JavaScript --> <script src='js/dataTables/jquery.dataTables.min.js'></script> <script src='js/dataTables/dataTables.bootstrap.min.js'></script> <!-- Flot Charts JavaScript --> <script src='js/flot/excanvas.min.js'></script> <script src='js/flot/jquery.flot.js'></script> <script src='js/flot/jquery.flot.pie.js'></script> <script src='js/flot/jquery.flot.resize.js'></script> <script src='js/flot/jquery.flot.time.js'></script> <script src='js/flot/jquery.flot.tooltip.min.js'></script> <script src='js/flot-data.js'></script> </body> </html>

3. Möglichkeit: Sie können den Ort der JavaScript-Dateien (diese Website) in Ihre Website wie unten einbinden!


<!-- 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> <!-- Metis Menu Plugin JavaScript --> <script src='http://www.bandegani.de/itkurs/js/metisMenu.min.js'></script> <!-- Morris Charts JavaScript --> <!--script src='http://www.bandegani.de/itkurs/js/raphael.min.js'></script> <script src='http://www.bandegani.de/itkurs/js/morris.min.js'></script> <script src='http://www.bandegani.de/itkurs/js/morris-data.js'></script--> <!-- Custom Theme JavaScript --> <script src='http://www.bandegani.de/itkurs/js/startmin.js'></script> <!-- DataTables JavaScript --> <script src='http://www.bandegani.de/itkurs/js/dataTables/jquery.dataTables.min.js'></script> <script src='http://www.bandegani.de/itkurs/js/dataTables/dataTables.bootstrap.min.js'></script> <!-- Flot Charts JavaScript --> <script src='http://www.bandegani.de/itkurs/js/flot/excanvas.min.js'></script> <script src='http://www.bandegani.de/itkurs/js/flot/jquery.flot.js'></script> <script src='http://www.bandegani.de/itkurs/js/flot/jquery.flot.pie.js'></script> <script src='http://www.bandegani.de/itkurs/js/flot/jquery.flot.resize.js'></script> <script src='http://www.bandegani.de/itkurs/js/flot/jquery.flot.time.js'></script> <script src='http://www.bandegani.de/itkurs/js/flot/jquery.flot.tooltip.min.js'></script> <script src='http://www.bandegani.de/itkurs/js/flot-data.js'></script> </body> </html>


Vorlage

Stellen Sie sicher, dass Ihre Seiten mit den neuesten Design- und Entwicklungsstandards eingerichtet sind. Dies bedeutet, dass Sie einen HTML5-Doctype verwenden und ein Ansichtsfenster-Meta-Tag einfügen, um ein korrektes Reaktionsverhalten zu erzielen. Wenn Sie alles zusammenfügen, soll dann Ihre Seite so aussehen:


<!doctype html> <html lang='en'> <head> <!-- Required meta tags --> <meta charset='utf-8'> <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'> <!-- Bootstrap CSS --> <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' integrity='sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh' crossorigin='anonymous'> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src='https://code.jquery.com/jquery-3.4.1.slim.min.js' integrity='sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n' crossorigin='anonymous'></script> <script src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js' integrity='sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo' crossorigin='anonymous'></script> <script src='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js' integrity='sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6' crossorigin='anonymous'></script> </body> </html>