Верстка и веб-дизайн. 3 курс. Практическое занятие №6. Bootstrap верстка интерактивных Flip-карт

апреля 16, 2026

Верстка и веб-дизайн. 3 курс. Практическое занятие №6. Bootstrap верстка интерактивных Flip-карт

Вам нужно создать две flip-карты с фото на фронтальной панели и описанием на задней панели и разместить их горизонтально с помощью bootstrap-верстки.

Вам потребуются:

I) Bootstrap-библиотека стилей и Font Awesome;

II) Параметры стилей в CSS;

III) JavaScript-библиотека;

IV) Динамический сценарий JavaScript;

V) HTML.

Оба фото для flip-карт сохраните в нужном размере и загрузите в репозиторий

I) Bootstrap-библиотека стилей и Font Awesome

1) Библиотеку можно взять здесь и подключить: https://raw.githubusercontent.com/Dmitrykonn/konoplev/master/bootstrapmin.css

2) Font Awesome необходимо встроить используя ссылку: https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

II) Параметры стилей в CSS

3) В универсальном селекторе указываем общие параметры блока:

* {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

4) В селекторе body указываем отступы. Также здесь необходимо указать фон страницы, на котором будут располагаться flip-карты:

body {

padding-top: 50px;

padding-bottom: 20px;

overflow-x: hidden;

}

5) Теперь задаем классы навигации по кнопкам flip-карт:

.btn-flip-extend, .btn-flip:hover, .btn-flip:focus {

background-color: transparent;

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

opacity: 1;

}

.btn-flip {

opacity: 0.8;

color: #666666;

background-color: transparent;

}

6) Создаем класс контейнера карты. Обратите внимание, что его высота равна высоте всей вашей карты:

.card-container {

-moz-perspective: 800px;

-webkit-perspective: 800px;

perspective: 800px;

-moz-transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

margin-bottom: 30px;

width: 100%;

height: 320px;

}

7) Добавляем классы движения flip-карт:

.card-container:not(.manual-flip):hover .front {

-moz-transform: rotateY(180deg);

-ms-transform: rotateY(180deg);

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

}

.card-container:not(.manual-flip):hover .back {

-moz-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

-webkit-transform: rotateY(0deg);

transform: rotateY(0deg);

}

.card-container.hover.manual-flip .front {

-moz-transform: rotateY(180deg);

-ms-transform: rotateY(180deg);

-webkit-transform: rotateY(180deg);

transform: rotateY(180deg);

}

.card-container.hover.manual-flip .back {

-moz-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

-webkit-transform: rotateY(0deg);

transform: rotateY(0deg);

}

8) Создаем класс самой карты с параметрами перехода:

.card {

-moz-transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

-moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

-o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

-webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

position: relative;

background: none repeat scroll 0 0 #fff;

color: #444444;

max-width: 412px;

margin: 0 auto;

}

9) Теперь создаем класс класса для обложки flip-карт:

.card .cover {

-moz-border-radius: 4px 4px 0 0;

-webkit-border-radius: 4px;

border-radius: 4px 4px 0 0;

height: 320px;

overflow: hidden;

z-index: -2;

}

10) Поскольку обложка у нас будет в виде фото, нужно создать класс класса селектора, ориентируясь на пункт 9, с параметрами ширины и высоты. Ширину можно указать в 100%, высоту в пикселях - она совпадает с указанной в пункте 6. Имя селектора можно использовать стандартное для фото: img

11) Создаем класс класса для контента:

.card .content {

background-color: transparent;

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

padding: 10px 20px 20px;

}

12) Для основного блока:

.card .content .main {

min-height: 140px;

}

13) Для названия карты:

.card .name {

font-size: 32px;

text-align: center;

}

14) Для заголовка в названии карты. Здесь укажите цвет шрифта заголовка:

.card h3 {

margin-top: -180px;

font-weight: 300;

line-height: 20px;

}

15) Футер flip-карт:

.card .footer {

margin-top: -80px;

text-align: center;

}

16) Кнопка футера flip-карт с фронтальной и с обратной стороны:

.card .footer .btn-simple {

margin-top: -6px;

}

.back .btn-simple {

position: absolute;

left: 0;

bottom: 4px;

}

17) Текст с обратной стороны. В качестве фона можно применить линейный градиент. Используйте свои цвета:

.card .header {

padding: 55px 20px;

background: linear-gradient(to top, #FF9314, #FF69B4, #FFC0CB);

color: black;

font-size: 11pt;

}

18) Пространство для текста с обратной стороны:

.card .back .content .main {

height: 165px;

}

19) Класс фронтальной части flip-карт с трансформацией и размерами:

.front {

-moz-backface-visibility: hidden;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

-o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

-webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

-moz-transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-moz-transform: rotateY(0deg);

-ms-transform: rotateY(0deg);

-webkit-transform: rotateY(0deg);

transform: rotateY(0deg);

-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);

-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);

box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

position: absolute;

background-color: #fff;

width: 100%;

height: 320px;

top: 0;

left: 0;

z-index: 2;

}

20) То же самое для обратной стороны flip-карт:

.back {

-moz-backface-visibility: hidden;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

-moz-transition: -moz-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

-o-transition: -o-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

-webkit-transition: -webkit-transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);

-moz-transform-style: preserve-3d;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-moz-transform: rotateY(-180deg);

-ms-transform: rotateY(-180deg);

-webkit-transform: rotateY(-180deg);

transform: rotateY(-180deg);

-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);

-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);

box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

position: absolute;

background-color: #fff;

width: 100%;

height: 320px;

top: 0;

left: 0;

}

III) JavaScript-библиотека

21) Библиотеку можно взять здесь и встроить через репозиторий: https://raw.githubusercontent.com/Dmitrykonn/konoplev/master/jqueryflip.js

IV) Динамический сценарий JavaScript

22) Мы используем функцию "вращать карту", совмещая ее с классом контейнера карты и класса кнопки:

function rotateCard(btn) {

var $card = $(btn).closest('.card-container');

console.log($card);

if ($card.hasClass('hover')) {

$card.removeClass('hover');

} else {

$card.addClass('hover');

}

V) HTML

23) Указываем стандартные параметры:

<!DOCTYPE html>

<head>

24) В теге <title> пишем условный заголовок, затем встраиваем bootstrap-библиотеку, Font Awesome и CSS.

25) Закрываем </head> и внутри <body> разворачиваем классы bootstrap-верстки:

26) Теперь создаем класс секции, в котором у нас будут располагаться flip-карты:

Обратите внимания, что эти классы будут закрыты после всех flip-карт.

27) Flip-карта начинается с класса верстки макета bootstrap:

28) Далее мы разворачиваем все классы, использовавшиеся в CSS, то есть:

29) Теперь встраиваем фото фронтальной части карты:

30) Закрываем класс обложки.

31) Открываем классы контента, основного содержимого и имени заголовка:

<h3 class="name">Венеция</h3>

32) Закрываем класс основного содержимого.

33) Открываем класс футера и в нем класс кнопки с атрибутом клика и параметром переворачивания карты:

34) Теперь встраиваем стрелку кнопки через Font Awesome, задаем цвет надписи на кнопке (используйте свой) и закрываем все соответствующие классы:

<font color="black"><i class="fa fa-mail-forward"></i>подробнее</font></button>

</div>

35) Открываем классы обратной стороны карты и ее текстовой части:

36) В теге абзаца указываем нужный текст:

Ваш текст

37) Закрываем класс текстовой части.

38) Класс контента у нас пуст:

39) В классе футера разворачиваем класс обратной кнопки:

<i class="fa fa-reply"></i>назад</font>

</button>

40) Закрываем все оставшиеся классы:

</div>

41) Повторяем пункты, начиная с 27 для второй flip-карты.

42) Закрываем теги секции, контейнера и ряда:

</section>

</div>

43) Встраиваем JavaScript-библиотеку и сам JavaScript

44) Закрываем </body> и </html>

Если все верно, то ваши flip-карты будут выглядеть как здесь: https://konoplevdesign3.blogspot.com/p/flipcards.html

Ссылки на выполненное задание принимаются в комментариях к данному посту до 15:00 18 апреля.

Поиск по этому блогу

Верстка

Верстка и веб-дизайн. 3 курс. Практическое занятие №6. Bootstrap верстка интерактивных Flip-карт

Комментарии

Отправить комментарий

Популярные сообщения

Аудитория сетевых СМИ. ФЖ-301/2. Долги

Верстка и веб-дизайн. 3 курс. Практическое занятие №8. Display animation верстка на основе keyframes