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

	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
	
	<title>Hello, world!</title>
</head>
<body>
	<h1>Hello, world!</h1>

	<!-- Optional JavaScript -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" 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 platziert und zum Schluss geladen. Dies optimiert die Ladezeit der Seite, da Javascript erst nach dem Laden aller anderen Komponenten benötigt wird.

Man beachte: Um offline arbeiten zu können, einfach die Bibliothek runterladen und die Pfadangabe anpassen.

Layout - Container



Das Basic-Layout wird mit der Klasse .container realisiert. Je nach Bildschirmgröße passt sich die maximale Breite an.

sm md lg
540px 768px 960px

Um die gesamte Breite des Darstellungsfeldes (engl. viewport) abzudecken dient die Klasse .container-fluid.

Hinweis: Ein Standardcontainer dient als Basis für das Rastersystem.

Containerbeispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  • <div class="container">
      <p>Lorem ipsum dolor ...<p>
    </div>

    <div class="container-fluid">
      <p>Lorem ipsum dolor ...<p>
    </div>

Layout - Rastersystem



Rasterlayoutbeispiel

Eine von zwei Spalten.

Eine von zwei Spalten.



Spalte 1 mit 7/12-Breite.


Spalte 2 mit 5/12-Breite.

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

Das Rastersystem stellt den Inhalt je nach Displaygröße in unterschiedlicher Anzahl an Spalten dar.

Beispiel 1 verwendet für jede Spalte die Klasse .col-sm. Dadurch werden die beiden Spalten gleichmäßig aufgeteilt und unterhalb des viewports sm (<540px) untereinander geschrieben.

Beispiel 2 verwendet für Spalte 1 die Klasse .col-md-7 und für Spalte 2 die Klasse .col-md-5. Dadurch werden die beiden Spalten unterschiedlich aufgeteilt und unterhalb des viewports md untereinander geschrieben.
Man beachte, dass es 12 Spalten gibt und die zugehörigen Klassen auch kombiniert eingesetzt werden können (z.B. .col-md-3 .col-sm-6).

Inhalt - Bilder und Tabellen



Mit der Klasse .img-fluid werden Bilder responsiv eingebunden. Dabei wird max-width: 100%; und height: auto; gesetzt. Ecken lassen sich mit der Klasse .rounded abrunden.

Man beachte, dass für Thumbnails die Klasse .img-thumbnail bereitgestellt wird.

Responsive Image
Laufschuh
  •   <img class="img-fluid rounded" alt="Laufschuh" src="...">

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.

Tabellenbeispiel
OSI TCP-IP
Network Internet
  • <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



Navbarbeispiel
  • 
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
    	<a class="navbar-brand" href="#">Navbar</a>
    	<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    	<span class="navbar-toggler-icon"></span>
    	</button>
    	<div class="collapse navbar-collapse" id="navbarNav">
    	<ul class="navbar-nav">
    		<li class="nav-item">
    		<a class="nav-link active" aria-current="page" href="#">Home</a>
    		</li>
    		<li class="nav-item">
    		<a class="nav-link" href="#">UDP</a>
    		</li>
    		<li class="nav-item">
    		<a class="nav-link" href="#">TCP/IP</a>
    		</li>
    	</ul>
    	</div>
      </div>
    </nav>
    					  

Mit der Navigationsbar lässt sich die Navigation einer Seite meistern. Für mobile Anwendungen (vieport md und kleiner) schaltet die Navigation auf das typische Burgersymbol  um.

Formularbeispiel
We'll never share your email with anyone else.
  • 
    <form>
      <div class="mb-3">
    	<label for="exampleInputEmail1" class="form-label">Email address</label>
    	<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    	<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
      </div>
      <div class="mb-3">
    	<label for="exampleInputPassword1" class="form-label">Password</label>
    	<input type="password" class="form-control" id="exampleInputPassword1">
      </div>
      <div class="mb-3 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>
    					  

Auch für Formulare wird ein ansprechendes Layout mitgeliefert.

Übung 1 Bootstrap

Erstelle eine responsive Internetseite mit Bootstrap.

Internetseite mit Bootstrap formatiert

  1. Implentiere Bootstrap im Internetprojekt. Kopiere dazu den link für die CSS-Datei und JS-Datei von Bootstrap. Alternativ kann man die Bibliothek auch runterladen und einbinden, um offline arbeiten zu können.
  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 Rastersystem 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 Displaygrößen und Browser.


<!doctype html>
<html lang="en">
<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- Bootstrap CSS -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
	
	<title>Hello, world!</title>
</head>
<body>
	<h1>Hello, world!</h1>

	<!-- Optional JavaScript -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" 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.