Quick-Fit Schnürsystem von Salomon

Bootstrap - Responsives Design


Autor: D. Supper, Elektronikschule Tettnang.

Erstelle responsive, mobile-first Internetseiten. Bootstrap ist ein CSS-System, mit responsivem Design. Wie beim "Quick Fit Schnürsystem" von Salomon, bei dem sich durch den Zug an einer Position, der gesamte Schuh anpasst, wird durch Bootstrap der Inhalt automatisch einer beliebigen Bildschirmgröße angepasst.

In diesem Artikel wird das HTML-Grundgerüst für Bootstrap eingeführt. Eine responsive Navbar und Bilder gehören ebenso dazu, wie das Rasterlayout mit mehreren Spalten in Abhängigkeit der Bildschirmgröße. Darüber hinaus werden Klassen für Tabellen und Formulare vorgestellt.



<!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>

Als Vorlage kann das HTML-Grundgerüst von Bootstrap verwendet werden. Das <meta>-Tag wird für das responisve Design benötigt. Man beachte, dass das Bootstrap-CSS-Stylesheet vor allen anderen Stylesheets geladen werden muss.

Die Javascript-Dateien werden am Ende direkt vor dem </body>-Tag plaziert und zum Schluß geladen. Dies optimiert die Ladezeit der Seite, da Javascript erst nach dem Laden aller anderen Komponenten benötigt wird.

Layout - Container und Raster-Layout



Das Basic-Layout wird mit Container-Klassen realisiert. Hierdurch wird der Randabstand gesteuert. Darüber hinaus sind sie die Basis für das Raster-Layout:
<div class="container">
  Lorem ipsum ...
<div>

Das Raster-Layout stellt den Inhalt je nach Displaygröße in unterschiedlicher Anzahl an Spalten dar:
<div class="container">
  <div class="row">
    <div class="col-sm">
      Eine von zwei Spalten
    </div>
    <div class="col-sm">
      Eine von zwei Spalten
    </div>
  </div>
</div>


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


Eine von zwei Spalten


Eine von zwei Spalten


Inhalt - Bilder und Tabellen



Krokodil

OSI TCP-IP
Network Internet

Mit der Klasse .img-fluid werden Bilder responsiv eingebunden.
<img src="..." class="img-fluid" alt="Responsive image">

Thumbnails:
<img src="..." alt="..." class="img-thumbnail">

Mit der Klasse .table werden Tabellen eingebunden. Man beachte, dass Tabellen mit mehr als 2 oder 3 Spalten in der Regeln nicht mehr auf mobilen Endgeräten dargestellt werden können.
<table class="table">
  <tr>
    <th>OSI</th>
    <th>TCP-IP</th>
  </tr>
  <tr>
    <td>Network</td>
    <td>Internet</td>
  </tr>
</table>

Komponenten - Navbar und Formulare



Navigationsbar:

			
<nav class="navbar">
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarNavDropdown">
		<ul class="navbar-nav">
		<li class="nav-item active">
			<a class="nav-link" href="#">Home</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#">OSI</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#">TCP/IP</a>
		</li>
		</ul>
	</div>
</nav>

Formular:

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>



We'll never share your email with anyone else.

Übung Bootstrap

Erstelle eine responsive Internetseite mit Bootstrap.

Internetseite mit Bootstrap formatiert

  1. Kopiere Deine erstellten Internetseiten in einen neuen Ordner und ersetzte das HTML-Grundgerüst mit Bootstrap. Lösche die Datei custom.css
  2. Ersetze die Navigationsbar auf allen Seiten mit einer Bootstrap-Komponente.
  3. Ergänze die Klasse für die Grafiken so, dass sie responsiv sind.
  4. Nutze auf mindestens einer Seite das Rasterlayout und stelle den Inhalt in zwei Spalten dar.
  5. Formatiere die Tabelle mit Bootstrap.
  6. Formatiere das Formular mit Bootstrap
  7. Teste das Layout für verschiedene Endgeräte.

<!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>OSI-Referenzmodell</title>
</head>
<body>
	<h1>Netzwerk­modelle</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>

Wortliste und Satzbausteine



Boot­strap Boot­strap ist ein CSS-System, mit respon­sivem Design.
der Con­tainer, ~ Mit Con­tainern wird das Lay­out reali­siert.
das Ras­ter-Lay­out, - Das Raster-Layout stellt den Inhalt je nach Display­größe in unter­schiedlicher An­zahl an Spal­ten dar.
respon­siv Die Bild­schirm­dar­stellung einer Internet­seite wird in Abhängig­keit der Bild­schirm­größe auto­matisch ange­passt.
© mylime.info