jumbotron

Der Jumbotron-Container ist ein gestalteriaches Element. Er ist Grau hinterlegt, mit leichten Border-Radius und viel Innenanstand. Wird er verwendet, ist er für viele Bootstrap-Websites typisch. Wird eine eigene Gestaltung angestrebt macht er aber keinen Sinn.

Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
    <meta charset=utf-8>
    <title>HTML5 Bootstrap Intern</title>
    <link rel="stylesheet" href="http://depot43.ch/unterlagen/themes/bootstrap/css/bootstrap.css">
    <style>
    
    
    
    </style>
</head>
<body>
	<div class="container">
		<div class="jumbotron">
			<h1>Hauptitel</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, itaque.</p>
		</div>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, a..</p>
	</div>
</body>
</html>


 

            

Anregung:

Container-Elemente werden meist ineinander verschachtel angewandt. Die Klasse .jumbotron erstellt die gleichen Abstände wie .container-fluid. Eine Website die beide Klassen verwendet, bleibt so passend. Wird eine eigenes Design im Header angestrebt, empfiehlt es sich die Klasse .container-fluid für die gleich Abstände mit dem Header zu verwenden.

Aufschlussreich scheint mir, zu beachte. was passiert wenn das div-Element mit dem "container-fluid" gelöscht wird. (Vergiss nicht das schliessende div-Elemt ebenfalls zu entfernen.) Vom Jumbotron-Container bleibt nur etwas Design.

    <div class="container">

    </div>