Опубликовано от — Оставить комментарий

Bootstrap список

Создание списочной группы в Bootstrap
Создание списочной группы в Bootstrap

Bootstrap список или списочная группа — компонент фреймворка, позволяющий отобразить набор строк, подобно обычному списку, но в стиле оформления Bootstrap, без маркеров. Это очень гибкий компонент, который может быть использован при построении меню, перечня строк. Основные CSS-классы: .list-group (сама списочная группа) и .list-group-item (элемент этой группы). Вместе с списком могут быть использованы баджи, для указания пришедшей почты или совершении какого-то события (условия возникновения события прописывает программист).

Bootstrap список

https://youtu.be/YN05XpXRvH4

Пример кода стандартной списочной группы,  один из элементов которой содержит уведомление:

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span><!-- уведомление -->
     Cras justo odio
  </li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Результат будет напоминать меню моего почтового ящика 🙂 :

Пример списочной группы в Bootstrap
Пример списочной группы в Bootstrap

Для окраски верхнего (или другого пункта группы), можно применить класс .active, например:

 <a href="#" class="list-group-item active">
    Cras justo odio
  </a>

Можно создать списочную группу, состоящую полностью из кнопок. Примечание: в этом случае нельзя использовать стандартные классы .btn

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Блокировка пункта списка выполняется классом .disabled.

Каждый пункт меню может быть контекстно окрашен:

Пример окрашенной списочной группы
Пример окрашенной списочной группы
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
Добавить комментарий