Templat: BootstrapTabsVerticalResponsive: Perbedaan antara revisi

Dari GBI Danau Bogor Raya
Lompat ke: navigasi, cari
Leo (bicara | kontrib)
upd
 
Leo (bicara | kontrib)
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>
}}