Главная » Bootstrap » Уроки Bootstrap 3.0 для начинающих – списки. 7-й урок

Уроки Bootstrap 3.0 для начинающих – списки. 7-й урок

2015-06-18 / Вр:10:32 / просмотров: 13955

В этом уроке вы узнаете и научитесь применять различные стили к различным видам списков с помощью Фреймворка Twitter Bootstrap. Вы увидите, как из обычного HTML списка можно быстро все оформить с помощью Bootstrap. Начну с простого.

Основные типы списков, которые мы рассмотрим в этом уроке:

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

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

Для начала я покажу, как в Bootstrap создаются стандартные списки (маркированные и нумерованные списки). А потом перейдем к более интересному.

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

Чтобы создать маркированный список в Bootstrap, достаточно воспользоваться знаниями основ 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 уровня
Элемент маркированного списка
Элемент маркированного списка

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

Чтобы создать нумерованный список в Bootstrap, достаточно использовать стандартные HTML-теги <ol><li>……</li></ol>:

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

Результат:

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

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

Чтобы создать список определений в Bootstrap, достаточно использовать стандартные HTML-теги <dl><dt><dd>……</dd></dt></dl>:

<dl>
   <dt>Тег</dt>
     <dd>Тег — это ........</dd>
   <dt>HTML-документ</dt>
     <dd>HTML-документ — это ........</dd>
   <dt>Сайт</dt>
   <dd>Cайт — это .........</dd>
</dl>

Результат:

Тег: Тег — это ........
HTML-документ: HTML-документ — это ........
Сайт: Cайт — это .........

Вот теперь переходим к более интересному. Хочу вам продемонстрировать парочку возможностей для работы со списками, которые дает Bootstrap.

Создание нумерованных и маркированных списков без нумерации и маркирования

Если вам нужно убрать из списков номера и маркеры, то необходимо применить класс «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>

Результат:

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

Более сложный список с двойным уровнем

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

Результат:

Уроки Bootstrap 3.0 для начинающих – списки. 7-й урок

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

Этот пример поможет вам создать горизонтальное меню из нумерованных или маркированных списков. Все элементы списка будут размешены горизонтально в одну строку, если вы примените класс «list-inline» к тегам <ul> или <ol>.

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

Результат:

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

Можно список определений разместить в одну строку. Это, довольно таки, смотрится красиво. Убедитесь в этом сами, когда увидите результат.
Итак, чтобы разместить список определений в одну строку, примените класс «dl-horizontal» к тегу <dl>:

<dl class="dl-horizontal">
   <dt>HTML</dt>
     <dd>HTML –  (от англ. Hypertext Markup Language ) это язык разметки гипертекста. Он впервые был разработан британским учёным Тимом Бернерс-Ли (Tim Berners-Lee) в 1991—1992 годах.</dd>
   <dt>CSS</dt>
     <dd>CSS (Cascading Style Sheets) – это каскадные таблицы стилей, которые хранят в себе правила для группы или одиночного элемента. CSS используют для изменения внешнего вида дизайна сайта (цвет, размер текста, фон и др.).</dd>
   <dt>PHP</dt>
   <dd>PHP (Hypertext Preprocessor - Препроцессор Гипертекста) – один из самых лучших и легких языков программирования, специально разработанный для написания web-приложений и может внедряться в HTML-код.</dd>
</dl>

Результат:

Уроки Bootstrap 3.0 для начинающих – списки. 7-й урок

Если вы будете смотреть список определений на маленьких экранах (ширина меньше 768px), горизонтальные списки определений поменяются на вертикальные (по умолчанию).

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

Хорошая возможность создать красивое вертикальное меню.

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

Результат:

Уроки Bootstrap 3.0 для начинающих – списки. 7-й урок

Если добавить ссылки к элементам спискам, выйдет симпатичное меню, где при нажатии останется выделенное активное меню.

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

Результат:

Уроки Bootstrap 3.0 для начинающих – списки. 7-й урок

Если добавить к элементам списка иконки, выйдет еще более красивое меню, где при нажатии останется выделенное активное меню.

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

Результат:

Уроки Bootstrap 3.0 для начинающих – списки. 7-й урок

Все стили иконок glyphicon мы рассмотрим в других уроках.

Если заменить тег <ul> на тег <div>, а <li> на <a href>, то в итоге получится изящное адаптивное меню. Итак, код:

<div class="list-group list-unstyled">
    <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-th-list"></span> Портфолио<span class="badge">24</span></a>
    <a href="#" class="list-group-item"><span class="glyphicon glyphicon-user"></span> Автор<span class="badge">2</span></a>
    <a href="#" class="list-group-item"><span class="glyphicon glyphicon-envelope"></span> Контакты<span class="badge">2</span></a>
</div>

Результат:

Уроки Bootstrap 3.0 для начинающих – списки. 7-й урок

Я думаю, не стоит отходить от темы списков, а то я уже зацепил тему создания меню :mrgreen:. В следующих уроках вас ждет еще одна интересная тема. Не пропустите моих уроков по основам Фреймворка Twitter Bootstrap.
Удачи!!!