Делаем пагинацию pagination и хлебные крошки breadcrumb

Постраничная навигация или пагинация pagination.

Рассмотрим два вида хлебных крошек.

1 Создаем nav, ul класс pagination, внутри него создадим девять li в каждой будет ссылка.

Прописываем одной строкой в sublime text и нажимаем tab, плагин emmet все распакует.

• Первая ссылка будет содержать две стрелки влево иконок font awesome.
• Вторая ссылка одну стрелочку влево fa fa-chevron-left.
• У последних li сделаем по аналогии, только стрелки будут вправо fa fa-chevron-right.

Первой странице задаем активный пункт li class=active.

Для пагинации можно задать два размера с классом

1. pagination-lg.
2. pagination-sm.

Код в index.html.

2 Альтернативный способ хлебных крошек.

Навигация nav с классом у ul pager, внутри будет два элемента списка, у каждого ссылка.

Код для emmet.

Добавим ссылкам названия старые и новые записи.

Стрелочки будут из html велво &larr и точка с запятой.

Расшифровывается как left arrow.

Кнопки будут по центру, но если добавить классы class= previous и class=next, то кнопки будут по краям страницы.

Хлебные крошки breadcrumb.

Положим хлебные крошки в контейнер с классом row.

Создаем нумерованный список с классом breadcrumb в нем четыре элемента списка с ссылками.

Строка в emmet.

Начнем с главной страницы home и икнокой домика fa fa-home.

Следующая ссылка blog.

У блога есть категории Category и статьи.

Допустим мы уже в этой статье, тогда добавим класс class=active.

Стили в main.sass.

Разделительные полосы можно заменить иконками font awesome.

Breadcrumb берет дочерний li и следующему соседу li задает before.

В content пропишем код иконки \f105.

И шрифт будет font-family: fontawesome.