<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Panel mit Navigation und Content!</h2>
<div class="container">
<div class="panel ">
<!-- Standard-Panel-Inhalt -->
<div class="panel-heading ">
<h2>Panel-Überschrift</h2>
</div>
<div class="navi-panael">
<ul class="nav nav-pills ">
<li class="active">
<a href="#start" data-toggle="tab">Start</a>
</li>
<li><a href="#profil" data-toggle="tab">Profil</a>
</li>
<li><a href="#kontakt" data-toggle="tab">Kontakt</a>
</li>
<li><a href="#info" data-toggle="tab">Info</a>
</li>
</ul>
</div>
<div class="tab-content clearfix">
<div class="tab-pane active" id="start">
<h3>Start</h3>
<p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können.</p>
<p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude zu genießen, die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet, welcher keine daraus resultierende Freude nach sich zieht? Auch gibt es niemanden, der den Schmerz</p>
</div>
<div class="tab-pane" id="profil">
<h3>Profil</h3>
<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.</p>
<p>Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p>
<p>Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben. Eines Tages aber beschloß eine kleine Zeile Blindtext, ihr Name war Lorem Ipsum, hinaus zu gehen in die weite Grammatik. Der große Oxmox riet ihr davon ab, da</p>
</div>
<div class="tab-pane" id="kontakt">
<h3>Kontakt</h3>
<p>Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.</p>
<p>Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen.</p>
</div>
<div class="tab-pane" id="info">
<h3>Info</h3>
<p>Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!</p>
<p>« sagte er, es war, als sollte die Scham ihn überleben. Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheueren Ungeziefer verwandelt.</p>
</div>
</div>
</div>
</div>
</div>
</div>
.panel {
border-radius: 0;
border-color: #000;
border-width: 3px;
}
.panel-heading {
background-color: #337ab7;
border-radius: 0;
}
.navi-panael {
background-color: #2DC300
}
.nav-pills>li>a {
border-radius: 0;
color: #000;
}
.nav-pills>li>a:hover {
color: #000;
}
.nav>li>a:focus,
.nav>li>a:hover,
{
text-decoration: none;
background-color: #8A8A8A;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
color: #fff;
background-color: #8A8A8A;
}
.tab-content {
background-color: #FFFBFB;
padding: 15px;
}
