Source

Lembani gulu

Magulu amndandanda ndi gawo losinthika komanso lamphamvu powonetsa mndandanda wazinthu. Sinthani ndi kukulitsa kuti zithandizire chilichonse mkati.

Chitsanzo choyambirira

Gulu la mndandanda wofunikira kwambiri ndi mndandanda wosasankhidwa wokhala ndi mndandanda wazinthu ndi makalasi oyenera. Mangani pa izo ndi zosankha zomwe zikutsatira, kapena ndi CSS yanu ngati pakufunika.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Mowa lero
  • Porta ac consectetur ac
  • Vestibulum ndi eros
<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>

Zinthu zogwira ntchito

Onjezani .activeku a .list-group-itemkuti muwonetse zomwe zasankhidwa.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Mowa lero
  • Porta ac consectetur ac
  • Vestibulum ndi eros
<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>

Zinthu zolemala

Onjezani .disabledku a .list-group-itemkuti iwoneke ngati yoyimitsa. Dziwani kuti zinthu zina zomwe zili nazo .disabledzidzafunikanso JavaScript yokhazikika kuti izimitsa zochitika zawo zodina (mwachitsanzo, maulalo).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Mowa lero
  • Porta ac consectetur ac
  • Vestibulum ndi eros
<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>

Gwiritsani ntchito <a>s kapena <button>s kuti mupange mndandanda wazinthu zomwe zingachitike m'magulu okhala ndi ma hover, olemala, ndi omwe akugwira ntchito powonjezera .list-group-item-action. Timalekanitsa magulu abodzawa kuti tiwonetsetse kuti magulu opangidwa ndi zinthu zosalumikizana (monga <li>s kapena <div>s) sapereka kudina kapena kukwanitsa.

Onetsetsani kuti musagwiritse ntchito .btnmakalasi okhazikika apa .

<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>

Ndi <button>s, mutha kugwiritsanso ntchito mawonekedwe disabledm'malo mwa .disabledkalasi. Zachisoni, <a>s sizigwirizana ndi zomwe olumala.

<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

Onjezani .list-group-flushkuti muchotse malire ndi ngodya zozungulira kuti mupereke mndandanda wazinthu zamagulu m'mphepete mwa chidebe cha makolo (mwachitsanzo, makadi).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Mowa lero
  • Porta ac consectetur ac
  • Vestibulum ndi eros
<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>

Maphunziro a Contextual

Gwiritsani ntchito makalasi amndandanda kuti musinthe zinthu zomwe zili ndi mbiri yabwino komanso mtundu.

  • Dapibus ac facilisis in
  • Ichi ndi chinthu choyambirira cha gulu
  • Ichi ndi chinthu chamndandanda wachiwiri
  • Ichi ndi chinthu chamndandanda wopambana
  • Ichi ndi chinthu chamndandanda wazowopsa
  • Ichi ndi chinthu cha gulu la chenjezo
  • Ichi ndi zinthu zagulu lazidziwitso
  • Ichi ndi gulu lopepuka lagulu
  • Ichi ndi chinthu chamndandanda wakuda
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>


  <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
  <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
  <li class="list-group-item list-group-item-success">This is a success list group item</li>
  <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
  <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
  <li class="list-group-item list-group-item-info">This is a info list group item</li>
  <li class="list-group-item list-group-item-light">This is a light list group item</li>
  <li class="list-group-item list-group-item-dark">This is a dark list group item</li>
</ul>

Maphunziro a Contextual amagwiranso ntchito ndi .list-group-item-action. Zindikirani kuwonjezera kwa masitaelo a hover pano omwe sakupezeka mu chitsanzo chapitacho. Komanso kuthandizidwa ndi .activeboma; igwiritseni ntchito kusonyeza kusankha komwe kukuchitika pagulu lachinthu.

<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">This is a primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>
</div>
Kupereka tanthauzo ku matekinoloje othandizira

Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti zomwe zatchulidwa ndi mtunduwo zikuwonekera kuchokera pazomwe zili (monga zolemba zowonekera), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .sr-onlykalasi.

Ndi mabaji

Onjezani mabaji pagulu lililonse kuti muwonetse mawerengedwe osawerengeka, zochitika, ndi zina mothandizidwa ndi zina .

  • Cras justo odio14
  • Dapibus ac facilisis in2
  • Mowa lero1
<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>

Zomwe zili mwamakonda

Onjezani pafupifupi ma HTML aliwonse mkati, ngakhale pamndandanda wamagulu olumikizidwa monga pansipa, mothandizidwa ndi flexbox utilities .

<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>

Makhalidwe a JavaScript

Gwiritsani ntchito pulogalamu yowonjezera ya JavaScript-iphatikizepo payekhapayekha kapena kudzera pa bootstrap.jsfayilo yophatikizidwa-kuti muwonjezere gulu lathu la mndandanda kuti mupange mapanelo azomwe zili m'deralo.

<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>

Kugwiritsa ntchito mawonekedwe a data

Mutha kuyambitsa kusanja kwamagulu osalemba JavaScript pongotchula data-toggle="list"kapena pa chinthu. Gwiritsani ntchito ma data awa pa .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>

Kudzera pa JavaScript

Yambitsani chinthu chamndandanda kudzera pa JavaScript (chinthu chilichonse pamndandanda chikuyenera kutsegulidwa pachokha):

$('#myList a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Mutha kuyambitsa chinthu chamndandanda m'njira zingapo:

$('#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

Kuzimiririka

Kuti ma tabo azitha kuzimiririka, onjezani .fadechilichonse .tab-pane. Gawo loyamba la tabu liyeneranso .showkupangitsa kuti zomwe zili zoyamba ziwonekere.

<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>

Njira

$().tabu

Imayatsa chinthu chamndandanda komanso chidebe chazinthu. Tabu iyenera kukhala ndi imodzi data-targetkapena hrefyolunjika ku chidebe mu 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>

.tab('show')

Imasankha chinthu chomwe chaperekedwa ndikuwonetsa gawo lomwe likugwirizana nalo. Chilichonse chamndandanda chomwe chidasankhidwa kale chimakhala chosasankhidwa ndipo mawonekedwe ake amabisika. Imabwerera kwa woyimbayo tsamba la tabu lisanasonyezedwe (mwachitsanzo, shown.bs.tabchochitikacho chisanachitike).

$('#someListItem').tab('show')

Zochitika

Mukawonetsa tabu yatsopano, zochitika zimayaka motere:

  1. hide.bs.tab(pa tabu yomwe ikugwira ntchito pano)
  2. show.bs.tab(pa tabu yomwe ikuyenera kuwonetsedwa)
  3. hidden.bs.tab(pa tabu yogwira kale, yofanana ndi ya hide.bs.tabchochitikacho)
  4. shown.bs.tab(pa tabu yomwe yangowonetsedwa kumene, yofanana ndi ya show.bs.tabchochitikacho)

Ngati palibe tabu yomwe idayamba kale, hide.bs.tabndi hidden.bs.tabzochitika sizidzachotsedwa.

Mtundu wa chochitika Kufotokozera
onetsani.bs.tab Chochitikachi chikuyaka pa tabu chiwonetsero, koma tabu yatsopano isanasonyezedwe. Gwiritsani ntchito event.targetndikuwongolera event.relatedTargettabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana.
chiwonetsero.bs.tab Chochitika ichi chikuyaka pa tabu chiwonetsero pambuyo poti tabu yawonetsedwa. Gwiritsani ntchito event.targetndikuwongolera event.relatedTargettabu yomwe ikugwira ntchito ndi tabu yogwira kale (ngati ilipo) motsatana.
bisa.bs.tab Chochitikachi chimayaka pomwe tabu yatsopano iyenera kuwonetsedwa (ndipo chifukwa chake tabu yogwira kale iyenera kubisika). Gwiritsani ntchito event.targetndi event.relatedTargetkulunjika tabu yomwe ikugwira ntchito ndi tsamba latsopano lomwe lizigwira ntchito posachedwa, motsatana.
chobisika.bs.tab Chochitikachi chimayaka pambuyo poti tabu yatsopano yawonetsedwa (ndipo chifukwa chake tabu yogwira kale yabisika). Gwiritsani event.targetntchito event.relatedTargetndikulunjika tabu yomwe idagwira kale ndi tabu yatsopano, motsatana.
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})