Was ist Bootstrap?
Wenn Sie in Ihrem Projekt CSS-Elemente hinzufügen möchten, gibt es fertiges Frontend-Framework wie
Bootstrap,
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 Bootstrap herunterladen, dann entpacken Sie
die Datei (boottrap.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/startmin.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 Bootstrap-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/startmin.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>
Viele Bootstrap 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 Bootstrap 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>
<script src='js/startmin.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/startmin.js'></script>
</body>
</html>
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>