Templat: BootstrapTabsVerticalResponsive: Perbedaan antara revisi
Dari GBI Danau Bogor Raya
upd |
k upd |
||
| Baris 1: | Baris 1: | ||
<div class="row"> | |||
<div class="col-md-4"> | |||
<ul class="nav nav-pills flex-column {{{tabclass|}}}" id="Tabs_ID" role="tablist" style="margin-left: 0; {{{tabstyle|}}}"> | <ul class="nav nav-pills flex-column {{{tabclass|}}}" id="Tabs_ID" role="tablist" style="margin-left: 0; {{{tabstyle|}}}"> | ||
<li class="nav-item"> | <li class="nav-item"> | ||
| Baris 47: | Baris 49: | ||
<btn class="nav-link" id="ATab12-tab" data-toggle="tab" role="tab" aria-controls="ATab12" aria-selected="true">#ATab12|{{{tab12}}}</btn> | <btn class="nav-link" id="ATab12-tab" data-toggle="tab" role="tab" aria-controls="ATab12" aria-selected="true">#ATab12|{{{tab12}}}</btn> | ||
</li> }} | </li> }} | ||
</ul><!-- | </ul></div><!-- | ||
--><div class="tab-content {{{contentclass|p-3}}}" id="Tabs_Content" style="background: none; {{{contentstyle|}}}"> | --><div class="col"><div class="tab-content {{{contentclass|p-3}}}" id="Tabs_Content" style="background: none; {{{contentstyle|}}}"> | ||
<div class="tab-pane fade show active" id="ATab1" role="tabpanel" aria-labelledby="ATab1-tab"> | <div class="tab-pane fade show active" id="ATab1" role="tabpanel" aria-labelledby="ATab1-tab"> | ||
{{{1|{{{content1}}}}}} | {{{1|{{{content1}}}}}} | ||
| Baris 97: | Baris 99: | ||
{{{12|{{{content12}}}}}} | {{{12|{{{content12}}}}}} | ||
</div>}} | </div>}} | ||
</div><noinclude>{{documentation}}</noinclude> | </div> | ||
</div> | |||
</div> | |||
<noinclude>{{documentation}}</noinclude> | |||
Revisi per 7 Februari 2021 19.07
{{{content1}}}
Dokumentasi templat
Pemakaian
Pada device dengan size >= 768px, akan menggunakan vertikal. Untuk device lebih kecil, menggunakan nav tabs pada bagian atas.
{{ BootstrapTabsVerticalResponsive
| tabcount=
| tabclass=
| tabstyle=
| leftpanecolclass= col-md-4
| contentclass=
| contentstyle=
| tab1=
| content1= <p class="h2">Judul</p>
| tab2=
| content2= <p class="h2">Judul</p>
| tab3=
| content3= <p class="h2">Judul</p>
| tab4=
| content4= <p class="h2">Judul</p>
| tab5=
| content5= <p class="h2">Judul</p>
| tab6=
| content6= <p class="h2">Judul</p>
| tab7=
| content7= <p class="h2">Judul</p>
| tab8=
| content8= <p class="h2">Judul</p>
| tab9=
| content9= <p class="h2">Judul</p>
| tab10=
| content10= <p class="h2">Judul</p>
| tab11=
| content11= <p class="h2">Judul</p>
| tab12=
| content12= <p class="h2">Judul</p>
}}