Списки. Основы bootstrap 3 для начинающих. Урок №8

Всем привет!
Продолжаем изучать основы «bootstrap3».
В сегодняшнем уроке вы научитесь работать со списками.
Увидите, как стандартные HTML списки можно легко и быстро оформить или изменить, используя  классы bootstrap3.

Если вы проходили уроки по HTML, то знаете, какие есть основные типы списков. Коротко вспомним о них:

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

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

Здесь ничего сложно нет. Маркированные списки создаются стандартным путем, путем использования HTML тегов  <ul><li>……</li></ul>:

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

Результат:

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

Маркированный список с двойным уровнем:

<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 уровня
• Элемент маркированного списка
• Элемент маркированного списка

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

Нумерованные списки создаются стандартным путем, путем использования HTML тегов  <ol><li>……</li></ol>:

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

Результат:

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

Создание списка определений

Списки определений создаются стандартным путем, путем использования HTML тегов  <dl><dt><dd>……</dd></dt></dl>:

<dl>
<dt>1. HTML</dt>
<dd>Гипертекстовый язык разметки</dd>
<dt>2. CSS</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>

Результат:

Убираем нумерацию и маркирование с нумерованных и маркированных списков
Чтобы убрать нумерацию и маркировку со списков, в bootstrap3 необходимо применить класс «list-unstyled» к тегам <ul> или <ol>.

для маркированных:

<ul class="list-unstyled">
<li>Элемент маркированного списка</li>
<li>Элемент маркированного списка</li>
<li>Элемент маркированного списка</li>
<li>Элемент маркированного списка</li>
<li>Элемент маркированного списка</li>
</ul>

для нумерованных:

<ol class="list-unstyled">
<li>Элемент нумерованного списка</li>
<li>Элемент нумерованного списка</li>
<li>Элемент нумерованного списка</li>
<li>Элемент нумерованного списка</li>
<li>Элемент нумерованного списка</li>
</ol>

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

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

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

Если вам нужно разместить нумерованные или маркированные списки в одну строку, то нужно применить класс «list-inline» к тегам <ul> или <ol>:

<ul class="list-inline">
<li>Главная</li>
<li>Портфолио</li>
<li>Автор</li>
<li>Контакты</li>
</ul>

Результат:

• Главная
• Портфолио
• Автор
• Контакты

Создание групповых списков
На мой взгляд, создание групповых списков – хорошая возможность создать красивое вертикальное меню.  В bootstrap3 необходимо применить класс «list-group» к тегам <ul> или <ol> и класс «list-group-item» к тегу <li>:

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

Результат:

• Главная
• Портфолио
• Автор
• Контакты

Естественно, чтобы получилось красивое меню, нужно добавить еще ссылки и тогда пропишем класс  «list-group-item» к тегу <a> вместо тега <li> и добавим дополнительный класс «list-unstyled» к тегу <ul> или <ol>:

<ul class="list-group list-unstyled">
<a href="#" class="list-group-item">
<li>Главная</li>
</a>
<a href="#" class="list-group-item">
<li>Портфолио</li>
</a>
<a href="#" class="list-group-item">
<li>Автор</li>
</a>
<a href="#" class="list-group-item">
<li>Контакты</li>
</a>
</ul>

При наведении на разделы меню, целый блок будет выделяться.

 

К спискам можно добавить стандартные bootstrap3 иконки.

<ul class="list-group list-unstyled">
<a href="#" class="list-group-item"><li><span class="glyphicon glyphicon-star"></span> Главная</li></a>
<a href="#" class="list-group-item"><li><span class="glyphicon glyphicon-th-list"></span> Портфолио</li></a>
<a href="#" class="list-group-item"><li><span class="glyphicon glyphicon-user"></span> Автор</li></a>
<a href="#" class="list-group-item"><li><span class="glyphicon glyphicon-envelope"></span> Контакты</li></a>
</ul>

Результат:

Создание выпадающего списка
О, это очень интересный материал! Думаю, этой теме стоит уделить не один абзац, а сделать отдельную тему. Пожалуй, я так и сделаю, и следующая моя статья будет именно о том, как сделать выпадающий список. Расскажу и научу даже больше: как с помощью выпадающего списка создать отличное выпадающее меню для сайта.