Макетирование страниц CSS - фреймворки - Twitter Bootstrap презентация

СПИКЕРЫ
ГЕРАСИМОВА ВЕРА ГРИГОРЬЕВНА
доцент, кафедры информатики
РЭУ имени Г.В. Плеханова
тел.: [phone] e-mail: [e-mail]
НЕДЕЛЬКИН АЛЕКСЕЙ АЛЕКСАНДРОВИЧ
старший преподаватель, кафедры информатики
РЭУ имени Г.В. Плеханова
тел.: [phone]
e-mail: [e-mail]

ЧАСТЬ 1
АДАПТИВНЫЙ ДИЗАЙН

СОВРЕМЕННЫЙ ДИЗАЙН
И ВАРИАНТЫ ВЗАИМОДЕЙСТВИЯ
Принцип адаптивной верстки заключается в том, что дизайн сайта сжимается и растягивается при изменении разрешения экрана.
При изменении размеров экрана могут появляться или исчезать отдельные информационные блоки и очень важно выделить ключевую информацию

Огромный экран дает возможность отобразить не только ключевые, но и вспомогательные информационные блоки.
БОЛЬШОЙ
ЭКРАН

Необходимо вписать важные блоки в экран небольшого компьютера или планшета, нужно задуматься о существенных и второстепенных, а также о способах взаимодействия.
СРЕДНИЙ
ЭКРАН

Только самая важная информация и контакты и хорошо продуманная навигация.
МАЛЕНЬКИЙ
ЭКРАН

ЧАСТЬ 2
TWITTER BOOTSTRAP

Это самый популярный в мире фреймворк для создания быстродействующих мобильных сайтов с загрузочным CDN и шаблонами стартовой страницы.
Преимущества Bootstrap
Быстрое создание и настройка адаптивных сайтов с помощью Bootstra с открытым исходным кодом, включающего:
адаптивная система сеток,
множество готовых компонентов,
переменные sass,
плагинs JavaScript
ЧТО ТАКОЕ
BOOTSTRAP?

Создание любого макета начинают с подключения создания библиотек Bootstrap
https://bootstrap-4.ru/
После подключения библиотек нужно использовать контейнеры контейнера и предустановленные классы
(блок div с классом .container).
После этого переходят к созданию рядов (блоки div с классом .row),
внутри которых располагают блоки div с помощью которых выполняют разметку макета для различных устройств. Такие блоки создаются с помощью стандартных классов Bootstrap:
.col-xs-*, .col-sm-*, .col-md-* и .col-lg-*
BOOTSTRAP
ТИПОВЫЕ РАЗРЕШЕНИЯ МАКЕТА

Bootstrap – библиотека шаблонов CSS, распространяемая свободно командой сайта MaxCDN. Нужна система управления пакетами или исходники Bootstrap?
BOOTSTRAP
БЫСТРЫЙ СТАРТ

.col-xs-* Очень маленький экран
.col-sm-* Маленький экран
.col-md-* Средний экран
.col-lg-* Большой экран
BOOTSTRAP
ТИПОВЫЕ РАЗРЕШЕНИЯ МАКЕТА

Extra large
Extra large
Максимальная
ширина контейнера
≥1200px
1140px
Префикс класса
.col-xl-*
BOOTSTRAP
БОЛЬШОЙ ЭКРАН

Large
Максимальная
ширина контейнера
≥ 992px
960px
Префикс класса
.col-lg-*
BOOTSTRAP
СРЕДНИЙ ЭКРАН

Medium
Максимальная
ширина контейнера
≥ 768px
720px
Префикс класса
col-md- *
BOOTSTRAP
СРЕДНИЙ ЭКРАН

Extra small
Максимальная
ширина контейнера
<576px
Префикс класса
.col-sm- *
BOOTSTRAP
ОЧЕНЬ МАЛЕНЬКИЙ ЭКРАН

Small
Максимальная
ширина контейнера
≥576px
540px
Префикс класса
.col-sm- *
BOOTSTRAP
МАЛЕНЬКИЙ ЭКРАН

Основной каркас будет состоять из контейнера фиксированной ширины
...
BOOTSTRAP
КОЛОНКИ

Ряд : блок с классом .row
...
который предназначен для размещения блоков с классами системы сеток и будет содержать основной блок (main) и правый блок (sidebar)
BOOTSTRAP
КОЛОНКИ

По умолчанию блок состоит из 12 колонок Bootstrap.
Основному блоку (main) установим ширину равную 9 колонкам Bootstrap
…
правому блоку (sidebar) 3 колонки, оставшиеся от 12 колонок Bootstrap
…
BOOTSTRAP
КОЛОНКИ
Слайд 21
Важно указывать количество колонок в конкретном разрешении дисплея
Очень
маленький
экран
Маленький
экран
Средний
экран
Большой
экран
Bootstrap: Фиксированная верстка макета
Слайд 22
Если необходимо сделать резиновый макет, то для этого нужно использовать класс container-fluid
Bootstrap: Резиновая
верстка макета
Слайд 23
Если необходимо сделать отступ (пропуск колонки), то для этого нужно использовать класс
col-md-offset-
Bootstrap: Отступы
и пропуски колонок
Слайд 24
Bootstrap: Пример макета
Слайд 25
Bootstrap: Пример макета
Слайд 26
Bootstrap: Пример макета
Слайд 27
Bootstrap: Пример макета
Слайд 28
Разметка для устройств с большим (lg)
и средним (md) размерами экранов
Слайд 29
Разметка для устройств
с маленькими (sm) размерами экранов
Слайд 30
Разметка для устройств с очень
маленькими (xs) размерами экранов
Имя файла: Макетирование-страниц-CSS---фреймворки---Twitter-Bootstrap.pptx
Количество просмотров: 7
Количество скачиваний: 0
Скачать
- Предыдущая
Электронная поликлиника – новые возможности медицины
Следующая -
Великая российская революция: февраль 1917 г. История России. 10 класс

Важно указывать количество колонок в конкретном разрешении дисплея
Очень
маленький
экран
Маленький
экран
Средний
экран
Большой
экран
Bootstrap: Фиксированная верстка макета

Если необходимо сделать резиновый макет, то для этого нужно использовать класс container-fluid
Bootstrap: Резиновая верстка макета

Если необходимо сделать отступ (пропуск колонки), то для этого нужно использовать класс
col-md-offset-
Bootstrap: Отступы и пропуски колонок

Bootstrap: Пример макета

Bootstrap: Пример макета

Bootstrap: Пример макета

Bootstrap: Пример макета

Разметка для устройств с большим (lg)
и средним (md) размерами экранов

Разметка для устройств
с маленькими (sm) размерами экранов

Разметка для устройств с очень
маленькими (xs) размерами экранов