Ցուցակի խումբ
Ցուցակի խմբերը ճկուն և հզոր բաղադրիչ են մի շարք բովանդակություն ցուցադրելու համար: Փոփոխեք և ընդլայնեք դրանք՝ աջակցելու համար ներսում գրեթե ցանկացած բովանդակություն:
Ցուցակի ամենահիմնական խումբը չդասավորված ցուցակն է՝ ցուցակի տարրերով և համապատասխան դասերով: Կառուցեք դրա վրա հաջորդող տարբերակներով կամ անհրաժեշտության դեպքում ձեր սեփական CSS-ով:
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Վեստիբուլում և էրոս
<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>
Ավելացրեք .active
a- .list-group-item
ին՝ ընթացիկ ակտիվ ընտրությունը նշելու համար:
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Վեստիբուլում և էրոս
<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>
Ավելացրեք .disabled
a- .list-group-item
ին, որպեսզի այն անջատված երևա : Նկատի ունեցեք, որ որոշ տարրերի հետ .disabled
կպահանջվի նաև հատուկ JavaScript՝ իրենց սեղմումների իրադարձություններն ամբողջությամբ անջատելու համար (օրինակ՝ հղումները):
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Վեստիբուլում և էրոս
<ul class="list-group">
<li class="list-group-item disabled">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>
Օգտագործեք <a>
s կամ <button>
s՝ սավառնող, անջատված և ակտիվ վիճակներով գործող ցանկի տարրեր ստեղծելու.list-group-item-action
համար՝ ավելացնելով : Մենք առանձնացնում ենք այս կեղծ դասերը՝ ապահովելու համար, որ ոչ ինտերակտիվ տարրերից կազմված ցուցակի խմբերը (ինչպես <li>
s կամ <div>
s) չեն ապահովում սեղմման կամ հպման հնարավորությունը:
Համոզվեք, որ այստեղ չեք օգտագործում ստանդարտ .btn
դասերը :
<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">Vestibulum at eros</a>
</div>
s- <button>
ով կարող եք նաև օգտագործել disabled
հատկանիշը .disabled
դասի փոխարեն: Ցավոք, <a>
s չի աջակցում անջատված հատկանիշը:
<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>
Ավելացրեք .list-group-flush
՝ որոշ եզրագծեր և կլորացված անկյուններ հեռացնելու համար՝ ցուցակի խմբային տարրերը ծայրից ծայր մայր կոնտեյներով (օրինակ՝ քարտեր) ցուցադրելու համար:
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Վեստիբուլում և էրոս
<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>
Օգտագործեք համատեքստային դասեր՝ վիճակագրական ֆոնով և գույնով տարրերի ցանկի ոճավորման համար:
- Dapibus ac facilisis in
- Պարզ առաջնային ցուցակ�� խմբային տարր
- Պարզ երկրորդական ցուցակի խմբային տարր
- Պարզ հաջողության ցանկի խմբային տարր
- Պարզ վտանգի ցուցակի խմբային տարր
- Պարզ նախազգուշացման ցուցակի խմբային տարր
- Պարզ տեղեկատվական ցանկի խմբային տարր
- Պարզ թեթև ցուցակի խմբային տարր
- Պարզ մութ ցուցակի խմբային տարր
<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>
Համատեքստային դասերը նույնպես աշխատում են .list-group-item-action
. Ուշադրություն դարձրեք սավառնող ոճերի ավելացմանը, որոնք ներկայացված չեն նախորդ օրինակում: Աջակցում է նաև .active
պետությունը. կիրառել այն՝ համատեքստային ցանկի խմբի տարրի վրա ակտիվ ընտրություն նշելու համար:
<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>
Օժանդակ տեխնոլոգիաներին իմաստ հաղորդելը
Իմաստ ավելացնելու համար գույնի օգտագործումը միայն տեսողական ցուցում է տալիս, որը չի փոխանցվի օժանդակ տեխնոլոգիաների օգտագործողներին, ինչպիսիք են էկրանի ընթերցողները: Համոզվեք, որ գույնով նշված տեղեկատվությունը կա՛մ ակնհայտ է հենց բովանդակությունից (օրինակ՝ տեսանելի տեքստից), կա՛մ ներառված է այլընտրանքային միջոցներով, ինչպիսին է .sr-only
դասի հետ թաքցված լրացուցիչ տեքստը:
Ցուցակի խմբի ցանկացած տարր ավելացրեք նշանակներ՝ որոշ կոմունալ ծրագրերի օգնությամբ չընթերցված թվերը, ակտիվությունը և ավելին ցույց տալու համար :
- Cras justo odio14
- Dapibus ac facilisis in2
- Morbi leo risus1
<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>
Ավելացրեք գրեթե ցանկացած HTML ներսում, նույնիսկ կապված ցուցակի խմբերի համար, ինչպիսին է ստորև, flexbox կոմունալ ծրագրերի օգնությամբ :
Ցանկի խմբի տարրի վերնագիր
3 օր առաջDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Ցանկի խմբի տարրի վերնագիր
3 օր առաջDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Ցանկի խմբի տարրի վերնագիր
3 օր առաջDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start 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 flex-column align-items-start">
<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 flex-column align-items-start">
<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>
Օգտագործեք ներդիրի JavaScript հավելվածը, ներառեք այն անհատապես կամ կազմված bootstrap.js
ֆայլի միջոցով, մեր ցուցակի խումբը ընդլայնելու համար՝ տեղական բովանդակության ներդիրային վահանակներ ստեղծելու համար:
<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>
Դուք կարող եք ակտիվացնել ցուցակի խմբային նավիգացիան՝ առանց որևէ JavaScript գրելու՝ պարզապես նշելով data-toggle="list"
կամ որևէ տարրի վրա: Օգտագործեք այս տվյալների ատրիբուտները .list-group-item
.
<!-- 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>
Միացնել ներդիրների ցանկի տարրը JavaScript-ի միջոցով (ցուցակի յուրաքանչյուր տարր պետք է առանձին ակտիվացվի).
$('#myList a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
})
Դուք կարող եք ակտիվացնել առանձին ցանկի տարրը մի քանի եղանակով.
$('#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
յուրաքանչյուրին .tab-pane
: Առաջին ներդիրի վահանակը նույնպես պետք .show
է տեսանելի դարձնի սկզբնական բովանդակությունը:
<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>
Ակտիվացնում է ցանկի տարրի տարրը և բովանդակության կոնտեյները: Ներդիրը պետք է ունենա DOM-ում կամ a data-target
կամ href
թիրախավորող կոնտեյներային հանգույց:
<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>
Selects the given list item and shows its associated pane. Any other list item that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (for example, before the shown.bs.tab
event occurs).
$('#someListItem').tab('show')
When showing a new tab, the events fire in the following order:
hide.bs.tab
(on the current active tab)show.bs.tab
(on the to-be-shown tab)hidden.bs.tab
(on the previous active tab, the same one as for thehide.bs.tab
event)shown.bs.tab
(on the newly-active just-shown tab, the same one as for theshow.bs.tab
event)
If no tab was already active, the hide.bs.tab
and hidden.bs.tab
events will not be fired.
Event type | Description |
---|---|
show.bs.tab | This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
shown.bs.tab | This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
hide.bs.tab | This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively. |
hidden.bs.tab | This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})