Учимся создавать пагинацию, хлебные крошки и метки (теги). Основы bootstrap 3 для начинающих. Урок №12

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

Пагинация  —  это порядковая нумерация веб-страниц. Выглядит она вот так:

Хлебные крошки — это навигационная цепочка, с помощью которой пользователю легко ориентироваться, в какой категории он находится.

Метки они же и теги — это дополнительный  способ для навигации по сайту. Выглядят на сайтах примерно вот так:

Либо вот так:

Мы же попробуем ярко и красиво создать в bootstrap3 облако тегов .

Теперь сам код.

Создание пагинаций

Чтобы в bootstrap3 создать пагинацию, достаточно прописать класс «pagination» для тега <ul>

<ul class="pagination">
<li><a href="#">«</a></li>
<li><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="#">»</a></li>
</ul>

Результат:

Создание хлебных крошек

Чтобы в bootstrap3 создать хлебные крохи, достаточно прописать класс «breadcrumb» для тега <ul>

<ul class="breadcrumb">
<li><a href="#">Главная</a></li>
<li><a href="#">Категория</a></li>
<li>Страница</li>
</ul>

Результат:

Создание меток (тегов).

Чтобы в bootstrap3 создать метки, достаточно прописать класс «label» для тега <span>:

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

За цвет отвечает класс «label-xxx».
xxx - сюда вставляете название цвета:

default
primary
success
info
warning
danger

Результат:

Жду вас на следующих уроках.