Upload
vladimir-tomberg
View
315
Download
0
Embed Size (px)
Citation preview
Веб Дизайн
Лекция 9Гибкие сетки
Twitter Bootstrap
Vladimir Tomberg, PhD
Эстонский Университет Прикладных Наук
по Предпринимательству Майнор
Февраль 2016
Pic
ture
sou
rce:
http
://us
erce
nter
edco
nten
t.com
1
ГИБКИЕ СЕТКИ
2
3
Основа отзывчивого дизайна – Гибкая Сетка.
Одно содержание – несколько раскладок
Web Accessibility Workshop
4
Пример сетки
Web Accessibility Workshop
Source: http://aaronkwhite.com
Использование сеток в Axure
6
7
• Axure file with the 960 Grids already placed on Master pages
• Axure960GridSystem.zip• Bootstrap_08152013.zip
Несколько ссылок на шаблоны с сетками для Axure
Задание: Верстка с сеткой
• Переработайте свой макет таким образом, чтобы он строился на основе гибкой сетки;
• Используйте одну из сеток для Axure;• Попробуйте начать с мобильной версии;• Результаты опубликуйте в блоге
8
СРЕДА РАЗРАБОТКИ (FRAMEWORK) TWITTER BOOTSTRAP
9
Twitter Bootstrap
• Простой и легко настраиваемый HTML, CSS и Javascript фреймворк для более быстрой и удобной Web-разработки
10
Ссылка для загрузки
http://getbootstrap.com/getting-started/
11
Задание: Верстка в Bootstrap
• На основе новых макетов сверстать первую страницу используя Bootstrap;
• Исходный код и скриншот страницы опубликовать в Google Drive
13