SourceGaree tarreessi
Gareen tarree qabiyyee walduraa duubaan agarsiisuuf qaama jijjiiramaa fi humna qabuudha. Qabiyyee keessa jiru kamiyyuu jechuun ni danda'ama deeggaruuf fooyyessii fi dheeressi.
Fakkeenya bu’uuraa
Gareen tarree hunda caalaa bu'uuraa tarree hin tartiibamin wanta tarree fi gita sirrii ta'e qabudha. Filannoowwan itti aanan waliin, ykn akka barbaachisummaa isaatti CSS mataa keetiin irratti ijaari.
Cras qofaa odio
Dapibus ac haala mijeessuu keessatti
Morbi leo risus jedhamuun beekama
Porta ac consectetur jedhamuun beekama
Vestibulum at eros jedhama
Koppii gochuu
<ul class= "list-group" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
Wantoota sochii qaban
Filannoo socho'aa ammaa agarsiisuuf gara .active
atti dabali ..list-group-item
Cras qofaa odio
Dapibus ac haala mijeessuu keessatti
Morbi leo risus jedhamuun beekama
Porta ac consectetur jedhamuun beekama
Vestibulum at eros jedhama
Koppii gochuu
<ul class= "list-group" >
<li class= "list-group-item active" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
Wantoota hanqifaman
Akka hanqifameetti akka mul'atu .disabled
gochuuf atti dabali . Hubadhu, elementoonni tokko tokko kan qaban taateewwan cuqaasuu isaanii guutummaatti hanqisuuf (fkn, hidhannoowwan) JaavaScript amala barbaadus ni barbaadu..list-group-item
.disabled
Cras qofaa odio
Dapibus ac haala mijeessuu keessatti
Morbi leo risus jedhamuun beekama
Porta ac consectetur jedhamuun beekama
Vestibulum at eros jedhama
Koppii gochuu
<ul class= "list-group" >
<li class= "list-group-item disabled" aria-disabled= "true" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
Wantoota garee tarree gochaan hojjetamuu danda'an kanneen haalata hover, hanqifame, fi socho'aa qaban dabaluudhaan uumuuf s <a>
ykn s fayyadami . Gareen tarree elementoota wal-qunnamtii hin taane irraa hojjetaman (akka s ykn s) akka cuqaasuu ykn tuquu ga'umsa hin kennine mirkaneessuuf gita-sobaa kana addaan baasna.<button>
.list-group-item-action
<li>
<div>
Kutaawwan istaandaardii .btn
asitti akka hin fayyadamne mirkaneessi .
Koppii gochuu
<div class= "list-group" >
<a href= "#" class= "list-group-item list-group-item-action active" >
Cras justo odio
</a>
<a href= "#" class= "list-group-item list-group-item-action" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item list-group-item-action" > Morbi leo risus</a>
<a href= "#" class= "list-group-item list-group-item-action" > Porta ac consectetur ac</a>
<a href= "#" class= "list-group-item list-group-item-action disabled" tabindex= "-1" aria-disabled= "true" > Vestibulum at eros</a>
</div>
s waliin , bakka gitaattis amaloota <button>
fayyadamuu dandeessa . Kan nama gaddisiisu, s amalli hanqifame hin deeggaran.disabled
.disabled
<a>
Cras qofaa odio
Dapibus ac haala mijeessuu keessatti
Morbi leo risus jedhamuun beekama
Porta ac consectetur jedhamuun beekama
Vestibulum at eros jedhama
Koppii gochuu
<div class= "list-group" >
<button type= "button" class= "list-group-item list-group-item-action active" >
Cras justo odio
</button>
<button type= "button" class= "list-group-item list-group-item-action" > Dapibus ac facilisis in</button>
<button type= "button" class= "list-group-item list-group-item-action" > Morbi leo risus</button>
<button type= "button" class= "list-group-item list-group-item-action" > Porta ac consectetur ac</button>
<button type= "button" class= "list-group-item list-group-item-action" disabled > Vestibulum at eros</button>
</div>
Flush gochuu
.list-group-flush
Wantoota garee tarree qarqara irraa gara qarqaraatti qabduu warraa keessatti agarsiisuuf daangaawwan tokko tokkoo fi goleewwan geengoo ta'an haquuf dabali (fkn, kaardii).
Cras qofaa odio
Dapibus ac haala mijeessuu keessatti
Morbi leo risus jedhamuun beekama
Porta ac consectetur jedhamuun beekama
Vestibulum at eros jedhama
Koppii gochuu
<ul class= "list-group list-group-flush" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
<li class= "list-group-item" > Porta ac consectetur ac</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
Dalga-galii
.list-group-horizontal
Haalata wanta garee tarree dhaabbataa irraa gara qajeelaa tuqaawwan cabbii hunda irratti jijjiiruuf dabali . Akka filannootti, garee tarree qajeelaa gochuuf garaagarummaa deebii kennuu filadhu .list-group-horizontal-{sm|md|lg|xl}
qabxii cabbii sanaa irraa eegalee min-width
. Yeroo ammaa gareewwan tarree qajeeloo gareewwan tarree flush waliin walitti makamuu hin danda'an.
ProTip: Wantoota garee tarree bal'ina walqixaa yeroo horizontal barbaaddaa? .flex-fill
Tokkoon tokkoo wanta garee tarree irratti dabali .
Cras qofaa odio
Dapibus ac haala mijeessuu keessatti
Morbi leo risus jedhamuun beekama
Koppii gochuu
<ul class= "list-group list-group-horizontal" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
</ul>
Cras qofaa odio
Dapibus ac haala mijeessuu keessatti
Morbi leo risus jedhamuun beekama
Koppii gochuu
<ul class= "list-group list-group-horizontal-sm" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
</ul>
Cras qofaa odio
Dapibus ac haala mijeessuu keessatti
Morbi leo risus jedhamuun beekama
Koppii gochuu
<ul class= "list-group list-group-horizontal-md" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
</ul>
Cras qofaa odio
Dapibus ac haala mijeessuu keessatti
Morbi leo risus jedhamuun beekama
Koppii gochuu
<ul class= "list-group list-group-horizontal-lg" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
</ul>
Cras qofaa odio
Dapibus ac haala mijeessuu keessatti
Morbi leo risus jedhamuun beekama
Koppii gochuu
<ul class= "list-group list-group-horizontal-xl" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Morbi leo risus</li>
</ul>
Kutaalee haala dubbii (contextual classes).
Wantoota duubbee fi halluu haalata qaban tarreessuuf gitaalee yaadannoo fayyadami.
Dapibus ac haala mijeessuu keessatti
Wanti garee tarree jalqabaa salphaa
Wanti garee tarree lammaffaa salphaa
Wanti garee tarree milkaa'ina salphaa
Wanti garee tarree balaa salphaa
Wanti garee tarree akeekkachiisaa salphaa
Wanti garee tarree info salphaa
Wanti garee tarree ifaa salphaa
Wanti garee tarree dukkanaa'aa salphaa
Koppii gochuu
<ul class= "list-group" >
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item list-group-item-primary" > A simple primary list group item</li>
<li class= "list-group-item list-group-item-secondary" > A simple secondary list group item</li>
<li class= "list-group-item list-group-item-success" > A simple success list group item</li>
<li class= "list-group-item list-group-item-danger" > A simple danger list group item</li>
<li class= "list-group-item list-group-item-warning" > A simple warning list group item</li>
<li class= "list-group-item list-group-item-info" > A simple info list group item</li>
<li class= "list-group-item list-group-item-light" > A simple light list group item</li>
<li class= "list-group-item list-group-item-dark" > A simple dark list group item</li>
</ul>
Kutaawwan haala dubbii (contextual classes) waliinis ni hojjetu .list-group-item-action
. Hubadhu dabalata akkaataawwan hover asitti fakkeenya duraa keessatti hin argamne. Akkasumas mootummaan deeggaramee .active
; wanta garee tarree yaadannoo irratti filannoo socho'aa agarsiisuuf hojii irra oolchi.
Koppii gochuu
<div class= "list-group" >
<a href= "#" class= "list-group-item list-group-item-action" > Dapibus ac facilisis in</a>
<a href= "#" class= "list-group-item list-group-item-action list-group-item-primary" > A simple primary list group item</a>
<a href= "#" class= "list-group-item list-group-item-action list-group-item-secondary" > A simple secondary list group item</a>
<a href= "#" class= "list-group-item list-group-item-action list-group-item-success" > A simple success list group item</a>
<a href= "#" class= "list-group-item list-group-item-action list-group-item-danger" > A simple danger list group item</a>
<a href= "#" class= "list-group-item list-group-item-action list-group-item-warning" > A simple warning list group item</a>
<a href= "#" class= "list-group-item list-group-item-action list-group-item-info" > A simple info list group item</a>
<a href= "#" class= "list-group-item list-group-item-action list-group-item-light" > A simple light list group item</a>
<a href= "#" class= "list-group-item list-group-item-action list-group-item-dark" > A simple dark list group item</a>
</div>
Teeknooloojiiwwan gargaaraa ta’aniif hiika dabarsuu
Hiika dabaluudhaaf halluu fayyadamuun agarsiisa mul’ataa qofa kenna, kunis fayyadamtoota teeknooloojiiwwan gargaarsaa – kan akka dubbistoota iskiriinii – hin dabarfamu. Odeeffannoon halluudhaan agarsiifame qabiyyee mataa isaa irraa ifa ta'uu isaa mirkaneessi (fkn barruu mul'atu), ykn karaa filannootiin hammatamuu isaa, kan akka barruu dabalataa .sr-only
gita waliin dhokatee.
Baajiiwwan waliin
Lakkoofsa hin dubbifamne, sochii, fi kanneen biroo gargaarsa faayidaa tokko tokkoon agarsiisuuf wanta garee tarree kamiyyuu irratti baajiiwwan dabali .
Cras qofaa odio14.
Dapibus ac haala mijeessuu keessatti2. 2.
Morbi leo risus jedhamuun beekama1. 1.
Koppii gochuu
<ul class= "list-group" >
<li class= "list-group-item d-flex justify-content-between align-items-center" >
Cras justo odio
<span class= "badge badge-primary badge-pill" > 14</span>
</li>
<li class= "list-group-item d-flex justify-content-between align-items-center" >
Dapibus ac facilisis in
<span class= "badge badge-primary badge-pill" > 2</span>
</li>
<li class= "list-group-item d-flex justify-content-between align-items-center" >
Morbi leo risus
<span class= "badge badge-primary badge-pill" > 1</span>
</li>
</ul>
Qabiyyee amala
HTML kamiyyuu jechuun ni danda'ama keessaa dabali, gareewwan tarree walitti hidhaman akka isa armaan gadiitiif illee, gargaarsa flexbox utilities tiin .
Koppii gochuu
<div class= "list-group" >
<a href= "#" class= "list-group-item list-group-item-action active" >
<div class= "d-flex w-100 justify-content-between" >
<h5 class= "mb-1" > List group item heading</h5>
<small> 3 days ago</small>
</div>
<p class= "mb-1" > Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small> Donec id elit non mi porta.</small>
</a>
<a href= "#" class= "list-group-item list-group-item-action" >
<div class= "d-flex w-100 justify-content-between" >
<h5 class= "mb-1" > List group item heading</h5>
<small class= "text-muted" > 3 days ago</small>
</div>
<p class= "mb-1" > Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class= "text-muted" > Donec id elit non mi porta.</small>
</a>
<a href= "#" class= "list-group-item list-group-item-action" >
<div class= "d-flex w-100 justify-content-between" >
<h5 class= "mb-1" > List group item heading</h5>
<small class= "text-muted" > 3 days ago</small>
</div>
<p class= "mb-1" > Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
<small class= "text-muted" > Donec id elit non mi porta.</small>
</a>
</div>
Amala JaavaScript
Caancala JaavaScript plugin fayyadami—dhuunfaadhaan ykn karaa faayilii qindaa'ee hammachiisi- bootstrap.js
garee tarree keenya bal'isuuf foddaawwan caancala qabiyyee naannoo uumuuf.
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa qaama saalaa dhiiraa guddisuuf sochii qaamaa gochuu yeroodhaaf baqachuu. Voluptate deserunt taa'uu sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad yeroo xiqqaa hin taane sunt fedhii saalaa consectetur sochii qaamaa id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor jedhamuun beekama. Anim ad Lorem aliqua in cupidatat nisi eu eu nostrud gochuudhaan aliquip veniam xiqqaa.
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.
Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.
Koppii gochuu
<div class= "row" >
<div class= "col-4" >
<div class= "list-group" id= "list-tab" role= "tablist" >
<a class= "list-group-item list-group-item-action active" id= "list-home-list" data-toggle= "list" href= "#list-home" role= "tab" aria-controls= "home" > Home</a>
<a class= "list-group-item list-group-item-action" id= "list-profile-list" data-toggle= "list" href= "#list-profile" role= "tab" aria-controls= "profile" > Profile</a>
<a class= "list-group-item list-group-item-action" id= "list-messages-list" data-toggle= "list" href= "#list-messages" role= "tab" aria-controls= "messages" > Messages</a>
<a class= "list-group-item list-group-item-action" id= "list-settings-list" data-toggle= "list" href= "#list-settings" role= "tab" aria-controls= "settings" > Settings</a>
</div>
</div>
<div class= "col-8" >
<div class= "tab-content" id= "nav-tabContent" >
<div class= "tab-pane fade show active" id= "list-home" role= "tabpanel" aria-labelledby= "list-home-list" > ...</div>
<div class= "tab-pane fade" id= "list-profile" role= "tabpanel" aria-labelledby= "list-profile-list" > ...</div>
<div class= "tab-pane fade" id= "list-messages" role= "tabpanel" aria-labelledby= "list-messages-list" > ...</div>
<div class= "tab-pane fade" id= "list-settings" role= "tabpanel" aria-labelledby= "list-settings-list" > ...</div>
</div>
</div>
</div>
Amaloota deetaa fayyadamuu
Salphaatti ifteessuudhaan data-toggle="list"
ykn elementii tokko irratti osoo JaavaScript kamiyyuu osoo hin barreessiin qajeelcha garee tarree kakaasuu dandeessa. Amaloota deetaa kana irratti fayyadami .list-group-item
.
Koppii gochuu
<!-- List group -->
<div class= "list-group" id= "myList" role= "tablist" >
<a class= "list-group-item list-group-item-action active" data-toggle= "list" href= "#home" role= "tab" > Home</a>
<a class= "list-group-item list-group-item-action" data-toggle= "list" href= "#profile" role= "tab" > Profile</a>
<a class= "list-group-item list-group-item-action" data-toggle= "list" href= "#messages" role= "tab" > Messages</a>
<a class= "list-group-item list-group-item-action" data-toggle= "list" href= "#settings" role= "tab" > Settings</a>
</div>
<!-- Tab panes -->
<div class= "tab-content" >
<div class= "tab-pane active" id= "home" role= "tabpanel" > ...</div>
<div class= "tab-pane" id= "profile" role= "tabpanel" > ...</div>
<div class= "tab-pane" id= "messages" role= "tabpanel" > ...</div>
<div class= "tab-pane" id= "settings" role= "tabpanel" > ...</div>
</div>
Karaa JaavaScript
Wanti tarree caancala karaa JaavaScript dandeessisi (tokkoon tokkoon wanta tarree dhuunfaan hojii irra oolchuu qaba):
Koppii gochuu
$ ( ' #myList a ' ). on ( ' click ' , function ( e ) {
e . preventDefault ()
$ ( this ). tab ( ' show ' )
})
Wanti tarree dhuunfaa karaa hedduudhaan hojii irra oolchuu dandeessa:
Koppii gochuu
$ ( ' #myList a[href="#profile"] ' ). tab ( ' show ' ) // Select tab by name
$ ( ' #myList a:first-child ' ). tab ( ' show ' ) // Select first tab
$ ( ' #myList a:last-child ' ). tab ( ' show ' ) // Select last tab
$ ( ' #myList a:nth-child(3) ' ). tab ( ' show ' ) // Select third tab
Fade effect jedhamuun beekama
Qaaqa caancalaa akka keessaa bahu gochuuf, .fade
tokkoon tokkootti dabali .tab-pane
. Qaaqa caancala .show
jalqabaa qabiyyee jalqabaa akka mul'atu gochuus qaba.
Koppii gochuu
<div class= "tab-content" >
<div class= "tab-pane fade show active" id= "home" role= "tabpanel" > ...</div>
<div class= "tab-pane fade" id= "profile" role= "tabpanel" > ...</div>
<div class= "tab-pane fade" id= "messages" role= "tabpanel" > ...</div>
<div class= "tab-pane fade" id= "settings" role= "tabpanel" > ...</div>
</div>
Malawwan
$().caancala
Qabduu wanta tarree fi qabduu qabiyyee hojii irra oolcha. Caancalli DOM keessatti noodiin qabduu a data-target
ykn kan xiyyeeffatu qabaachuu qaba.href
Koppii gochuu
<div class= "list-group" id= "myList" role= "tablist" >
<a class= "list-group-item list-group-item-action active" data-toggle= "list" href= "#home" role= "tab" > Home</a>
<a class= "list-group-item list-group-item-action" data-toggle= "list" href= "#profile" role= "tab" > Profile</a>
<a class= "list-group-item list-group-item-action" data-toggle= "list" href= "#messages" role= "tab" > Messages</a>
<a class= "list-group-item list-group-item-action" data-toggle= "list" href= "#settings" role= "tab" > Settings</a>
</div>
<div class= "tab-content" >
<div class= "tab-pane active" id= "home" role= "tabpanel" > ...</div>
<div class= "tab-pane" id= "profile" role= "tabpanel" > ...</div>
<div class= "tab-pane" id= "messages" role= "tabpanel" > ...</div>
<div class= "tab-pane" id= "settings" role= "tabpanel" > ...</div>
</div>
<script>
$ ( function () {
$ ( ' #myList a:last-child ' ). tab ( ' show ' )
})
</script>
.tab('agarsiisi') .
Wanti tarree kenname filatee foddaa isaa walqabate agarsiisa. Wanti tarree biroo kamiyyuu kan duraan filatame hin filatamne ta'ee foddaan isaa walqabate ni dhokata. Qaaqa caancala qabatamaan osoo hin agarsiifamiin dura gara waamichaatti deebi'a (fakkeenyaaf, osoo shown.bs.tab
taatee hin uumamin dura).
Koppii gochuu
$ ( ' #someListItem ' ). tab ( ' show ' )
Taateewwan
Yeroo caancala haaraa agarsiisu, taateewwan tartiiba armaan gadiitiin dhukaasu:
hide.bs.tab
(caancala amma socho'aa jiru irratti)
show.bs.tab
(caancala agarsiifamu irratti)
hidden.bs.tab
(caancala socho'aa duraa irratti, kan taatee sanaaf walfakkaatu hide.bs.tab
)
shown.bs.tab
(caancala haaraa-socho'aa reefuu agarsiifame irratti, kan show.bs.tab
taatee sanaaf walfakkaatu)
Yoo caancala duraan socho'aa hin turre, taateewwan hide.bs.tab
fi hidden.bs.tab
hin dhukaafaman.
Gosa taatee
Ibsa
caancala.bs. agarsiisi
Taatee kun agarsiisa caancalaa irratti dhukaasa, garuu osoo caancala haaraan hin agarsiifamiin dura. Caancala socho'aa fi caancala socho'aa duraanii (yoo jiraate) akkaataa wal duraa duubaan irratti xiyyeeffachuuf event.target
fi fayyadami .event.relatedTarget
agarsiifame.bs.tab
Taatee kun agarsiisa caancala irratti erga caancala agarsiifamee booda dhukaasa. Caancala socho'aa fi caancala socho'aa duraanii (yoo jiraate) akkaataa wal duraa duubaan irratti xiyyeeffachuuf event.target
fi fayyadami .event.relatedTarget
caancala.bs.dhoksaa
Taatee kun yeroo caancala haaraa agarsiifamuu qabutti dhukaasa (kanaanis caancala socho'aa duraanii dhokfamuu qaba). Caancala socho'aa ammaa fi caancala haaraa yeroo dhiyootti socho'u irratti xiyyeeffachuuf event.target
fi fayyadami , akkaataa wal duraa duubaan.event.relatedTarget
dhokataa.bs.tab
Taatee kun erga caancala haaraa agarsiifamee booda dhukaasa (kanaanis caancala socho'aa duraanii dhokata). Caancala socho'aa duraa fi caancala socho'aa haaraa irratti xiyyeeffachuuf event.target
fi fayyadami , akkaataa wal duraa duubaan.event.relatedTarget
Koppii gochuu
$ ( ' a[data-toggle="list"] ' ). on ( ' shown.bs.tab ' , function ( e ) {
e . target // newly activated tab
e . relatedTarget // previous active tab
})