Bootstrap 3 - Списки

На этом уроке вы узнаете, как применять стили к различным видам списков с помощью Twitter Bootstrap.

Создание списков с помощью Twitter Bootstrap

Основные типы списков:

  • Маркированный список – это список элементов, порядок которых не имеет значения. Элементы списка начинаются с маркера.
  • Нумерованный список – это набор элементов, порядок которых имеет значение. Элементы нумерованного списка начинаются с выражения, включающего номер или букву.
  • Список определений – это список терминов и связанных с ними описаний.

Создание маркированного списка

<ul>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка
        <ul>
            <li>Элемент 2 уровня</li> 
            <li>Элемент 2 уровня</li> 
            <li>Элемент 2 уровня</li> 
        </ul>
    </li>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
</ul>

Выше приведенный пример будет выглядеть примерно так:

  • Элемент маркированного списка
  • Элемент маркированного списка
  • Элемент маркированного списка
    • Элемент 2 уровня
    • Элемент 2 уровня
    • Элемент 2 уровня
  • Элемент маркированного списка
  • Элемент маркированного списка

Создание нумерованного списка

<ol>
    <li>Элемент нумерованного списка</li>
    <li>Элемент нумерованного списка</li>
    <li>Элемент нумерованного списка</li>
    <li>Элемент нумерованного списка</li>
    <li>Элемент нумерованного списка</li>
</ol>

Выше приведенный пример будет выглядеть примерно так:

  1. Элемент нумерованного списка
  2. Элемент нумерованного списка
  3. Элемент нумерованного списка
  4. Элемент нумерованного списка
  5. Элемент нумерованного списка

Создания нумерованных и маркированных списков без использования стилей

Для создания нумерованных и маркированных списков без использования стилей, Вам необходимо применить класс .list-unstyled к соответствующим тегам <ul> или <ol>.

<ul class="list-unstyled">
  <li>Главная</li>
  <li>Тарифы
    <ul>
      <li>Свой*</li>
      <li>Turbo Fresh</li>
    </ul>
  </li>
  <li>Форум</li>
  <li>Контакты</li>
</ul>

Выше приведенный пример будет выглядеть примерно так:

  • Главная
  • Тарифы
    • Свой*
    • Turbo Fresh
  • Форум
  • Контакты

Примечание: Класс .list-unstyled удаляет свойство CSS list-style и отступы слева (padding) только для элементов, которые расположены внутри контейнеров <ul> или <ol>.

Размещения нумерованных и маркированных списков в одну строку

Если вы хотите создать горизонтальное меню с использованием нумерованных или маркированных списков, то вам необходимо разместить все элементы списка в одну строку. Вы можете сделать это, просто применив класс Bootstrap .list-inline к соответствующим тегам <ul> или <ol>. Класс .list-inline также добавляет небольшие отступы слева и справа (5px по умолчанию) ко всем элементам списка.

<ul class="list-inline">
  <li>Главная</li>
  <li>Тарифы<li>;
  <li>Форум</li>
  <li>Контакты</li>
</ul>

Выше приведенный пример будет выглядеть примерно так:

  • Главная
  • Тарифы
  • Форум
  • Контакты

Создание горизонтальных списков определений

Термины и связанные с ними описания могут быть также размещены в одну строку с использованием класса Bootstrap .dl-horizontal. Термины в горизонтальных списках определений будут обрезаны, если они слишком длинные, чтобы поместиться в левую колонку (160px по умолчанию). Однако, для устройств с маленьким экраном (ширина меньше 768px) списки определений изменяют своё отображение по умолчанию на вертикальное.

<dl class="dl-horizontal">
    <dt>HTML</dt>
    <dd>Стандартный язык разметки документов во Всемирной паутине.</dd>
    <dt>CSS</dt>
    <dd>Формальный язык описания внешнего вида документа, написанного с использованием языка разметки.</dd>
    <dt>JavaScript</dt>
    <dd>Прототипно-ориентированный сценарный язык программирования. Является диалектом языка ECMAScript.</dd>
</dl>

Выше приведенный пример будет выглядеть примерно так:

HTML
Стандартный язык разметки документов во Всемирной паутине.
CSS
Формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
JavaScript
Прототипно-ориентированный сценарный язык программирования. Является диалектом языка ECMAScript.

Примечание: Обрезанная часть терминов в горизонтальных списках определений, будет замена на многоточие (...), используя CSS свойство text-overflow

Создание групповых списков с помощью Twitter Bootstrap

Групповые списки - это очень полезный компонент для отображения списка элементов в изящной манере. В наиболее общей форме групповой список представляет собой неупорядоченный список с элементами и классами.

<ul class="list-group">
    <li class="list-group-item">Избранное</li>
    <li class="list-group-item">Пользователи</li>        
    <li class="list-group-item">Статьи</li>
    <li class="list-group-item">Изображения</li>
</ul>

Выше приведенный пример будет выглядеть примерно так:

  • Избранное
  • Пользователи
  • Статьи
  • Изображения

Затем, Вы можете, добавить гиперссылки к элементам группового списка. Для этого замените тег <li> на тег <a>, а в качестве элемента контейнера используйте тег <div> вместо <ul>. Вы также можете добавить иконки и значки к групповому списку, что бы сделать его более изящным. Компонент значков будет автоматически расположен справа.

<div class="list-group">
    <a href="#" class="list-group-item active">
        <span class="glyphicon glyphicon-star"></span> Избранное <span class="badge">9</span>
    </a>
    <a href="#" class="list-group-item">
        <span class="glyphicon glyphicon-user"></span> Пользователи <span class="badge">24</span>
    </a>
    <a href="#" class="list-group-item">
        <span class="glyphicon glyphicon-th-list"></span> Статьи <span class="badge">411</span>
    </a>
    <a href="#" class="list-group-item">
        <span class="glyphicon glyphicon-camera"></span> Изображение <span class="badge">25</span>
    </a>
</div>

Выше приведенный пример будет выглядеть примерно так:

Совет: Вы можете использовать компонент групповых списков Bootstrap для создания навигации в боковой панели. Например, отображая список продуктов или категорий на Вашем веб-сайте.

Вы также можете использовать другие HTML элементы, как заголовки и абзацы при создании групповых списков.

<div class="list-group">
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">Что такое HTML?</h4>
        <p class="list-group-item-text">HTML - это стандартный язык разметки документов во Всемирной паутине.</p>
    </a>
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">Что такое CSS?</h4>
        <p class="list-group-item-text">CSS - это формальный язык описания внешнего вида документа, написанного с использованием языка разметки.</p>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">Что такое JavaScript?</h4>
        <p class="list-group-item-text">JavaScript - это прототипно-ориентированный сценарный язык программирования. Является диалектом языка ECMAScript.</p>
    </a>
</div>

Выше приведенный пример будет выглядеть примерно так:



   Bootstrap 0    20059 0

Комментарии (12)

  1. droidjony # 0
    пожалуйста помогите! При использований групповых списков
    .list-group а.list-group-item
    при фокусе показывает синюю рамку вокруг ссылки, как исправить на нужный мне цвет? пробовал
    .list-group а.list-group-item:focus
    не помогает!
    то есть вот что у меня должно быть
    <div class="dropdown">
    	<a href="#" class="list-group-item" data-toggle="dropdown">Интернет</a>
    	<div class="dropdown-menu navmenu-nav" role="menu">
    		<a class="list-group-item" href="#"><small>Программирование</small></a>
    	</div>
    </div>
    1. Александр Мальцев # 0
      Здравствуйте.
      Должно работать. Попробуйте добавить !important:
      .list-group-item {
        background-color: #fff !important;
        border-color: #ddd !important;
      }
      a.list-group-item:focus, a.list-group-item:hover {
        color: #555 !important;
        background-color: #f5f5f5 !important;
      }
      
      1. droidjony # 0
        не помогло!
      2. Ярослав # 0
        У вас и не будет работать так как вы используете дропдаун, и у вас нет контейнера с класом list-group, так как вы хотите использовать стиль который проходит через list-group?
      3. Бурый # 0
        Добрый день! Подскажите пожалуйста, как создать список из строки. Есть строка в БД, как выстроить ее в виде списка в представлении MVC. @Model.DescriptionFunctional.
        1. Сергей # 0
          Добрый день.
          Подскажите каким образом с использованием бутстрапа, или еще чего, сделать след. Есть список из 9 пунктов. Три пункта должны показываться всегда, а другие 7 скрыты под надписью «показать еще». По нажитию на эту надпись-ссылку, происходит отображение оставшихся 7 пунктов. Т.е. буду показаны все 9 пукнтов, а надпись «показать еще» исчезнет.
          1. Александр Мальцев # 0
            Здравствуйте.
            Например, имеется список:
            <ul>
              <li>Элемент 1</li>
              <li>Элемент 2</li>
              <li>Элемент 3</li>
              <span id="more">Показать ещё</span>
              <li>Элемент 4</li>
              <li>Элемент 5</li>
              <li>Элемент 6</li>
              <li>Элемент 7</li>
              <li>Элемент 8</li>
              <li>Элемент 9</li>
            </ul>
            
            Скрываем ненужные элементы с помощью CSS. Кроме этого задаём необходимое оформление:
            #more ~ li {
              display: none;
            }
            #more {
              color: red;
            }
            #more:hover {
              cursor: pointer;
              border-bottom: 1px red dotted;
            }
            
            Пишем сценарий на JavaScript (+jQuery):
            $(function(){
              $('#more').click(function(){
                $(this).hide();
                $('#more ~ li').fadeIn();
              });
            });
            
            1. Сергей # 0
              Спасибо!
          2. Oleg # 0
            Здравствуйте!
            Вы не подскажете как можно в списках в Бутстрапе сделать выравнивание justify? Если вообще можно, конечно…
            Пусть и при простой конструкции, типа тех, что приведены в Ваших примерах…
            Спасибо!
            1. Александр Мальцев # 0
              Добавить к такому меню класс text-justify:
              <!-- Маркированное меню -->
              <ul class="text-justify">
                ...
              </ul>
              <!-- Нумерованное меню -->
              <ol class="text-justify">
                ...
              </ol>
              
            2. Иван # 0
              Здравствуйте!
              Подскажите как выровнять маркированный список по центру блока (вместе с маркерами)?
              1. Александр Мальцев # 0
                Необходимо элемент ul обернуть в div. Элементу ul задать display, равный inline-block. А элементу div класс text-center.
                <div class="text-center">
                  <ul class="list">
                    <li>Элемент маркированного списка</li>
                    <li>Элемент маркированного списка</li>
                    <li>Элемент маркированного списка</li>
                  </ul>
                </div>
                
                Ну и собственно стили:
                ul.list {
                  display: inline-block;
                }
                
                2 вариант (с помощью абсолютного позиционирования):
                <div class="wrapper-list">
                  <ul class="list">
                    <li>Элемент маркированного списка</li>
                    <li>Элемент маркированного списка</li>
                    <li>Элемент маркированного списка</li>
                  </ul>
                </div>
                
                CSS-стили:
                .wrapper-list {
                  position: relative;
                }
                .wrapper-list ul.list {
                  position: absolute;
                  left: 50%;
                  transform: translatex(-50%);
                }
                

              Вы должны авторизоваться, чтобы оставлять комментарии.