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
Huber (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Huber (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 10: | Zeile 10: | ||
</div> | </div> | ||
<h2>Test WH 1</h2> | |||
<ul class="nav nav- | <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> | ||
<li class="nav-item" role="presentation"> | <li class="nav-item" role="presentation"> | ||
<button class="nav-link active" id="home-tab" data-bs-toggle=" | <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> | ||
<li class="nav-item" role="presentation"> | <li class="nav-item" role="presentation"> | ||
<button class="nav-link" id="profile-tab" data-bs-toggle=" | <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> | ||
<li class="nav-item" role="presentation"> | <li class="nav-item" role="presentation"> | ||
<button class="nav-link" id="contact-tab" data-bs-toggle=" | <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> | </li> | ||
</ul> | </ul> | ||
<div class="tab-content" id=" | <div class="tab-content" id="pills-tabContent"> | ||
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div> | <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div> | ||
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div> | <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div> | ||
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div> | <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div> | ||
</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.