Bootstrap Panel wunsch

Germanikus

Hallo,

ich wollte mal fragen, ob jemand diesen Panel basteln kann.

Ich hab das schon ein wenig versucht.

Aber ich habe keine ahnung von CSS

https://jsfiddle.net/Germanikus/jttf551a/

Ich schreib schon mal Danke an den jenigen der das schreibt

MrMurphy

Hallo

Als Bootstrap-Panel geht das nicht. Dafür ist ein Panel nicht gedacht.

Oder du musst mit CSS nachhelfen.

Gruss

MrMurphy

Germanikus

Ok und kannst du das umsetzen?

The-Error

Warum sollte das nicht gehen?

Panel mit Navi!

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Bootstrap Lightbox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Das neueste kompilierte und minimierte CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style type="text/css">
        .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;
        }

    </style>

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

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




</body>

</html>

Alles anzeigen

Germanikus

Geil

Danke dir

Wie kann ich den zweiten Nav verkleinern?

The-Error

verseh die Frage nicht !?

MrMurphy

Hallo

Zitat

Warum sollte das nicht gehen?

Bitte meinen Text nicht aus dem Zusammenhang reißen:

Zitat

Als Bootstrap-Panel geht das nicht. Dafür ist ein Panel nicht gedacht.

Oder du musst mit CSS nachhelfen.

Ich bin davon ausgegangen, das Germanikus grade kein CSS verwenden möchte, sondern nur die Bootstrapklassen. Mit CSS ist das natürlich kein Problem.

Gruss

MrMurphy

Germanikus

Zitat von The-Error

verseh die Frage nicht !?

Ich meine diesen grünen bereich

Wie kann ich die Höhe verkleinern, so das man ein Label größe bekommt.

The-Error

das kannst du im Styles

Code

.nav-pills>li>a {
            border-radius: 0;
            color: #000;
            padding: 5px 15px;
            font-size:15px;
        }

Germanikus

Danke dir.

Jetzt mitmachen!