Bootstrap-Basisanleitung

Bootstrap-Plugins

Bootstrap-Plugin-Übersicht Bootstrap-Wellen

Bootstrap-Eine-Webseite-erstellen

Nun erstellen wir durch Bootstrap3 um eine einfache responsive Webseite zu erstellen.

Bevor wir lernen, können wir zunächst den Effekt betrachten:https://de.oldtoolbag.com/ausführen/html/bootstrap-erster-Webseite-demo.html

HTML-Code

Beispiel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Beispiel　-　eine einfache Webseite</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<style>
　　　　.fakeimg {
　　　　　　　　height:　200px;
　　　　　　　　　background: #aaa;
　　　　}
　　</style>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0">
　　<h1>Meine erste Bootstrap-Seite</h1>
　　<p>Passen Sie die Größe des Browserfensters an, um die Wirkung zu sehen!</p>　
</div>
<nav class="navbar navbar-inverse">
　　<div class="container-fluid">
　　　　<div class="navbar-header">
　　　　　　<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　<span class="icon-bar"></span>
　　　　　　　　<span class="icon-bar"></span>　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　</button>
　　　　　　<a class="navbar-brand" href="#">Webname</a>
　　　　</div>
　　　　<div class="collapse navbar-collapse" id="myNavbar">
　　　　　　<ul class="nav navbar-nav>
　　　　　　　　<li class="active"><a href="#">Startseite</a></li>
　　　　　　　　<li><a href="#">Seite　2</a></li>
　　　　　　　　<li><a href="#">Seite　3</a></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</nav>
<div class="container">
　　<div class="row">
　　　　<div class="col-sm-4">
　　　　　　<h2>Über mich</h2>
　　　　　　<h5>Mein Bild:</h5>
　　　　　　<div class="fakeimg">Hier ein Bild einfügen</div>
　　　　　　<p>Über mich.</p>
　　　　　　<h2>Verknüpfung</h2>
　　　　　　<p>Beschreibungstext.</p>
　　　　　　<ul class="nav nav-pills nav-stacked">
　　　　　　　　<li class="active"><a href="#">Verknüpfung　1</a></li>
　　　　　　　　<li><a href="#">Verknüpfung　2</a></li>
　　　　　　　　<li><a href="#">Verknüpfung　3</a></li>
　　　　　　</ul>
　　　　　　<hr class="hidden-sm hidden-md hidden-lg">
　　　　</div>
　　　　<div class="col-sm-8">
　　　　　　<h2>Titel</h2>
　　　　　　<h5>Untertitel</h5>
　　　　　　<div class="fakeimg">Bild</div>
　　　　　　<p>Einige Text..</p>
　　　　　　<p>Grundlagen-Tutorial-Website, lernen Sie die Grundlagen, um weiter zu gehen!!! Grundlagen-Tutorial-Website, lernen Sie die Grundlagen, um weiter zu gehen!!! Grundlagen-Tutorial-Website, lernen Sie die Grundlagen, um weiter zu gehen!!!</p>
　　　　　　<br>
　　　　　　<h2>Titel</h2>
　　　　　　<h5>Untertitel</h5>
　　　　　　<div class="fakeimg">Bild</div>
　　　　　　<p>Einige Text..</p>
　　　　　　<p>Grundlagen-Tutorial-Website, lernen Sie die Grundlagen, um weiter zu gehen!!! Grundlagen-Tutorial-Website, lernen Sie die Grundlagen, um weiter zu gehen!!! Grundlagen-Tutorial-Website, lernen Sie die Grundlagen, um weiter zu gehen!!!</p>
　　　　</div>
　　</div>
</div>
<div class="jumbotron text-center" style="margin-bottom:0">
　　<p>Unterbereichsinhalt</p>
</div>
</body>
</html>

Testen Sie heraus ‹/›

Bootstrap-Plugin-Übersicht Bootstrap-Wellen