Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

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

05.08.2016


11:00


3380


пока нет


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

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

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

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

Пагинация

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

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

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

Метки, теги

Либо вот так:

Метки, теги

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

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

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

Чтобы в 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

Результат:

Метки, теги

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



Случайные записи:

  1. Всплывающие подсказки. Основы bootstrap 3 для начинающих. Урок №19
  2. Нам 2 годика! С Днем Рождения StepkinBlog.ru!!!
  3. Бесплатный курс по основам Bootstrap3
  4. Переменные в php. Основы PHP с нуля. Урок №5
  5. Вертикальное меню (панель). Основы bootstrap 3 для начинающих. Урок №11

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245