Komên navnîşê ji bo nîşandana rêze naverokê pêkhateyek maqûl û hêzdar in. Biguherînin û wan dirêj bikin da ku hema hema her naverokê di hundurê de piştgirî bikin.
Mînaka bingehîn
Koma navnîşê ya herî bingehîn navnîşek nerêkûpêk e ku bi hêmanên navnîşê û çînên rast ve girêdayî ye. Li ser wê bi vebijarkên ku li pey têne çêkirin, an jî li gorî hewcedariyê bi CSS-ya xwe re ava bikin.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum li eros
Tiştên çalak
Ji .activebo .list-group-itemku hilbijartina çalak a heyî nîşan bide li a-yê zêde bike.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum li eros
Tiştên astengdar
Ji .disabledbo .list-group-itemku ew neçalak xuya bike lê zêde bike. Bala xwe bidinê ku hin hêmanên bi .disabledwan re jî dê JavaScript-a xwerû hewce bike ku bûyerên klîkên wan bi tevahî neçalak bike (mînak, girêdan).
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum li eros
Girêdan û bişkokên
<a>S an <button>s bikar bînin da ku bi lêzêdekirina tomarên komê yên navnîşê yên çalak bi hover, neçalak, û rewşên çalak biafirînin .list-group-item-action. Em van pseudo-polan ji hev vediqetînin da ku komên navnîşê yên ku ji hêmanên ne-înteraktîf (wek <li>s an <div>s) hatine çêkirin, dravdanek klîk an tap peyda nekin.
Bawer bikin ku hûn li vir dersên standard bikar.btn neynin .
Bi <button>s re, hûn dikarin li disabledşûna .disabledpolê jî taybetmendiyê bikar bînin. Mixabin, <a>s taybetmendiya neçalak piştgirî nakin.
Flush
Zêde .list-group-flushbikin ku hin tixûb û quncikên girover werin rakirin da ku navnîşên tomarên komê yên di konteynirek dêûbav de ji qerax-bi-qev re werin pêşkêş kirin (mînak, kart).
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum li eros
Asumane
Zêde .list-group-horizontalbikin ku sêwirana tomarên komê yên navnîşê ji vertîkal berbi horizontî li ser hemî xalên veqetandinê biguhezînin. Alternatîf, guhertoyek bersivdar hilbijêrin .list-group-horizontal-{sm|md|lg|xl}da ku komek navnîşek horizontî ya ku ji wê xala veqetînê dest pê dike çêbike min-width. Heya nuha komên navnîşên horizontî bi komên navnîşa rijandin re nayên hev kirin.
ProTip: Dema ku horizontî ye, hûn tiştên komê yên navnîşa wekhev-fireh dixwazin? Li .flex-fillher lîsteya grûpê zêde bikin.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Dersên hevoksaziyê
Dersên kontekstê bikar bînin da ku navnîşên navnîşên bi paşxane û rengek dewletparêz şêwaz bikin.
Dapibus ac facilisis in
Tiştek koma navnîşa bingehîn a hêsan
Tiştek koma navnîşa navîn a hêsan
Tiştek komê ya navnîşa serfiraziya hêsan
Tiştek koma lîsteya xeterê ya hêsan
Tiştek koma navnîşa hişyariya hêsan
Tiştek koma navnîşa agahdariya hêsan
Tiştek koma navnîşa ronahiyê ya hêsan
Tiştek koma navnîşa tarî ya hêsan
Dersên kontekstual jî bi kar dikin .list-group-item-action. Bala xwe bidin lêzêdekirina şêwazên hover ku li vir di mînaka berê de nîn in. Her wiha .activedewlet jî piştgirî dike; wê bicîh bikin da ku hilbijartinek çalak li ser babetek komek navnîşê ya kontekstî nîşan bide.
Bikaranîna rengan ji bo zêdekirina wateyê tenê nîşanek dîtbar peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng tê destnîşan kirin an ji naverokê bixwe diyar e (mînak nivîsa xuyayî), an jî bi rêyên alternatîf ve tê de, wek mînak nivîsa zêde ya ku bi .sr-onlypolê re veşartî ye.
Bi nîşanan
Nîşanan li her tomarek koma navnîşê zêde bikin da ku bi alîkariya hin karûbaran hejmarên nexwendî, çalakî û hêj bêtir nîşan bidin .
Cras justo odio14
Dapibus ac facilisis in2
Morbi leo risus1
naveroka Custom
Nêzîkî her HTML-ê di hundurê de zêde bikin, tewra ji bo komên navnîşê yên girêdayî mîna ya jêrîn, bi alîkariya karûbarên flexbox .
Pêveka JavaScript-a tabê bikar bînin - wê bi serê xwe an bi bootstrap.jspelê berhevkirî ve têxin nav xwe - da ku koma navnîşa me dirêj bike da ku pelên tabloyên naveroka herêmî biafirîne.
Velit aute mollit ipsum and dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Digel vê yekê, ku voluptate ji bo demajoya ne hindik veguhezîne, id ut nulla ye. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.
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.
Taybetmendiyên daneyê bikar tînin
Hûn dikarin navîgasyonek koma navnîşê bêyî nivîsandina JavaScript-ê bi tenê diyar data-toggle="list"kirin an li ser hêmanek çalak bikin. Van taybetmendiyên daneyê li ser bikar bînin .list-group-item.
Bi JavaScript
Bi JavaScript-ê xala navnîşa tabloyê çalak bike (pêdivî ye ku her tomarek lîsteyê ferdî were çalak kirin):
Hûn dikarin bi çend awayan tomarek navnîşê ya kesane çalak bikin:
Bandora fade
Ji bo ku panela tabloyan bişewitînin, li her yekê zêde .fadebikin .tab-pane. Pêdivî ye ku tabloya yekem jî pêdivî .showye ku naveroka destpêkê xuya bike.
Methods
$().tab
Hêmanek tomar û naverokê ya navnîşê çalak dike. Tabê pêdivî ye ku di DOM-ê de girêkek konteynerê data-targetan jî armancek hebe.href
.tab('nîşan bide')
Tişta navnîşê ya diyarkirî hildibijêre û paceya têkildar nîşan dide. Tiştek din a navnîşê ya ku berê hatî hilbijartin, nehilbijartî dibe û pencereya wê ya têkildar tê veşartin. Berî ku tabloya tabloyê bi rastî were xuyang kirin vedigere bangkerê (mînak, berî ku shown.bs.tabbûyer çêbibe).
Events
Dema ku tabloyek nû nîşan dide, bûyer bi rêza jêrîn dişewitin:
hide.bs.tab(li ser tabloya çalak a heyî)
show.bs.tab(li ser tabloya ku tê xuyang kirin)
hidden.bs.tab(li ser tabloya çalak a berê, heman wekî hide.bs.tabbûyerê)
shown.bs.tab(li ser tabloya ku nû-çalak hatî xuyang kirin, heman wekî show.bs.tabbûyerê)
Ger tu tablo jixwe çalak nebûya, hide.bs.tabû hidden.bs.tabbûyer nayên avêtin.
Cureyê bûyerê
Terîf
nîşan bide.bs.tab
Ev bûyer di pêşandana tabloyê de dişewite, lê berî ku tabloya nû were xuyang kirin. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin event.targetû bikin hedef.event.relatedTarget
nîşan dan.bs.tab
Ev bûyer piştî ku tabloyek hate pêşandan li ser pêşandana tabê derdikeve. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin event.targetû bikin hedef.event.relatedTarget
veşêre.bs.tab
Dema ku tabloyek nû were xuyang kirin ev bûyer dişewite (û bi vî rengî tabloya çalak a berê were veşartin). Bi rêzê ve tabloya aktîf a heyî û tabloya nû ya zû-çalak bibe event.targetû armanc bikin.event.relatedTarget
veşartî.bs.tab
Ev bûyer piştî ku tabloyek nû tê xuyang kirin dişewite (û bi vî rengî tabloya çalak a berê tê veşartin). Bi rêzê ve tabloya çalak a berê û tabloya nû ya çalak bikar bînin event.targetû bikin hedef.event.relatedTarget