Постраничная навигация или пагинация pagination.
Рассмотрим два вида хлебных крошек.
1 Создаем nav, ul класс pagination, внутри него создадим девять li в каждой будет ссылка.
Прописываем одной строкой в sublime text и нажимаем tab, плагин emmet все распакует.
1 |
section>.container>.row>.nav>ul.pagination>li*9>a |
- Первая ссылка будет содержать две стрелки влево иконок font awesome.
- Вторая ссылка одну стрелочку влево fa fa-chevron-left.
- У последних li сделаем по аналогии, только стрелки будут вправо fa fa-chevron-right.
Первой странице задаем активный пункт li class=active.
Для пагинации можно задать два размера с классом
- pagination-lg.
- pagination-sm.
Код в index.html.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<section> <div class="container"> <div class="row"> <div class="nav text-center"> <ul class="pagination pagination-lg"> <li><a href=""><i class="fa fa-chevron-left"></i><i class="fa fa-chevron-left"></i></a></li> <li><a href=""><i class="fa fa-chevron-left"></i></a></li> <li class="active"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li><a href="">5</a></li> <li><a href=""><i class="fa fa-chevron-right"></i></a></li> <li><a href=""><i class="fa fa-chevron-right"><i class="fa fa-chevron-right"></i></i></a></li> </ul> </div> </div> </div> </section> |
2 Альтернативный способ хлебных крошек.
Навигация nav с классом у ul pager, внутри будет два элемента списка, у каждого ссылка.
Код для emmet.
1 |
nav>ul.pager>li*2>a |
Добавим ссылкам названия старые и новые записи.
Стрелочки будут из html велво &larr и точка с запятой.
Расшифровывается как left arrow.
Кнопки будут по центру, но если добавить классы class= previous и class=next, то кнопки будут по краям страницы.
1 2 3 4 5 6 |
<nav> <ul class="pager"> <li class="previous"><a href="#">← Старые записи</a></li> <li class="next"><a href="#">Новые записи →</a></li> </ul> </nav> |
Хлебные крошки breadcrumb.
Положим хлебные крошки в контейнер с классом row.
Создаем нумерованный список с классом breadcrumb в нем четыре элемента списка с ссылками.
Строка в emmet.
1 |
section>.container>.row>ol.breadcrump>li*4>a |
Начнем с главной страницы home и икнокой домика fa fa-home.
Следующая ссылка blog.
У блога есть категории Category и статьи.
Допустим мы уже в этой статье, тогда добавим класс class=active.
1 2 3 4 5 6 7 8 9 10 11 12 |
<section> <div class="container"> <div class="row"> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-home">Home</i></a></li> <li><a href="#"><i class="fa fa-rss">Blog</i></a></li> <li><a href="#"><i class="fa fa-graduation-cap">Category</i></a></li> <li class="active"><a href="#"><i class="fa fa-sticky-note-o">the name of the article</i></a></li> </ol> </div> </div> </section> |
Стили в main.sass.
Разделительные полосы можно заменить иконками font awesome.
Breadcrumb берет дочерний li и следующему соседу li задает before.
В content пропишем код иконки \f105.
И шрифт будет font-family: fontawesome.
1 2 3 |
.breadcrumb > li + li:before content: "\f105" font-family: 'fontawesome' |