Как сделать возможность переключения адаптивной панели для демонстрации веб-сайта?

Я хочу знать, как сделать адаптивную панель параметров переключения для демонстрации веб-сайта. Я хочу знать, когда пользователь нажимает на любой отзывчивый значок, например, рабочий стол, мобильный телефон и т. д., шаблон должен автоматически изменять свою отзывчивость. Ниже приведен пример ссылки на сайт с такой же опцией адаптивной панели внизу страницы.

http://kopatheme.com/demo/upside-demo/

Я хочу такую ​​же панель для своей демонстрации.


person Samarth    schedule 27.07.2015    source источник
comment
Веб-сайт использует структуру CSS bootstrap. Вы можете создать аналогичную панель, как только научитесь использовать Bootstrap.   -  person Ahs N    schedule 27.07.2015
comment
html5css3tuts.com/panth   -  person Samarth    schedule 27.07.2015
comment
вы можете видеть, что в нижней части страницы есть вариант адаптивного переключателя со значками мобильного телефона и планшета и логотипом kopathemes. Я хочу этот переключатель.   -  person Samarth    schedule 27.07.2015


Ответы (1)


Они используют Javascript/JQuery для управления кнопками. Когда вы нажимаете кнопку, они помещают содержимое веб-сайта в iframe, который они могут изменять с помощью высоты и длины. Таким образом, он дает пример того, как это будет выглядеть на рабочем столе, планшете или мобильном телефоне. Они просто меняют высоту и длину iframe, остальное сделает css. Они используют изображение в качестве фона, просто чтобы сделать его немного более причудливым.

для получения дополнительной информации о фреймах: http://www.w3schools.com/tags/tag_iframe.asp

person Jim    schedule 27.07.2015