THIS IS ONLY A TESTWIKI! LH, MW 1.39.7, PHP 8, SMW 4.1.3
Bootstrap-Test/Tabs: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung Markierung: Zurückgesetzt |
Huber (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (4 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
<div class="nav nav-tabs" id="myTab" role="tablist"> | <div class="nav nav-tabs" id="myTab" role="tablist"> | ||
<div class="nav-link active" id="home-tab" data-bs-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</div> | <div class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</div> | ||
<div class="nav-link" id="profile-tab" data-bs-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</div> | <div class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</div> | ||
<div class="nav-link" id="contact-tab" data-bs-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</div> | <div class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</div> | ||
</div> | </div> | ||
<div class="tab-content" id="myTabContent"> | <div class="tab-content" id="myTabContent"> | ||
| Zeile 9: | Zeile 9: | ||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact...</div> | <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact...</div> | ||
</div> | </div> | ||
<h2>Test WH 1</h2> | |||
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> | |||
<li class="nav-item" role="presentation"> | |||
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button> | |||
</li> | |||
<li class="nav-item" role="presentation"> | |||
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button> | |||
</li> | |||
<li class="nav-item" role="presentation"> | |||
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button> | |||
</li> | |||
</ul> | |||
<div class="tab-content" id="pills-tabContent"> | |||
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div> | |||
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div> | |||
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div> | |||
</div> | |||
<h2>Test WH 2</h2> | |||
<ul class="nav nav-tabs"> | |||
<li class="active"><a data-toggle="tab" href="#home">Home</a></li> | |||
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li> | |||
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li> | |||
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li> | |||
</ul> | |||
<div class="tab-content"> | |||
<div id="home" class="tab-pane fade in active"> | |||
<h3>HOME</h3> | |||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | |||
</div> | |||
<div id="menu1" class="tab-pane fade"> | |||
<h3>Menu 1</h3> | |||
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |||
</div> | |||
<div id="menu2" class="tab-pane fade"> | |||
<h3>Menu 2</h3> | |||
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p> | |||
</div> | |||
<div id="menu3" class="tab-pane fade"> | |||
<h3>Menu 3</h3> | |||
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> | |||
</div> | |||
</div> | |||
Aktuelle Version vom 23. Oktober 2023, 15:06 Uhr
Home content...
Profile content...
Contact...
Test WH 1
...
...
...
Test WH 2
HOME
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.