Адаптивная книжная полка · Bootstrap

Логотип книжной полки bootstrap

Адаптивный элемент дизайна в виде книжной полки работающий при подключенном плагине bootstrap, сделано основное описание подкреплённое живыми примерами.

Книжная полка из 6 книг для вёрстки bootstrap

Можно установить неограниченное количество полок, при переходе на малое разрешение полка разделяется на 3 книги.

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

После каждой 3 книги в коде идёт разделение кодом для дисплеев с малыми размерами.

<div class="col-xs-12 shelf hidden-md hidden-lg"></div>

Каждая 6 книга имеет разделяющий код в конце.

<div class="col-xs-12 shelf"></div>

Действующий пример из 2 полок, при желании можно вносить свои изменения в код.

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Цвет самой полки можно изменить на своё усмотрение.

a:before {
background: rgba(0,0,0,.85); - Верхняя часть полки
.shelf:after {
height: 500px; - Тарцевая часть полки

Демонстрация примера на внешнем ресурсе.

CODEPEN

Рейтинг: 5.0/5 из 2



Добавлено Автор Ник Источник Просмотров Комментариев Теги
29-08-2015 Михаил Меренков aTmpl © 467 0 для bootstrap, адаптивный элемент