Source

Төркем исемлеге

Исемлек төркемнәре - эчтәлек сериясен күрсәтү өчен сыгылучан һәм көчле компонент. Эчтәге эчтәлеккә булышу өчен аларны үзгәртегез һәм киңәйтегез.

Төп мисал

Иң төп исемлек төркеме - исемлек әйберләре һәм тиешле класслар белән тәртипсез исемлек. Киләсе вариантлар белән, яисә кирәк булганда үзегезнең CSS белән төзегез.

  • Крас Джасто Одио
  • Dapibus ac facilisis
  • 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а өстәгез ..list-group-item

  • Крас Джасто Одио
  • Dapibus ac facilisis
  • 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а өстәгез . Игътибар итегез, кайбер элементлар шулай ук ​​махсус JavaScript таләп итәләр, аларның басу вакыйгаларын (мәсәлән, сылтамалар)..list-group-item.disabled

  • Крас Джасто Одио
  • Dapibus ac facilisis
  • Morbi leo risus
  • Porta ac consectetur ac
  • Вестибулум
<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>

Күчереп, инвалид һәм актив халәтләр белән эшлекле исемлек төркемнәрен булдыру өчен <a>s яки s кулланыгыз . Без бу псевдо-классларны интерактив булмаган элементлардан ясалган исемлек төркемнәрен ( с яки с кебек) басу яки мөмкинлекне тәэмин итмәү өчен аерабыз.<button>.list-group-item-action<li><div>

Монда стандарт классларны кулланмагыз.btn .

Крас Джасто Одио Dapibus ac facilisis Morbi leo risus Porta ac consectetur ac Вестибулум 
<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 ярдәмендә сез класс урынына атрибутны <button>куллана аласыз . Кызганыч, инвалид атрибутны хупламыйлар.disabled.disabled<a>

<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Ата-аналар контейнерында (мәсәлән, карточкалар) исемлек төркем әйберләрен күрсәтү өчен кайбер чикләрне һәм түгәрәк почмакларны бетерү өчен өстәгез .

  • Крас Джасто Одио
  • Dapibus ac facilisis
  • 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>

Горизонталь

.list-group-horizontalБарлык кисешү пунктлары буенча вертикальдән горизонтальгә исемлек төркеме әйберләренең макетын үзгәртү өчен өстәгез . .list-group-horizontal-{sm|md|lg|xl}Альтернатив рәвештә, исемлек төркемен горизонталь ясау өчен җаваплы вариантны сайлагыз min-width. Хәзерге вакытта горизонталь исемлек төркемнәрен флеш исемлек төркемнәре белән берләштереп булмый.

ProTip: Горизонталь булганда тигез киңлектәге исемлек төркем әйберләрен телисезме? .flex-fillListәрбер исемлек төркеменә өстәгез .

  • Крас Джасто Одио
  • Dapibus ac facilisis
  • Morbi leo risus
<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>
  • Крас Джасто Одио
  • Dapibus ac facilisis
  • Morbi leo risus
<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>
  • Крас Джасто Одио
  • Dapibus ac facilisis
  • Morbi leo risus
<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>
  • Крас Джасто Одио
  • Dapibus ac facilisis
  • Morbi leo risus
<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>
  • Крас Джасто Одио
  • Dapibus ac facilisis
  • Morbi leo risus
<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>

Контекст дәресләре

Дәүләт фоны һәм төсе булган әйберләр исемлеген стильләштерү өчен контекстуаль классларны кулланыгыз.

  • Dapibus ac facilisis
  • Гади төп исемлек төркеме
  • Гади икенчел исемлек төркеме
  • Гади уңышлар исемлеге төркем пункты
  • Гади куркыныч исемлеге төркеме
  • Гади кисәтү исемлеге төркем пункты
  • Гади мәгълүмат исемлеге төркем пункты
  • Гади яктылык исемлеге төркеме
  • Гади караңгы исемлек төркеме
<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​​дәүләт ярдәм итә; контекстуаль исемлек төркемендәге актив сайлау өчен аны кулланыгыз.

Dapibus ac facilisis Гади төп исемлек төркеме Гади икенчел исемлек төркеме Гади уңышлар исемлеге төркем пункты Гади куркыныч исемлеге төркеме Гади кисәтү исемлеге төркем пункты Гади мәгълүмат исемлеге төркем пункты Гади яктылык исемлеге төркеме Гади караңгы исемлек төркеме 
<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класс белән яшерелгән өстәмә текст кебек альтернатив чаралар аша кертелүен тәэмин итегез.

Бейджлар белән

Кайбер коммуналь хезмәтләр ярдәмендә укылмаган саннарны, активлыкны һәм башкаларны күрсәтү өчен теләсә нинди исемлек төркеменә бейджлар өстәгез .

  • Крас Джасто Одио14
  • Dapibus ac facilisis2
  • 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 өстәгез .

Төркем элементының исемлеген күрсәтегез
3 көн элек

Donec id elit non mi porta gravida eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Төркем элементының исемлеген күрсәтегез
3 көн элек

Donec id elit non mi porta gravida eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Төркем элементының исемлеген күрсәтегез
3 көн элек

Donec id elit non mi porta gravida 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 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>

JavaScript тәртибе

JavaScript плагинын кулланыгыз - аны индивидуаль яки тупланган bootstrap.jsфайл аша кертегез - безнең исемлек төркемен җирле эчтәлекнең таблицаларын булдыру өчен киңәйтегез.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisising күнегү фугат темпоры. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad min min tempor sunt voluptate consectetur күнегүләр ид нулла. 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.

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

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 контейнер төене 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>

.tab ('шоу')

Бирелгән исемлек пунктын сайлый һәм аның белән бәйле такта күрсәтә. Элек сайланган бүтән исемлек сайланмый һәм аның белән бәйле такта яшерелә. Таблицалар тактасы күрсәтелгәнче шалтыратучыга кире кайта (мәсәлән, shown.bs.tabвакыйга булганчы).

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

Вакыйгалар

Яңа кыстыргычны күрсәткәндә вакыйгалар түбәндәге тәртиптә янып тора:

  1. hide.bs.tab(хәзерге актив кыстыргычта)
  2. show.bs.tab(күрсәтеләчәк кыстыргычта)
  3. hidden.bs.tabhide.bs.tab(алдагы актив кыстыргычта, вакыйга белән бер үк )
  4. shown.bs.tabshow.bs.tab(яңа-актив гына күрсәтелгән кыстыргычта, вакыйга белән бер үк )

Әгәр дә бернинди кыстыргыч актив булмаса, вакыйгалар hide.bs.tabһәм hidden.bs.tabвакыйгалар атылмаячак.

Вакыйга төре Тасвирлау
show.bs.tab Бу вакыйга таблицада күрсәтелә, ләкин яңа кыстыргыч күрсәтелгәнче. event.targetАктив кыстыргычны һәм event.relatedTargetалдагы актив кыстыргычны кулланыгыз .
күрсәтелгән.bs.tab Бу вакыйга таблицаны күрсәткәннән соң таблицада күрсәтелә. event.targetАктив кыстыргычны һәм event.relatedTargetалдагы актив кыстыргычны кулланыгыз .
hide.bs.tab Бу вакыйга яңа кыстыргыч күрсәтелергә тиеш (һәм шулай итеп алдагы актив кыстыргыч яшерелергә тиеш). event.targetХәзерге актив кыстыргычны һәм event.relatedTargetяңа тиздән актив булачак кыстыргычны кулланыгыз .
hidden.bs.tab Бу вакыйга яңа кыстыргыч күрсәтелгәннән соң янып тора (һәм шулай итеп алдагы актив кыстыргыч яшерелгән). Элеккеге актив кыстыргычны һәм яңа актив кыстыргычны event.targetкулланыгыз .event.relatedTarget 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})