Ndepụta otu
Otu ndepụta bụ ihe na-agbanwe agbanwe ma dị ike maka igosipụta usoro ọdịnaya. Gbanwee ma gbasaa ha iji kwado naanị ọdịnaya ọ bụla dị n'ime.
Ihe atụ bụ isi
Otu ndepụta kachasị ewu ewu bụ ndepụta edeghị aha nke nwere ihe ndepụta yana klaasị kwesịrị ekwesị. Jiri nhọrọ ndị na-eso wulite ya, ma ọ bụ jiri CSS nke gị dị ka achọrọ.
- Otu ihe
- Ihe nke abụọ
- Ihe nke atọ
- Ihe nke anọ
- Na nke ise
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Ihe na-arụ ọrụ
Tinye .active
na a .list-group-item
iji gosi nhọrọ nọ n'ọrụ ugbu a.
- Ihe na-arụ ọrụ
- Ihe nke abụọ
- Ihe nke atọ
- Ihe nke anọ
- Na nke ise
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Ihe ndị nwere nkwarụ
Tinye .disabled
na a .list-group-item
ka ọ yie enweghị nkwarụ. Rịba ama na ụfọdụ ihe nwere .disabled
ga-achọkwa Javascript omenala iji gbanyụọ mmemme ọpịpị ha (dịka ọmụmaatụ, njikọ).
- Ihe nwere nkwarụ
- Ihe nke abụọ
- Ihe nke atọ
- Ihe nke anọ
- Na nke ise
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Njikọ na bọtịnụ
Jiri <a>
s ma ọ bụ <button>
s mepụta ndepụta otu ihe nwere ike ime ya na hover, nwere nkwarụ na steeti nọ n'ọrụ site na ịgbakwunye .list-group-item-action
. Anyị na-ekewa klaasị pseudo ndị a iji hụ na otu ndepụta nke ihe anaghị emekọrịta ihe (dị ka <li>
s ma ọ bụ <div>
s) anaghị enye ohere ọpịpị ma ọ bụ kpatụ ego.
Jide n'aka na ị gaghị eji .btn
klas ọkọlọtọ ebe a .
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>
Na <button>
s, ị nwekwara ike iji disabled
njirimara kama .disabled
klaasị. Ọ dị nwute, <a>
s anaghị akwado njirimara nkwarụ.
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
The current button
</button>
<button type="button" class="list-group-item list-group-item-action">A second item</button>
<button type="button" class="list-group-item list-group-item-action">A third button item</button>
<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>
Ghichaa
Tinye .list-group-flush
ka iwepu ụfọdụ oke na nkuku gburugburu iji nye otu ihe ndepụta n'akụkụ ruo n'ọnụ n'ime akpa nne na nna (dịka ọmụmaatụ, kaadị).
- Otu ihe
- Ihe nke abụọ
- Ihe nke atọ
- Ihe nke anọ
- Na nke ise
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Kehoraizin
Tinye .list-group-horizontal
ka ịgbanwee okirikiri nhọrọ ukwuu nke ihe otu ndetu site na vetikal gaa na kehoraizin gafee ebe nkwụsịtụ niile. N'aka nke ọzọ, họrọ ụdị dị iche iche na-anabata .list-group-horizontal-{sm|md|lg|xl}
iji mee ndepụta otu n'ihu na-amalite na ebe nkwụsịtụ ahụ min-width
. Ugbu a enweghị ike ijikọ otu ndepụta kewapụrụ na otu ndepụta mkpocha.
ProTip: Chọrọ ihe ndị otu ndepụta obosara nhata nhata mgbe ọ kwụ ọtọ? Tinye .flex-fill
n'ime ihe ndepụta nke ọ bụla.
- Otu ihe
- Ihe nke abụọ
- Ihe nke atọ
- Otu ihe
- Ihe nke abụọ
- Ihe nke atọ
- Otu ihe
- Ihe nke abụọ
- Ihe nke atọ
- Otu ihe
- Ihe nke abụọ
- Ihe nke atọ
- Otu ihe
- Ihe nke abụọ
- Ihe nke atọ
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
Klaasị ihe atụ
Jiri klaasị okirikiri mee ndepụta ihe ndị nwere nzụlite na agba mara mma.
- Otu ihe ndepụta ndabara dị mfe
- Otu ihe ndepụta izizi dị mfe
- Otu ihe ndepụta nke abụọ dị mfe
- Otu ihe ndepụta ihe ịga nke ọma dị mfe
- Otu ihe ndepụta ihe egwu dị mfe
- Otu ihe ndepụta ịdọ aka ná ntị dị mfe
- Otu ihe ndepụta ozi dị mfe
- Otu ihe ndepụta ọkụ dị mfe
- Otu ihe ndepụta gbara ọchịchịrị dị mfe
<ul class="list-group">
<li class="list-group-item">A simple default list group item</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>
Klas Contextual na-arụkwa ọrụ na .list-group-item-action
. Rịba ama mgbakwunye na ụdị hover ebe a adịghị na ihe atụ gara aga. Ihe na-akwadokwa bụ .active
steeti; tinye ya iji gosi nhọrọ na-arụ ọrụ n'ime ihe otu ndepụta okwu.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</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>
Na-eme ka ọ pụta ìhè na teknụzụ enyemaka
Iji agba iji gbakwunye ihe ọ pụtara naanị na-enye ihe ngosi anya, nke a na-agaghị ebugara ndị ọrụ teknụzụ enyemaka - dị ka ndị na-agụ ihuenyo. Gbaa mbọ hụ na ozi nke agba gosipụtara pụtara ìhè site na ọdịnaya n'onwe ya (dịka ederede a na-ahụ anya), ma ọ bụ tinye ya site na ụzọ ọzọ, dị ka ederede agbakwunyere zoro ezo na .sr-only
klaasị.
Na baajị
Tinye baajị na ihe otu ndepụta ọ bụla iji gosi ọnụọgụgụ, mmemme na ndị ọzọ site n'enyemaka nke ụfọdụ ngwa .
- Ihe ndepụta14
- Ihe ndepụta nke abụọ2
- Ihe ndepụta nke atọ1
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
Ọdịnaya ahaziri ahazi
Tinye ihe fọrọ nke nta ka ọ bụrụ HTML ọ bụla n'ime, ọbụlagodi maka otu ndepụta ejikọtara dị ka nke dị n'okpuru, site na enyemaka nke flexbox utilities .
Depụta isiokwu isiokwu otu
Ụbọchị 3 gara agaỤfọdụ ọdịnaya edebe ebe dị na paragraf.
Na ụfọdụ obere mbipụta.Depụta isiokwu isiokwu otu
Ụbọchị 3 gara agaỤfọdụ ọdịnaya edebe ebe dị na paragraf.
Ma ụfọdụ mechiri obere mbipụta.Depụta isiokwu isiokwu otu
Ụbọchị 3 gara agaỤfọdụ ọdịnaya edebe ebe dị na paragraf.
Ma ụfọdụ mechiri obere mbipụta.<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">Some placeholder content in a paragraph.</p>
<small>And some small print.</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">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</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">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
</div>
Omume Javascript
Jiri ngwa mgbakwunye Javascript taabụ-gụnye ya n'otu n'otu ma ọ bụ site na bootstrap.js
faịlụ ekpokọtara-iji gbasaa otu ndepụta anyị iji mepụta paịlị ọdịnaya mpaghara.
<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>
Iji njirimara data
Ị nwere ike rụọ ọrụ igodo otu ndepụta na-edeghị Javascript ọ bụla site na ịkọwapụta data-toggle="list"
ma ọ bụ na mmewere. Jiri njirimara data ndị a na .list-group-item
.
<div role="tabpanel">
<!-- 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>
</div>
Site na Javascript
Kwado ihe ndepụta tabbable site na Javascript (ihe ndepụta ọ bụla kwesịrị ịgbalite n'otu n'otu):
$('#myList a').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Ị nwere ike ịgbalite ihe ndepụta onye ọ bụla n'ụzọ dị iche iche:
$('#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
Mbelata mmetụta
Iji mee ka panel tabs daa, tinye .fade
na nke ọ bụla .tab-pane
. Iberibe taabụ nke mbụ ga-enwerịrịrịrị .show
ime ka a hụ ọdịnaya mbụ.
<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>
Ụzọ
$()tab
Na-eme ka mmewere ihe ndepụta na akpa ọdịnaya rụọ ọrụ. Tab kwesịrị inwe ma ọ data-target
bụ ihe href
ezubere iche maka ọnụ akpa na DOM.
<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>
.taabụ('show')
Na-ahọpụta ihe ndepụta enyere wee gosi pane metụtara ya. Ihe ndepụta ọ bụla ọzọ ahọpụtara na mbụ na-aghọ nke ahọpụtaghị, yana akụkụ ya jikọtara ya na-ezo. Na-alaghachi na onye na-akpọ oku tupu egosiri pane taabụ (dịka ọmụmaatụ, tupu shown.bs.tab
mmemme emee).
$('#someListItem').tab('show')
Ihe omume
Mgbe ị na-egosi taabụ ọhụrụ, mmemme ahụ na-agba ọkụ n'usoro a:
hide.bs.tab
(na taabụ na-arụ ọrụ ugbu a)show.bs.tab
(na taabụ a ga-egosi)hidden.bs.tab
(na taabụ arụ ọrụ gara aga, otu maka mmemmehide.bs.tab
ahụ)shown.bs.tab
(na taabụ egosiri ọhụrụ na-arụ ọrụ, otu maka mmemmeshow.bs.tab
ahụ)
Ọ bụrụ na ọ nweghị taabụ na-arụ ọrụ, agaghị agbanyụọ mmemme hide.bs.tab
na hidden.bs.tab
mmemme ahụ.
Ụdị mmemme | Nkọwa |
---|---|
gosi.bs.tab | Ihe omume a na-agba ọkụ na ihe ngosi taabụ, mana tupu egosiri taabụ ọhụrụ. Jiri event.target ma event.relatedTarget tụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu. |
egosiri.bs.taabụ | Ihe omume a na-agba ọkụ na ihe ngosi taabụ ka egosiri taabụ. Jiri event.target ma event.relatedTarget tụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu. |
zoo.bs.tab | Ihe omume a na-agba ọkụ mgbe a ga-egosi taabụ ọhụrụ (ya mere a ga-ezobe taabụ arụ ọrụ gara aga). Jiri event.target ma event.relatedTarget tụọ taabụ na-arụ ọrụ ugbu a yana taabụ ọhụrụ ga-arụ ọrụ n'oge adịghị anya, n'otu n'otu. |
zoro ezo.bs.taabụ | Ihe omume a na-agba ọkụ ka egosiri taabụ ọhụrụ (ma yabụ na-ezobe taabụ arụ ọrụ gara aga). Jiri event.target ma event.relatedTarget dobe taabụ nọ n'ọrụ gara aga yana taabụ arụ ọrụ ọhụrụ, n'otu n'otu. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})